Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Problem with selected color
I have problem with selected color in valo theme with light focus color
I use this code in css variable file with Standard Valo background:
$v-focus-color: #07bc8d;
$v-focus-style: 0 0 0 2px rgba($v-focus-color, .5) !default;
$v-gradient: v-linear 8%;
When select menubar or combox the the valo set color: # 090F0E
for selected item.
Like the standard focus color valo would be set a light color for this atribute..
Why? How can I fix?
$v-focus-color: #197EDE;
$v-focus-style: 0 0 0 2px rgba($v-focus-color, .5) !default;
$v-gradient: v-linear 8%;
@R V
I want to change the default focus color with various color. #197EDE is similar to original color.
The problem is in vaadin "function" that calculate selected color...
Can I modify the function?
The only soluction is to use css to override the selected color ?
If I understand you correctly, you want the text color to be either white or black, depending on the background.
This is exactly what we wanted as well
By default valo computes a "pretty" color instead, with low contrast.
We got the following workaround from vaadin: 1) import valo, 2) override the function:
<setting variables>
@import "../valo/valo";
// Override the font color function to get high contrast color
@function valo-font-color($bg-color, $contrast: 0.8) {
@if type-of($bg-color) == color {
@if is-dark-color($bg-color) {
@return #fff;
} @else {
@return #000;
}
}
@return null;
}
@mixin <my project> {