I always knew that there should be a way to have a button to change light and dark mode on my website without javascript. But I couldn’t figure it out (pre llm era) and gave up and just used javascript. Now it’s time to make an update on that. This blog motivated me.
If your intention is to let the user choose between styles the best way would be Alternate Stylesheets: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/... . Sadly Google can't be bothered to implement "legacy" standards (=standards not invented at Google).
If your intention is to adopt your styles slightly to user preferences then there are media queries.
Alternate stylesheets don't persist (at least in Firefox), which is really annoying.
Media queries are really nice though. Being able to provide a night mode alternative without even asking the user, assuming they've set the OS to their preference, is really seamless.
> Alternate stylesheets don't persist (at least in Firefox), which is really annoying.
Yes, I also think they should. What I wondered, is this behaviour prescribed somewhere? Even if it were, form content is retained even across randomly typing in a different URL and navigating back, form submission and even across real crashes just seconds after I typed the letter. This is really nice and I don't think it is mandated. This is the stuff User Agents should be compete with, not ways to get data from the User to a surveillance company.
> Being able to provide a night mode alternative without even asking the user, assuming they've set the OS to their preference, is really seamless.
Yes, that's nice and how every thing in a UI should be. It helps both the programmer and the user in efficient and controllable usage.
It’s nice but probably not that useful as you still need JS to persist the setting.
For testing there are extensions which allow overriding the browser’s scheme (for Firefox anyway).
> JS to persist the setting.
Yes, local storage is crucial functionality. I don't get people who disable JS, but I suppose if they have a bunch of sites they whitelist it's less painful... but then they must trust those sites all the time? How do they know if those sites haven't installed new scary scripts?
Perhaps one possible solution is for browsers to offer a setting to enable all the "safe" functionality of javascript such as button events for fancy carousels, but block the stuff that causes anxiety. I suppose then we'd all argue about what aspects are safe vs scary.
DevTools in Firefox and Chrome both have a `prefers-color-scheme` override built in, no extension required.
Isn't it just `prefers-color-scheme`
that's the "auto" option, but the comment is taking about adding buttons to switch between the themes too
That would be the media query; sort of a long-hand way. I learned about the color function for settings the vars from the article, never saw those in use before.