Vaadin 8: Customize button color - vaadin8

Question

I want to change the green color from the valo "friendly" button but I failed.
I did as described in
Vaadin Upload Button, CSS to change its color (same styles as Button)?
but I think I missed something.
From the styles.css I copied the
.mytheme .v-button-friendly {
height: 37px;
padding: 0 16px;
color: #eaf4e9;
font-weight: 400;
border-radius: 4px;
border: 1px solid #227719;
border-top-color: #257d1a;
border-bottom-color: #1e6b15;
background-color: #2c9720;
background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%);
background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%);
-webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}
to the mytheme.scss and just changed the color.
mytheme.scss looks now as follows:
#import "../valo/valo.scss";
#mixin mytheme {
#include valo;
.v-button-sgcgreen {
height: 37px;
padding: 0 16px;
color: #006666;
font-weight: 400;
border-radius: 4px;
border: 1px solid #227719;
border-top-color: #257d1a;
border-bottom-color: #1e6b15;
background-color: #006666;
background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%);
background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%);
-webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}
}
and it is added to the end of the styles.css file as
.mytheme .v-button-sgcgreen {....}
I set the style for the button as
Button showAllProbesBtn = new Button("Show all");
showAllProbesBtn.addStyleName("sgcgreen");
But the button is default grey and does not have the specified color.
What am I missing?
Thank you for your help!
Edit:
It seems what I did is correct but just not displayed directly. Although I did Maven clean install several times and restarted the Tomcat, the correct color appeared only after I started changing something else in the code.
Where is the style cached? What do I have to do to see style changes immediately in Eclipse and in Chrome?

Answer 1

I recommend that you change the Valo variable v-friendly-color (see Valo theme doc). Example mytheme.scss:
// overwrite Valo variables
$v-friendly-color: #0000F0;
// Import valo after setting the parameters
#import "../valo/valo";
#mixin goidentity {
#include valo;
}
The Valo theme will then take the color you set. No need to mess with CSS styles. However, I don't know if this color variable is used elsewhere in the theme. So this might effect other styles than only the friendly button.