Change from "Valo" theme to "Reindeer" in new Vaadin 7.3 app

Question

In new Vaadin 7.3 apps created with the Vaadin Plugin for NetBeans, the default theme is the new Valo theme. Valo is hip-looking, and very important technology for the future. On the downside, Valo is huge in its default sizing. Until I learn how to downsize the Valo widgets, I need to switch my app back to the professional-looking business-app-oriented Reindeer theme.

How to change my code and project settings to use Reindeer theme throughout my app?

Fandango

Answer 1

You need to edit your project's CSS, save, and do a clean-and-build.

Edit CSS

In the NetBeans Projects panel, navigate to Web Pages > VAADIN > themes > mytheme > mytheme.scss. In that file:

• Comment out the line @import "../valo/valo.scss"; and replace with @import "../reindeer/reindeer.scss";
• Comment out the line @include valo; and replace with @include reindeer;

So in an automatically configured Vaadin 7 app, the mytheme.scss file changes from this:

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

@mixin mytheme {
  @include valo;

  // Insert your own theme rules here
}

…to this:

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

@mixin mytheme {
  @include reindeer;  /*  @include valo;*/

  // Insert your own theme rules here
}

Save CSS

Save the changes to the "mytheme.scss" file.

NetBeans may offer to turn on a feature for compiling Sass files on Save. Decline the offer. Your Vaadin project is already configured to rebuild the Sass into CSS as part of a clean-and-build.

Clean-And-Build

Then click the "Clean and Build" button on NetBeans toolbar (the hammer and broom icon).

Be patient as this may take a few minutes. Watch the Output pane to see when the build has completed.

That is all you need to change your project. Your new theme should be in effect, except for the caveat described next.

Browser Reload

Some web browsers are overly aggressive in their caching (looking at you, Safari!). So Valo’s CSS and such may still be "stuck" in your web browser. So when your run your project do not despair if you still see the Valo look.

Click the web browser’s reload button to force the browser to dump its cache, load fresh info from the server, and restart your app with the other theme's look. In the old days some browsers (Firefox?) required you to hold down the Shift key while clicking that reload button, but that may no longer be necessary. If the Valo look persists, use a search engine to learn how to clear your particular web browser’s cache. Or try another web browser to verify your Reindeer theme settings.

Fandango

Answer 2

You could just change the UI annotation @theme("mytheme") which is created as default to @theme("reindeer") if you don't have any customisations to the theme.

This works since the JAR has the SCSS file for reindeer also included, the same one you can import in mytheme.scss if you indeed would have some custom styling.

Anissaanita

Good answer. But I find I always need a bit of CSS tweaking in my Vaadin apps, so I must use a custom theme. – Fandango

Also, this answer's approach would be a handy way to debug a potential custom theme; declare Reindeer with the annotation to instantly abandon the custom theme and verify the issue. – Fandango

Tip: That string "reindeer" must be lowercase (as correctly shown in the Answer). The string "Reindeer" fails because of the uppercase R. – Fandango

"That string "reindeer" must be lowercase" - it is even better to use the built-in constant: @Theme(Reindeer.THEME_NAME) – Astaire