It's not widely available yet, https://caniuse.com/#search=prefers-color-scheme
Dark mode in a website with CSS
51–60 of 191 posts
Re: Dark mode in a website with CSS
#52I 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 doubles the number of possible combinations of: - 2 device sizes: desktop vs mobile (e.g. responsive) - 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 - 2 input methods: hov…
Conversely, that's what's amazing about the Web, right?
Whenever people introduce any of those things, like when iOS was introduced, they had to decide how to port all the existing content and interactions and widgets to mobile and touch interfaces. As a result, if an entrepreneur or hobbyist makes an app on one platform and wants it to be at least minimally usable on another platform, the Web way, way lowers the barrier to make that jump.
Re: Dark mode in a website with CSS
#53Not 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.
I'm quite surprised, as Firefox on iOS should be using WebKit…has Firefox linked against the iOS 13 SDK yet?
Re: Dark mode in a website with CSS
#54I 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:
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%); }'; })();
Re: Dark mode in a website with CSS
#55I’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?
Ditto. Duckduckgo seems to have added support, but has a preference to keep it light. I enabled light (despite system dark for reason above) but it means any new tab search flashes dark for a fraction of a second, before it reads the lightness preference cookie or whatever.
Re: Dark mode in a website with CSS
#56I 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 ... * Some diagrams had white backgrounds Solution: remove the backgrounds so they are transparent * Most diagrams had black lines/arrows which didn't look good on dark gray backgrounds Solution: use CSS filter:invert for images * Some images are photos not di…
Why mess with content colors? Just leave the images.
The problem is very simple: if you have diagrams with black lines on transparent background it doesn't work with dark background. Many colour choices we do make less sense for dark backgrounds than for light ones. The comment above properly describes the breadth of real problems you might face.
Re: Dark mode in a website with CSS
#57Now if only Hacker News would implement it!
My wife would be very grateful as I read Hacker News in bed every night and it lights the whole room up with all its white pixels.
Re: Dark mode in a website with CSS
#58Re: Dark mode in a website with CSS
#59Re: Dark mode in a website with CSS
#60Sounds 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?
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).