Hello everyone, first of all, sorry if it’s been asked before, but I couldn’t find an anwser…
I’m very new to Vaadin, and I’d like to use Valo Dark theming, which is by the way, awesome.
I coulnd’t make it work. I defined my own theme, included Valo, and pasted Valo Dark variables in it. But it’s not working. I have added the annotation tag @Theme(“mytheme”) but it doesn’t seem to work. Can anyone give me a hand with this?
Thanks in advance people!
Hi Andres Safafa ..
did you take a look on “the book of vaadin”
chapter 7 … " Themes"
…
vaadin themes use sass for styling …
did you know sass ?
you it’s simple you can google it … or read about in the book of vaadin
chapter 7.3
Syntactically Awesome Stylesheets (Sass)
page no … 268
if you looking for “SASS” you can visit :
http://sass-lang.com/
so you need to compile your “SASS” theme to get styles.css file and this file your app load it.
all your styles wrote into it.
if you asking for
Compiling Sass Themes
you find every thing … just open the book of vaadin chapter
7.3.3. Compiling Sass Themes
page … 270
…
if you open your style file “SCSS File” named … “mytheme.SCSS” → my theme is your theme
you will find commented configrations for your valo theme …
somthing like :
[code]
// 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;
$v-border: 0 none (v-shade 0.7);
$v-border-radius: 0;
//$v-background-color: hsl(130, 130%, 130%);
//$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
[/code]if you want to use the demo valo examples download valo master project (source code) from GitHub , copy & paste variables … dont forget compile your theme from sass to css if you using eclipse some times you need refresh the theme folder from project explorer by pressing F5 after any compiling.
i hope it helped .
i am sorry if my language is v.poor . english it’s not my mother tonge.
good night.
i forget something …
type this …
befor
@import “…/valo/valo.scss”; IN YOUR style file
→ $v-background-color: darken(yourColor, 30%);
yourColor… somthing like : rgb(155, 200, 20); or rgba(33,255,155,.5); or any css color syntax … the other parameter is the persintage of your color’s darkness …
also you can use lighten(yourColor, 30%); if you want lighten …
these is About SASS not Vaadin so if this informations are new for you you need to google it …
Lynda.com have a nice tutorials for SASS , and LESS also.
This should be all you need;
$v-background-color: #444d50;
$v-focus-color: #07a9ca;
$v-focus-style: 0 0 3px 2px $v-focus-color;
$v-bevel-depth: 40%;
$v-gradient: v-linear 12%;
$v-border-radius: 10px;
$v-font-family: Roboto, sans-serif;
$v-font-weight: 400;
$v-font-weight--header: 400;
$v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1);
$v-shadow: 0 0 0 3px rgba(0,0,0,0.32), 0 1px 0 3px rgba(255,255,255,0.14);
$v-textfield-bevel: inset 0 2px 2px v-shade;
$v-textfield-shadow: $v-shadow;
$v-unit-size: 40px;
$v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4);
$v-component-group-spacing: 6px;
@import "../valo/valo";
@mixin yourtheme {
...
}