how to reset my theme

Flow
1

After messing up with css I got my theme to break up completly. There is no no css applied and the web page is very ugly and the page loading takes several seconds. Is there an easy way to reset the theme as it was when the procect was created? I am using V7.5.10.

arto

2

In the directory
VAADIN/themes/:



  • Delete the file
    styles.css
     if present



  • Change the content of the file
    .scss
    to:




[font=courier new]
[font=arial]
[font=courier new]
[font=arial]

// Global variable overrides. Must be declared before importing Valo.

// Defines the plaintext font size, weight and family. Font size affects general component sizing.
//$v-font-size: 16px;
//$v-font-weight: 300;
//$v-font-family: "Open Sans", sans-serif;

// Defines the border used by all components.
//$v-border: 1px solid (v-shade 0.7);
//$v-border-radius: 4px;

// Affects the color of some component elements, e.g Button, Panel title, etc
//$v-background-color: hsl(210, 0%, 98%);
// Affects the color of content areas, e.g  Panel and Window content, TextField input etc
//$v-app-background-color: $v-background-color;

// Affects the visual appearance of all components
//$v-gradient: v-linear 8%;
//$v-bevel-depth: 30%;
//$v-shadow-opacity: 5%;

// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;

// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples

@import "../valo/valo.scss";

@mixin <your theme name> {
  @include valo;

  // Insert your own theme rules here

}

[/font]
[/font]
[/font]

If your theme is based on some other theme provided by VAADIN
 (runo, reindeer, …)
replace
 ‘valo’
by that respective theme name.

[/font]



  • If you have have changed the file
    styles.scss
    , replace its content with the following:


[font=courier new]
[font=arial]

@import "addons.scss";
@import "testx.scss";

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
/* The actual styles should be defined in testx.scss */
.<your theme name> {
  @include addons;
  @include <your theme name>;
}

[/font]
[/font]
Remember to change the phrase ’

’ to the name of your theme everywhere.

el goog

3

Thanks!

There is one error in the above. The line


@import “testx.scss”;

Should be replaced with


@import “.scss”;

Is it possible to see the compilation errors of scss-files somewhere? If there is any error then the theme does not load, but there is no error messages anywhere. This can be difficult to debug.

arto

4

The VAADIN SASS compiler doesn’t give you very much information about errors. If - see the following example - your *.scss file contains css-errors, you get no information about that.

my_theme.scss:

@mixin test-mixin($font-size : 3) {
    font-family:      Arial;
    font-size:        $font-size;
}

.main {
    @include test-mixin;
}

compiles to my_theme.css:

.main { font-family: Arial; font-size: 3; } In case you use invalid property names - for example ’
fontsize
’ instead of ’
font-size
’ - this is also ok for the SASS compiler.

If a severe error occurs during parsing the scss-file and the compiler can’t continue, you get (within eclipse) only a console message, which informs you, that the compilation was not successfull; see the following changed example:
my_theme.scss:

[code]
@mixin test-mixin($font-size : 3,5) {
font-family: Arial;
font-size: $font-size;
}

.main {
@include test-mixin;
}
[/code]Within the eclipse console you get the very impressive message:

[code]
Compiling theme my_scss

Compiling theme my_scss failed after 892 ms
[/code]I have tried to compile this scss-file without the VAADIN eclipse plugin (see GitHub for the VAADIN SASS compiler project). I got a message about the error, which shows the line and column where the error has been detected:

[code]
Exception in thread “main” com.vaadin.sass.internal.parser.SCSSParseException: Error when parsing file xxxx\my_scss.scss
Encountered “5” at line 1, column 34.
Was expecting one of:
…
…

at com.vaadin.sass.internal.ScssStylesheet.get(ScssStylesheet.java:176)
at com.vaadin.sass.SassCompiler.main(SassCompiler.java:92)

ERROR: JDWP Unable to get JNI 1.2 environment, jvm->GetEnv() return code = -2
JDWP exit error AGENT_ERROR_NO_JNI_ENV(183): [util.c:840]

[/code]Of course no css-file was generated (as with the VAADIN eclipse plugin).

Thanks el goog