What I'd like to see is a site-wide css-only toggle to switch between dark and light mode. The shown example wouldn't preserve the setting when navigating to a sub-page, or would it?
That’s a perfectly reasonable default fallback, but I think what OP is asking for is a per-site preference the user can specify within the site. Currently you can do this without JS on a single page (with eg the checkbox hack or this CSS Toggles proposal). But you can’t persist it between pages and visits without either JS or a server-sent Cookie header.
All of that said, an aside: if you do implement a per-site setting, it’s a good idea to make it tri-state: light, dark, system. That way the user can remove their per-site setting if they’d prefer to go back to the default.
Comments
They’re standardizing the checkbox hack! This is fantastic. It will make so many simple no-JS state changes so much more accessible.
What I'd like to see is a site-wide css-only toggle to switch between dark and light mode. The shown example wouldn't preserve the setting when navigating to a sub-page, or would it?
Isn't it what `prefers-color-scheme` [0] is for ?
[0]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
That’s a perfectly reasonable default fallback, but I think what OP is asking for is a per-site preference the user can specify within the site. Currently you can do this without JS on a single page (with eg the checkbox hack or this CSS Toggles proposal). But you can’t persist it between pages and visits without either JS or a server-sent Cookie header.
All of that said, an aside: if you do implement a per-site setting, it’s a good idea to make it tri-state: light, dark, system. That way the user can remove their per-site setting if they’d prefer to go back to the default.