Theme Picker Example

--text: light-dark(#000, #fff);

This uses the CSS light-dark() function from the CSS Color Module Level 5 specification. It allows you to define different values for light and dark themes.

&:has(#theme-dark:checked) {
  color-scheme: dark;
}

By using radio buttons, no JavaScript is needed to switch themes.

View Example