I’ll have to check Apple Books for this when it makes it into release WebKit. Currently we’re using :root[__ibooks_internal_theme*="Night"] to target the dark mode there (inverting black and white SVGs, etc.), but if we can use a more standardised media query that’d be a benefit.
Using Dark Mode in CSS with MacOS Mojave
21–30 of 128 posts
Re: Using Dark Mode in CSS with MacOS Mojave
#22Cmd+F5, "Invert colors" (smart invert)
This will turn everything into dark mode, except images and video. And you don't have to care if site has that line in CSS. Also, when you switch back - everything is in "light mode" again, including OS UI.
Re: Using Dark Mode in CSS with MacOS Mojave
#23Firefox has the option to set default colours based on your theme, so mine are set to dark colours. However, I find that many sites become unusable because they assumed the user defaults would be black text on white background. I use Stylus to override things which sometimes works but not always. Is there actually a way to fix this?
This API, presumably, once websites adopt it and actually add CSS to support darker themes.
No. This is a different thing. The problem is when people haven't coded their CSS correctly and assume default background is white and then set a non default foreground of black or something. Those sites will still break for dark themes even with this API.
In fact, if people actually understood the first C in CSS, this thing wouldn't even be necessary.
Re: Using Dark Mode in CSS with MacOS Mojave
#24As a partially sighted user this is fantastic news.
The prefers-contrast media query is even better for accessibility [1]. It allows checking if the OS is in high contrast mode and adjust the colors appropriately.
I think the idea is to replace the Microsoft's proprietary -ms-high-contrast media query [2]. It means that prefers-contrast will work in Mac and Windows. Unfortunately, Safari Technology Preview 68 doesn't seem to implement it.
[1] https://drafts.csswg.org/mediaqueries-5/#prefers-contrast
Re: Using Dark Mode in CSS with MacOS Mojave
#25Earlier quoted context omitted.
I'd assume this is intended for web pages/apps to allow their in-page controls/navigation to fade into the background, revealing the content. E.g. in a crud app with top/side nav, and then a form in the main section, the nav bars can be rendered as pale/dark to suit the user selection, while the main content area retains the focus.
Yes, I definitely see the appeal for web apps. Just personally don't want to read 2,000+ word articles of white text on a dark background just because I like the browser UI to be dark. Others might, though — hopefully browsers will offer a setting for dark mode independent of the OS-level setting.
That’s up to website developer to make a mess of it, or to desaturate the normal color scheme or whatever other pleasant option.
Re: Using Dark Mode in CSS with MacOS Mojave
#26As a partially sighted user this is fantastic news.
The prefers-contrast media query is even better for accessibility [1]. It allows checking if the OS is in high contrast mode and adjust the colors appropriately. I think the idea is to replace the Microsoft's proprietary -ms-high-contrast media query [2]. It means that prefers-contrast will work in Mac and Windows. Unfortunately, Safari Technology Preview 68 doesn't seem to implement it. [1] https://drafts.csswg.org/…
Thanks for the links.
Re: Using Dark Mode in CSS with MacOS Mojave
#27i use this. best "turn everything into dark mode" ff plugin ever. supports per website settings. https://github.com/darkreader/darkreader
Re: Using Dark Mode in CSS with MacOS Mojave
#28That's pretty awesome.
Yeah, I don't even care about dark mode, but that is very nicely done. I really like that they care enough to actually implement dark mode all the way from OS to the browser.
Re: Using Dark Mode in CSS with MacOS Mojave
#29This is a great blog post to build awareness of the prefers-color-scheme feature. But I don't think it's safe to assume that someone who sets a dark UI also wants web pages displayed like that. I set dark mode in macOS to have the UI fade into the background and reveal the content; I don't want or expect that websites will present white text on a dark background too. That's fine for coding but can be less readable fo…
As a counterpoint, I find a white app or webpage jarring in dark mode and much prefer light/white text on dark background. I’m happy that the rest of the os is catching up with how I’ve run my IDE for years.
Re: Using Dark Mode in CSS with MacOS Mojave
#30As a partially sighted user this is fantastic news.
The prefers-contrast media query is even better for accessibility [1]. It allows checking if the OS is in high contrast mode and adjust the colors appropriately. I think the idea is to replace the Microsoft's proprietary -ms-high-contrast media query [2]. It means that prefers-contrast will work in Mac and Windows. Unfortunately, Safari Technology Preview 68 doesn't seem to implement it. [1] https://drafts.csswg.org/…
That doesn’t always work though. Some people need to adjust their colours for lower contrast, for example: https://accessibility.blog.gov.uk/2016/05/26/accessibility-a... . Ideally sites would also work properly if the user changes the foreground and background colours to suit their needs.