Native checkbox element not theme-switching with inserted phrasing element, like span

The native checkbox element seems to stop theme-switching when a phrasing element is introduced.

Here’s line 540 from the Kitchen Sink plugin. It theme-switches automatically.:

<label><input type="checkbox">Check me</label>

If you add a phrasing element, like span, the theme-switching stops and the text is always dark:

<label><input type="checkbox"><span>Check me</span></label>

In addition, adding a class to the span element in order to hook it up to theme-switching via CSS doesn’t work either. The only thing that works to connect it to CSS theme-switching is to add an id for the span element and then theme-switch using that id.

However, if you switch the span and the input elements, theme-switching works again:

<label><span>Check me</span><input type="checkbox"></label>

Somewhat bizarre behavior.

There’s a default CSS rule that’s getting applied and not dealing with the themes quite right, apparently.

You can override with:

label input[type="checkbox"] + span {
    color: inherit !important;
}

Note that the theme switching in the kitchen sink is happening due to a media query, not because the HTML checkbox text has any inherent theme capability. So you can also elect to override with a specific color in your media query if you so choose.

@media (prefers-color-scheme: dark), (prefers-color-scheme: darkest) {
  label, label input[type="checkbox"] + span {
    color: #E0E0E0 !important;
  }
}

That worked! Thank you.