How do color a checkbox?

Flow
1

I have a particular checkbox that is very easily overlooked but has big consequences in my program.
To highlight it I would thus like to color it red when it’s checked and green when it’s unchecked.

When I set the attribute “color” of the vaadin-checkbox to “red”/“green” then the label is changing accordingly but the checkbox itself remains blue.
What do I need to mumble to also color the actual checkbox?

I am currently doing that via a simple entry in shared-styles.css:

.red {
	color: red;
}
.green {
	color: green;
}

… but as I said: that changes only the label’s color.

I also tried doing the same in a vaadin-checkbox-styles.css file like so:

:host([class~="red"]
) [part="checkbox"]
 {
	color: red;
}
:host([class~="green"]
) [part="checkbox"]
 {
	color: green;
}

or:

:host(.red) [part="checkbox"]
 {
	color: red;
}
:host(.green) [part="checkbox"]
 {
	color: green;
}

… but these had no effect.

As you might guess I am still fighting with this styling-syntax.

2

The CheckBox color happens to be controlled by the --lumo-primary-color custom property, so you can set its value dynamically via Java API. Try:

checkBox.getStyle().set("--lumo-primary-color","red");

3

getStyles() was not available but checkbox.getElement().getStyle().set("--lumo-primary-color","red"); did the trick.
Thanks!

But what the heck is the color-name for the gray background (when the checkbox is NOT selected)? I would like to color that greenish. I inspected the element but couldn’t figure out that one. It probably inherits that from somewhere but I wasn’t able to figure out what that color is named.

4

Michael Moser:
getStyles() was not available but checkbox.getElement().getStyle().set("--lumo-primary-color","red"); did the trick.

Sorry, my bad. The method is without s, i.e. checkBox.getStyle().

But what the heck is the color-name for the gray background (when the checkbox is NOT selected)?

It seems to be --lumo-contrast-20pct

5

Thanks - that worked!