5 ms·
The problem is that this doesn't let the user toggle dark mode on/off. If you want the user to be able to toggle dark mode on your site without changing their
by JDiculous 7y ago
The problem is that this doesn't let the user toggle dark mode on/off.
If you want the user to be able to toggle dark mode on your site without changing their Operating System preferences, then you'll need to implement your dark theme as a class (eg. body.theme-dark) since there's no way to dynamically set the media query.
const darkMode = window.matchMedia('(prefers-color-scheme: dark)')
if (darkMode) {
document.body.classList.add('theme-dark')
}
If you have to write your dark theme CSS as a separate class, then there's no sense in duplicating that logic inside the media query and having to override it when the user toggles it. So I ended up using that Javascript instead of putting the styles in the media query.
It's a shame, I would've preferred a pure HTML/CSS solution.
- fastball 7y agoIs there anything which allows user choice (i.e. state) that doesn't involve JS?
- dgb23 7y agoYou can use checkbox inputs (the reason why HTML&CSS is turing complete)
- agret 7y agoYes, although doing things without JS is old school web. I think you'd be hard pressed to find any clients that don't support JS in this era. Anyway, to accomplish this you would split your styles into seperate CSS files and then have a drop-down that does an HTTP POST/GET to a server side script that will then set a cookie on your browser with your preferred choice. Each time a request comes in from the client you just check that cookie for which style they want and then change the HTML that's sent to include a different stylesheet.
- nine_k 7y agoThere's a number of end users who would like to avoid JS on non-app sites.
- Zenbit_UX 7y agoYes, you can use an html checkbox and monitor its state with pure css.
- RobertKerans 7y agoCheckbox + CSS custom properties for the colours/font weights etc . Checkbox checked, adjust the variable values. There's normally a little more to it than that, but there shouldn't ever be _much_ more, custom properties are fully dynamic
- toastal 7y agoThere's also alternative style sheets (https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative...), that can support the media queries on the tags, but I think Firefox is the only browser still exposing the ability to switch the styles, and it sadly don't persist between sessions or even a page navigation/refresh.
- WiseWeasel 7y agoTo me it seems like now that all browsers support the prefers-color-scheme media query, it’s no longer a best practice to allow/force users to toggle between light and dark theme separately from the OS. Centralization of config is a good thing, freeing people from rote work.
- JDiculous 7y agoI strongly disagree. Users should be able to control their preferences by application, and not be locked into an OS setting. My suggestion of still using classes doesn't eliminate centralization of config, it just means moving the dark mode CSS outside of the media query and into a class, and adding a couple lines of Javascript.
- WiseWeasel 7y agoWhat I’m hearing is, “My precious snowflake app is so important, users must manage its appearance independently of the OS.” Once you allow the possibility of a different app setting, you effectively require them to continue managing it separately. You can’t respect both OS- and app-level settings, so you're going to ignore the OS. If your app really just has light and dark theme choices, you should get rid of the toggle and move all your dark class styles into the prefers-color-scheme:dark media query instead.
- JDiculous 7y agoUh, no. What you're saying is "My user should not be allowed to customize the appearance of their application." You want the user to have less freedom? Great, good luck with your app development, but I sure hope you're not in charge of developing anything I use. Also if you read my original comment you would've seen that I am still reading the OS setting. The difference is that rather than locking the user into their OS's setting, I default to the OS's setting and give the user the freedom to change it as they see fit.
- WiseWeasel 7y ago
- underwater 7y agoWe have a design system that supports both black text on white and white text on black (as a contrasting block of content). If we want to support dark mode now we have to support four different options. Writing that with a combination of classes and media queries is going to be a nightmare: .default-theme h2 { background: white; color: black } .inverted-theme h2 { background: black; color: white } @media (prefers-color-scheme: dark) { .default-theme h2 { background: black; color: white } .inverted-theme h2 { background: white; color: black } } Your trick might make this a little more palatable.
- CGamesPlay 7y ago[deleted] Sorry, I missed the "without changing their Operating System preferences". I agree with another sibling comment here: that seems like bad practice.
- JDiculous 7y agoEDIT: Just wrote a quick article elaborating/demoing what I'm talking about: https://www.jbernier.com/dark-mode/ https://www.jbernier.com/dark-mode/ Also I made a small mistake in the code there, it's `isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches`