How to use with prefers-color-scheme?

[Spone]

I'd like to toggle the dark theme depending on the browser setting, which can be accessed using prefers-color-scheme.

What's the recommended way of doing that?

[gskril]

Also curious about this. @Spone did you find a solution? I've just started making my own big CSS file like this but it's definitely not ideal.

I would have expected both light/dark scales to apply their CSS variables to the :root element for automatic dark mode.

[Zwyx]

Also thinking about this.

At the moment, Radix outputs things this way:

:root {
  /* variables for light theme */
}
.dark-theme {
  /* variables for dark theme */
}

So by default it's light, and if we apply the dark-theme class to body, then it's dark. This necessitates JavaScript (although it can be done very effectively and without the dreaded flash, by adding a tiny bit of JS at the beginning of body to read the preferred choice from local storage or prefers-color-scheme and set the dark-theme class if necessary; see this and this).

NextJS (create-next-app) does this:

:root {
  /* variables for light theme */
}
@media (prefers-color-scheme: dark) {
  :root {
    /* variables for dark theme */
  }
}

Which works very well to set the correct theme based on OS preferences. And doesn't require JavaScript.

So what Radix could do to combine the best of both, is this:

:root {
  /* variables for light theme */
}
@media (prefers-color-scheme: dark) {
  :root {
    /* variables for dark theme */
  }
}
.light-theme {
  /* variables for light theme */
}
.dark-theme {
  /* variables for dark theme */
}

This way, when the page loads, the correct theme is selected based on OS preferences (even if the user has JavaScript disabled). And then, JavaScript could read local storage and apply light-theme or dark-theme based on the user preference for this particular site.

It's a bit annoying to have to repeat the variables declaration, there might be other ways (@apply was a good candidate, but it has been abandoned).

---

EDIT: this is basically what PicoCSS does, with only three blocks instead of four:

[data-theme=light],
:root:not([data-theme=dark]) {
  /* variables for light theme */
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
  /* variables for dark theme */
  }
}

[data-theme=dark] {
  /* variables for dark theme */
}

Clever!

[Spone]

Thanks a lot @Zwyx for taking the time to investigate!

@vladmoroz @colmtuite would you be open to supporting this? I can work on a PR if it has a chance to be merged :)