Help changing the selected state label for sl-option

[shawnhancock]

Hi there!

The dark blue I am using causes some issues when looking at certain elements in dark mode. This issue occurs with elements that have a selected state where the color is inverted for dark mode. In this example how do I force the selected label to be white in both light and dark mode?

Edit: I have the same issue with the selected checkboxes in the sl-tree-item. I've tried changing them to no avail.

[claviska]

Try this:

sl-option[aria-selected="true"]::part(checked-icon),
sl-option[aria-selected="true"]::part(label) {
  color: white;
}

I'm not sure if you're customizing the color palettes or not, but note that the default themes currently expect colors to work as shown here in the docs:

https://shoelace.style/tokens/color

These color tokens are intended to be perceptually uniform in terms of luminance, so any changes that deviate from that will mess with contrast and likely mean additional custom selectors to "fix" styles like this.

We're working on making it much easier to theme Shoelace in a future release, but I figured I'd mention that in case it helps. Thanks for your patience!

[shawnhancock]

Thank you @claviska, that works perfectly. Do you have a similar solution for the tree checkbox? I've tried globally setting the sl-checkbox but it doesn't affect those in the sl-tree?

[claviska]

It looks like we missed adding a part to the checkbox, so you can't [easily] customize it right now. Fixed in 0384b03.

In the next release, you'll be able to do this:

sl-tree-item::part(checkbox__checked-icon),
sl-tree-item::part(checkbox__indeterminate-icon) {
  color: white;
}