How to change the background color of an unselected checkbox in a dark theme?

Anvil Q&A
1

What I’m trying to do:
I am trying to add a checkbox to a repeating panel in a data grid in the Rally (dark) theme.

What I’ve tried and what’s not working:
When selected, the checkbox is clearly visible, but when unselected it disappears into the background except when I am hovering on it. How can I use e.g. hover effect color as the unchecked default so the user can clearly see where the checkbox should be?

Clone link:

1 Like
2

After a lot of trial add an error I settled on these:

/* For unselected checkbox use the previous hover effect */
.checkbox input,.radio input {
  background: linear-gradient(0deg, %color:Light Overlay 1%, %color:Light Overlay 1%), %color:Surface Variant%; 
}

/* For the hover effect, use a lighter color */
.checkbox input:hover, .radio input:hover {
    background: %color:On Surface Variant%; 
}
1 Like