I recently added dark-mode support to a few sites. It took way more time then I thought it would. At first I thought "oh just add a few lines off CSS" but then ...<p>* Some diagrams had white backgrounds<p>Solution: remove the backgrounds so they are transparent<p>* Most diagrams had black lines/arrows which didn't look good on dark gray backgrounds<p>Solution: use CSS filter:invert for images<p>* Some images are photos not diagrams so inverting their colors doesn't work<p>Solution: Use a selector for svg only img[src$=.svg] and a class when manually needed<p>* Some svg diagrams have their colors referred to like "see the red object" in that text.<p>Solution: filter: invert(1) hue-rotate(180deg);<p>That makes the blacks become white but the colors kind of stay the same hues at least<p>* The are many interactive digrams on the sites.<p>Solution: All of those had to be refactored to not use hard coded colors but do something like<p><pre><code> const darkMatcher = window.matchMedia("(prefers-color-scheme: dark)");
const isDarkMode = darkMatcher.matches;
const colors = isDarkMode ? darkColors : lightColors;
</code></pre>
And draw everything with the appropriate colors. Its up to you if you want to trigger re-drawing if the user changes their preference<p>* Some text was color coded for to match the diagrams as in<p><pre><code> <span style="color: red;">x-axis"</span>
</code></pre>
But now those colors looked bad on a dark background.<p>Even 5 months later I still find places I missed.
I love dark mode as a user, but as a developer it terrifies me how much complexity is involved in programming in 2019. At a stroke, it <i>doubles</i> the number of possible combinations of:<p>- 2 device sizes: desktop vs mobile (e.g. responsive)<p>- 3 platforms: web vs iOS vs Android, or web vs Windows vs macOS vs Linux (not even counting cross-browser or OS version quirks), or god forbid all of the above<p>- 2 input methods: hover/click/drag vs tap/hold/swipe<p>- 2 modes for accessibility: full visual+audio vs screenreader/captioned<p>- And now 2 visual modes: light vs dark<p>That's <i>48</i> combinations to design and test for. I'm probably forgetting some too. But as a developer it makes just the <i>baseline cost</i> of any basic app <i>so damned high</i>.<p>Again, as a user I love it. But the entrance cost for entrepreneurs, or even hobbyists? Man oh man.
The problem is that this doesn't let the user toggle dark mode on/off.<p>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.<p><pre><code> const darkMode = window.matchMedia('(prefers-color-scheme: dark)')
if (darkMode) {
document.body.classList.add('theme-dark')
}
</code></pre>
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.<p>It's a shame, I would've preferred a pure HTML/CSS solution.
> Photographs also looked harsh. It turns out that many people prefer images, too, to be desaturated in dark mode<p>This is an interesting choice. While it might be easier on the eyes, personally it feels kind of icky to change colors on images…
I’m probably not representative of the general dark mode user, I think, but I enable dark mode because I want the UI chrome out of the way to concentrate on the content. I don’t want dark content. Is there a way to disable this media query?
I did this recently for my new personal website! It's quite easy and really satisfying. I love doing as much as possible in stateless CSS instead of JavaScript.<p><a href="http://www.brandonsmith.ninja/" rel="nofollow">http://www.brandonsmith.ninja/</a>
The two best Dark Mode extensions just implemented automatic Dark Mode support (so the web goes dark automatically when Dark Mode is enabled) :D<p><a href="https://github.com/darkreader/darkreader" rel="nofollow">https://github.com/darkreader/darkreader</a><p><a href="https://github.com/openstyles/stylus" rel="nofollow">https://github.com/openstyles/stylus</a> (not built into release yet)
I did this for the KDE wikis {userbase,techbase,community}.kde.org, this was a lot harder than I first thought, because of the amount of user contributed content with white background, hardcoded color in the text.<p>I wrote about it here: <a href="https://carlschwan.eu/2019/07/12/new-userbase.html" rel="nofollow">https://carlschwan.eu/2019/07/12/new-userbase.html</a>
I baked dark mode into my css microframework [0], and it's always so satisfying to see people using it !<p>I didn't do the "dimmer images" thing, but I'll try it sometimes.<p>[0] <a href="https://concrete.style" rel="nofollow">https://concrete.style</a>
I apologize for my ignorance, but could somebody explain the need for dark mode? I know that it's bad to have a phone glow in your face when your eyes are adjusted to the dark, but don't most phones automatically lower the brightness? That seems to work well enough for me. Perhaps a specific dark mode could do it better, if well designed, but most sites have a hard enough time doing one good color scheme.<p>I know some people would prefer a light-on-dark color scheme in general, even during the day. Is this entirely about what you see in the dark, or is there a component of wanting more "skins" in general?
Here is another article that goes much deeper into how to actually use CSS to implement the dark mode. While it does not rely on the media query (the article is almost 17 months old after all), it shows many other CSS features you could use.<p><a href="https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a" rel="nofollow">https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955...</a>
If you want to make sure your website is pleasant for dark-browsers, check if it doesn't break with extensions such as <a href="https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text/" rel="nofollow">https://addons.mozilla.org/en-US/firefox/addon/dark-backgrou...</a>
The problem with all these dark modes is that I end up with 50 shades of grey and things are harder to distinguish because there's no consistency on where to apply the various shades.<p>It's a testament to how primitive the web is as a platform that it can't do something like apply a universal theme like Windows 3 did.
Sounds like good news, and similar to how Emacs handles it; do newer versions of web browsers also change the base/default colours when dark mode is used, by the way?<p>Still not a complete replacement of global colour overriding (white flashes, or simply switching between dark and light themes often, can be quite unpleasant in a dark environment, and of course all the websites won't ever employ it, and some will use it wrong), but at least from the webmaster side it should simplify the colour theme decisions quite a bit (which were/are hard if you care about that sort of thing: I hoped that major web browsers will do something like that with alternate stylesheets someday, but as a media feature it would work too).
I recently added dark mode support with a new website for myself, using (prefers-color-scheme: dark) by default, but also allowing the user to switch between light and dark mode if they have JavaScript enabled. It also supports switching image sources in dark mode, so that I can use a dark mode screenshot in dark mode, and light in light. (I haven't yet published the draft article I have using this feature.)<p>I wrote about it at <a href="https://chrismorgan.info/blog/dark-theme-implementation/" rel="nofollow">https://chrismorgan.info/blog/dark-theme-implementation/</a>.
So that's why sites have been annoyingly turning dark lately. In Firefox apparently this can be disabled by creating a new integer preference in about:config called "ui.systemUsesDarkTheme" and setting it to 0.
I have chrome updates restricted by my organization and can't use this feature. Instead I'll occasionally use this bookmarklet to invert colors on very bright pages:<p>javascript:(function() { var tag = document.createElement('style'); tag.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(tag); tag[ (typeof document.body.style.WebkitAppearance=='string') ? 'innerText' : 'innerHTML'] = '* { background-color: white !important; color: #444 !important; } html { filter: invert(100%) grayscale(100%); }'; })();
> It's recommended to avoid pure white for text, and I chose likewise to avoid pure black for the background.<p>This is such nonsense. Pure black is never pure black on a monitor and neither is white. And the link he provides just restates the assertion with no additional reasoning.<p>See, I get it. If you create work as an artistic statement, you deliberately pick not-quite-blacks/whites because the defaults are not your artistic choices if you just default to them.<p>However, once you take this as a given rule and you pick some not-quite-white because "it is recommended", that defeats the entire purpose.
It's not widely available yet, <a href="https://caniuse.com/#search=prefers-color-scheme" rel="nofollow">https://caniuse.com/#search=prefers-color-scheme</a>
Slightly off topic,<p>I find it kind of ironic that there's so much debate surrounding the intricacies of dark mode support on a forum with no dark mode support (even though it avoids 90% of the gotchas).
Shameless plug: I did the same thing to my personal website and wrote about it with light/dark screenshots: <a href="https://www.reillywood.com/blog/dark-mode/" rel="nofollow">https://www.reillywood.com/blog/dark-mode/</a><p>I like working in Solarized Dark, so I wanted my website to serve up Solarized Dark. I dim images in dark mode too, but I turn them up to full brightness on hover.
One of my (maybe unwarranted) concern with automatic dark mode, is the potential ability of the browser and apps to determine my (very) coarse location based on when the dark mode is enabled or not, as it because another potentially identifying info among others.<p>Does that kind of CSS allows a script to determine if the browser is displaying dark mode or not, or send back that information to ads servers?
Naïvely I tried to do this by overriding a few custom properties and using filters. My site has a position: sticky nav, and filters introduce a stacking context, so things which filters apply to naturally go on top of the nav when before they went behind. A minor annoyance, but it demonstrates how introducing a dark mode isn’t as straight forward as I thought it would be.
Not working on Firefox for iOS. Can anyone else confirm this to be the case? Looks as though Firefox for iOS does support ‘prefers-color-scheme’ media query.
Wikipedia needs this.<p>yes yes there's browser plugins, but I'd rather not have some rando plugin potentially reading every site I visit to load a dark mode plugin on the ones it recognizes.