- From: Tab Atkins Jr. via GitHub <noreply@w3.org>
- Date: Wed, 27 Aug 2025 23:09:58 +0000
- To: public-css-archive@w3.org
I am once again being bitten by this, for the exact same reason I was originally bitten by it: it is *impossible* to use the MQ if you want to use an in-page toggle as well. Specifically, see <https://github.com/w3c/csswg-drafts/issues/12516#issuecomment-3229445194>. In this issue, it turns out that the W3C dark-mode styles are *not* applied via `@media (prefers-color-scheme)`; instead, they're applied unconditionally, and are controlled solely by enabling or disabling a dark-mode stylesheet in JS. This breaks Bikeshed-applied dark-mode styles, which *do* use the MQ. If your OS is in light mode, but you click the dark-mode toggle to "dark" in the spec, most of the page uses dark-mode colors but all the Bikeshed styles are still using light-mode colors. That's broken! The *only* way to avoid this is to avoid using the MQ *at all*, if you want to use a toggle. Instead, you have to use JS to set a class on the root (and have the toggle change that class), then make all your dark-mode styles depend on that class, instead. See, for example, <https://dev.to/whitep4nth3r/the-best-lightdark-mode-theme-toggle-in-javascript-368f>. This means your dark-mode styles have to all coordinate with each other to use this page-specific convention, rather than using the built-in and widely-known MQ name. To make it worse, your dark-mode styles are now completely JS-dependent, unless you go to some effort to *duplicate* them inside of an MQ + disable them when the toggle is in effect. This sucks! And as pointed out by @JoshTumath [earlier in this very thread](https://github.com/w3c/csswg-drafts/issues/10249#issuecomment-2291723349), we resolved that the `prefers-color-scheme` in iframes and external SVG matches the "used color scheme" of the element, so that a page manually set to `color-scheme: dark` doesn't suddenly get light-mode iframes or SVGs. This means we, as a group, are clearly totally fine with documents, even other HTML documents, having their "preferred color scheme" set by page preferences, rather than explicitly by user preferences! ---------- So I'm Agenda+ing this again, because it sucks super bad that the W3C's own stylesheet toggle is broken due to this behavior working badly. Specifically, I'm proposing that `<meta name=color-scheme value=light>`, `value="only light"`, and `value=dark` change the page's "preferred color scheme" to match. (`"light dark"`, `"dark light"`, and a missing/invalid meta all use the user's preference, as normal.) If you object, I'm going to demand that you provide an answer as to how several non-cooperating stylesheets (that is, not written by the same author, thus not capable of depending on a page-specific convention) are supposed to be written, to both reflect user preferences in the absence of JS, and allow a JS-based toggle. And if the answer to this is anything other than "use `@media (prefers-color-scheme)`, I'll further demand you tell me what value the MQ even has, and why we shouldn't deprecate it and recommend that authors never use it. -- GitHub Notification of comment by tabatkins Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10249#issuecomment-3230032757 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 27 August 2025 23:09:58 UTC