Switch Dark/Light automatically based on user browser preference

[joehand]

Uses the prefers-color-scheme CSS media query to automatically switch back and forth between dark + light with the same theme following this approach. I combined the Discord Light & Dark to demo.

It mostly works, and should be backwards compatible with the rest of the themes.

Unfortunately, it does not work with the SASS mixins like adjust-color or the custom recolor since those need colors at compile time, not compatible with the CSS vars. For now I've just kept those as the base variable.

I didn't see a clear way to fix those, and unfortunately there are quite a few. The most straightforward would be to define additional variables, but that's not great. Will look again when I have time. Or maybe there is another way to do it with SASS I didn't see.

Same theme; switched between Dark/Light preference:

[Happyrobot33]

I think something that could be done is some JS injection that forces your theme over based on your web setting. not perfect but would fix still having the template system. this would allow for additional customization as users could then maybe pick what their dark mode and light mode themes are, since there is the possibility for multiple themes that match either the dark mode or light mode aesthetic

[joehand]

Hmm ya that may be more straightforward.

I don't really see how the theme is loaded but if its possible to add a second theme, I think having a media query there would work:

<link rel="stylesheet" type="text/css" href="/pwt/themes/theme-discord-light.css" />
<link rel="stylesheet" media="(prefers-color-scheme: dark)" type="text/css" href="/pwt/themes/theme-discord-dark.css" />

I may keep digging into this PR though. There are a few places where fonts disappear on a few themes (I think the light ones?) because they just inherit parent colors so this may help address that too.

[Happyrobot33]

Hmm ya that may be more straightforward.

I don't really see how the theme is loaded but if its possible to add a second theme, I think having a media query there would work:

<link rel="stylesheet" type="text/css" href="/pwt/themes/theme-discord-light.css" />
<link rel="stylesheet" media="(prefers-color-scheme: dark)" type="text/css" href="/pwt/themes/theme-discord-dark.css" />

I may keep digging into this PR though. There are a few places where fonts disappear on a few themes (I think the light ones?) because they just inherit parent colors so this may help address that too.

theme is loaded in a way where media selectors would essentially lock you in sadly. The only proper way would be to do a JS injection like some of the button and field injections I've done already (they are a optional feature currently since its deeper modification than just adding the themes to the selectable list)