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;
: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.
              
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");
              
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.
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