I look for spliting my Themes. Is there a possibility to make for different views different Themes?
Depends a bit on what you want to achieve. If you, for example, want to have a Valo theme for one
view
and reindeer theme for another
view
, then it’s going to be tricky. A theme is always UI specific, but you can define different styles for different views depending.
So for example, let’s say you have two views, A and B. You want a white background color for view A, but a gray background color for view B. To achieve this, you need to do two things
- Define a style name in your Java code for both of the views. This is done simply by calling
// myView is the root component of your view, for example, a HorizontalLayout
myView.setStyleName("view-a");
2) define the styles in your SASS code.
.view-a {
background-color: #ffffff;
}
Now if you hae lots of different styles, it’s recommended that you split those into multiple scss files. For example, you could put all style definitions of view A to a separate file. Let’s call that viewa.scss
It should look somewhat like this
@mixin viewa {
.view-a {
background-color: #ffffff;
/* Any other possible styles you may have for view A */
}
}
After this, you need to include the mixin into your actual stylesheet. Open up the styles.scss and add the following two lines to the appropriate places
@import "viewa.scss"; /* Add this at the top of the file */
…and
@include viewa; /* add this together with other includes */Hope this helps you get started. Also make sure you read the
chapter about themes
in the book of Vaadin.
Hi Kim,
Thanks a lot.