17 ms·
Using Dark Mode in CSS with MacOS Mojave
- alwillis 8y agoProposed standard: https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefe...
- mateuszf 8y agoThat's pretty awesome.
- mrweasel 8y agoYeah, 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.
- saagarjha 8y agoThis is a very interesting step, considering that Apple's interface guidelines prefer that application "content" remain regularly styled (e.g. as Pages does). This seems to show that Safari's web view has been changed from being merely content to being part of the user interface, as it would in say web applications. Presumably document creation websites e.g. Google Docs would be encouraged to maintain a light-themed document while darkening the interface. Another interesting point is this might lead to yet more fingerprinting surface area. But overall, I think I'll take that over blinding myself at night.
- cprecioso 8y agoHowever, Mail does have a dark stylesheet for the viewer when Dark Mode is enabled. I guess this can be done when there's a concept of a base stylesheet which people can the overwrite if needed. Word processors don't have this concept, and what you see is (supposed to be) always exactly what you get. So Pages doesn't display dark documents because the output then should be a dark document.
- gardaani 8y agoApple is proposing a new CSS color-filter property [1], which would do the same thing as Mail does for its content. Actually, Apple is already using color-filter internally in the Mail app. Safari allows setting user style sheets in its Preferences: Advanced > Style sheet, so one could perhaps add a user style sheet with color-filter. [1] https://github.com/w3c/csswg-drafts/issues/2875 https://github.com/w3c/csswg-drafts/issues/2875
- stephenr 8y agoThere are several safari extensions available already which bring dark-mode to websites. Based on the results I beleive at least some of the one I’m using must be using a filter (rather than using say manually mapped colours in a hash).
- stephenr 8y agoI think it's acknowledging that part of the safari window can be 'chrome'. I think navigation bars (either for regular sites or functional web apps) are good candidates for honouring this setting.
- davidwparker 8y agoI was reading in iBooks the other day and it changed the content to be in dark mode as well. I didn't find it jarring, but it is simply text so I was okay with it. If I was on a website/app though, I think I'd prefer an option provided by the site/app rather than having the OS dictate what happens.
- red-tea 8y agoFirefox 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?
- saagarjha 8y agoThis API, presumably, once websites adopt it and actually add CSS to support darker themes.
- red-tea 8y agoNo. 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.
- leppr 8y agoDunno why you're being downvoted. This indeed is a very widespread problem. Even some Google services (like Google Docs) have it.
- mixmastamyk 8y agoIt generally happens when the site specifies the forgeround or background color but not both, leading to very low contrast.
- dao- 8y ago> Is there actually a way to fix this? In the color preferences, set "Override the colors specified by the page with your selections above" to "Always". By default Firefox does this automatically when the OS is in high contrast mode.
- kristofferR 8y agoDark Reader for Safari makes the web dark automatically when Dark Mode is enabled: https://darkreader.org/safari/ https://darkreader.org/safari/ Unfortunately it doesn't work in Chrome or Firefox yet, as they haven't implemented proper APIs.
- stephenr 8y agoI tried another one of these ("Dark Mode for Safari") (https://itunes.apple.com/th/app/dark-mode-for-safari/id1397180934?mt=12 https://itunes.apple.com/th/app/dark-mode-for-safari/id13971...) and was not overly impressed with the results. I guess maybe I need to be more selective about which sites it's used on. Edit: Ok, I've just noticed that a) the app I have now (or maybe always?) has a couple of different levels "softer dark mode" is much nicer - it's not pure black for backgrounds. b) using it more selectively (i.e. not just on/off for all sites) seems to work much better than just turning it on open-slather.
- deleted 8y ago[deleted]
- deleted 8y ago[deleted]
- mixmastamyk 8y agoIt does, go up one directory to the root on that URL. Just installed it for Chrome, am using "Dark backgrounds..." on Firefox.
- skunkworker 8y agoHe was referring to the automatically changing over option, eg: when Mojave goes Dark tell Dark Reader to also go dark.
- modernerd 8y agoThis 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 for long form articles depending on the ambient lighting. https://ux.stackexchange.com/q/53264/ https://ux.stackexchange.com/q/53264/
- jackpeterfletch 8y agoWould imagine they'll add the option in browsers to override the operating systems setting.
- stephenr 8y agoThird-party ones (Mozilla, Google) may but I'll be surprised if Apple and Microsoft don't just tie it to their respective OS' 'dark mode' setting.
- akuji1993 8y agoAlso while it's very cool that they support this in Safari, I highly doubt someone will do CSS adjustments JUST for Safari users like this. Either your page already has a dark theme or you won't really bother about this.
- stephenr 8y agoAs someone else pointed out (https://news.ycombinator.com/item?id=18298848 https://news.ycombinator.com/item?id=18298848) this is in a draft for CSS Media Queries level 5
- akuji1993 8y agoHm, okay. Then it might make sense to support this, if your user base heavily relies on MacOS. Thanks for the link.
- frobware 8y agoAs a partially sighted user this is fantastic news.
- gardaani 8y agoThe 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 https://drafts.csswg.org/mediaqueries-5/#prefers-contrast [2] https://msdn.microsoft.com/library/Hh771830 https://msdn.microsoft.com/library/Hh771830
- frobware 8y agoThanks for the links.
- robin_reala 8y agoThat 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-and-me-marian-foley/ 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.
- robin_reala 8y agoI’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.
- EugeneOZ 8y agoCmd+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.
- mixmastamyk 8y agoIs that for Safari? How long has it existed?
- EugeneOZ 8y agoIt's system-wide. Sorry, wrong shortcut, Alt+Cmd+F5.
- Tallain 8y agoBy default the keyboard shortcut is disabled in Mojave, and when turned on is actually Control+Option+Command+8.
- miles 8y agoReenable the Control-Option-Command-8 keyboard shortcut to invert colors via: System Preferences > Keyboard > Shortcuts > Accessibility > check "Invert colors".
- favorited 8y agoThe system dark mode is very different from invert colors.
- Polarity 8y agoi use this. best "turn everything into dark mode" ff plugin ever. supports per website settings. https://github.com/darkreader/darkreader https://github.com/darkreader/darkreader
- marcoperaza 8y agoI use the same plugin with Chrome and can also attest to it being absolutely incredible.
- Rjevski 8y agoI would be concerned about adding yet another data point that can be used for tracking.
- bluedino 8y agoI could see sites moving to themes that supported both light and dark - a good example of this is Arstechnica
- sahoo 8y agoOnly if Hacker news had dark mode
- k__ 8y agoReminds me of the use of operating system colors in CSS back in the days. I tried to make websites look like native apps with these, haha.
- konradzikusek 8y agoThose are still around, and are being used for fingerprinting devices.
- shurcooL 8y agoWoohoo, I’ve been waiting for this. Will it be possible to figure out the appearance preference with JacaScript as well?
- konradzikusek 8y agoEvery media query can be checked using JS - `matchMedia('(prefers-color-scheme: dark)').matches` => true/false
- shurcooL 8y agoExcellent, thanks. I see this is mentioned in the original article too; I must've missed it.
- jhabdas 8y agoHey Paul long time no see. Thanks for the article!
- PhasmaFelis 8y agoI recently heard about the Dark Reader extension for Chrome, which lets you toggle dark settings per website in a fairly intelligent way. https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh https://chrome.google.com/webstore/detail/dark-reader/eimadp... I'm really liking it, and I'd be interested to hear about something similar for Firefox.
- aquova 8y agoDark Reader is available for Firefox as well: https://addons.mozilla.org/en-US/firefox/addon/darkreader/ https://addons.mozilla.org/en-US/firefox/addon/darkreader/
- jmbylsma 8y agoDark Background and Light Text: https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text/ https://addons.mozilla.org/en-US/firefox/addon/dark-backgrou... I'm not familiar with Dark Reader, but I'm guessing it's along the same lines. I've used it with Firefox Mobile for a couple months and have been happy with it.
- heavymark 8y agoThis is great news. And as the author mentioned suitable for “web apps” rather than something devs should add to general websites but certainly special use cases where it could make sense there too.
- e1ven 8y agoI really like this feature, and I hope the other browsers support it quickly. I've been using https://addons.mozilla.org/en-US/firefox/addon/dark-night-mode/ https://addons.mozilla.org/en-US/firefox/addon/dark-night-mo... to convert webpages to darkmode. It doesn't strictly invert, it tries to guess the color changes necessary to make the site work in darker colors. Example of how HN looks: https://i.imgur.com/E5licCH.jpg https://i.imgur.com/E5licCH.jpg
- sneak 8y agoI, for one, am tired of web pages being able to know things about the environment in which I view them outside of their sandbox. Orientation, battery, point:pixel ratio, user-agent, referer- now UI display preferences. I should be able to turn all of these off and make my browser indistinguishable from any other save for IP address if I so choose. This stuff just keeps rolling down the fingerprinting hill. Pretty soon they won’t need cookies at all.
- xvector 8y agoCanvas fingerprinting along with most of these issues were solved with Safari 12 on both Mac OS and iOS. If you don't want to be fingerprinted, consider switching to it. Obviously there are some things that aren't yet anonymized in Safari 12, but it's good enough.
- sneak 8y agoSafari’s code exec history (compared to Chrome) is enough to keep me from switching back, even if it is better at privacy in the not-execing-malicious-code typical use case. Of course, on iOS, I don’t have a choice.
- boltzmannbrain 8y agoChrome extension: https://chrome.google.com/webstore/detail/macos-mojave-dark-mode/emoadoophllahfgbjaidlhjgnnmmdigh?hl=en https://chrome.google.com/webstore/detail/macos-mojave-dark-...
- mixmastamyk 8y agoThis is a welcome development. FYI: Been using these extensions (or similar) for years to combat the white background fascists that took over the web and removed control of the GUI theme (in all 3 OSs!) in the last decade: - https://addons.mozilla.org/firefox/addon/dark-background-light-text/ https://addons.mozilla.org/firefox/addon/dark-background-lig... - https://darkreader.org/ https://darkreader.org/ In a darkened studio environment, one of these is a must.
- plehoux 8y agoIf you are interested in how to make your Electron app dark mode compatible (with CSS), here is how we did it: https://medium.com/missive-app/make-your-electron-app-dark-mode-compatible-c23dcfdd0dfa https://medium.com/missive-app/make-your-electron-app-dark-m...
- rhacker 8y agoAs usual Apple has set off a major change in the way we do business. Newspapers, Apps, Slack, everything is going to start supporting dark mode. I think the original way we tackled "custom color schemes" of the OS was too much - we allowed people to set individual colors for everything. Once again apple has simplified that to just light mode and dark mode. And that's how the rest of the industry will finally tackle custom color schemes (no choice but light or dark) and the OS will now dictate that setting automatically much like en-US, es-MX etc..
- matchbok 8y agoSad to realize that if Slack had a real, native app, most of the conversion would be a simple toggle.
- plehoux 8y agoAs shown here, Electron app can support this easily: https://medium.com/missive-app/make-your-electron-app-dark-mode-compatible-c23dcfdd0dfa https://medium.com/missive-app/make-your-electron-app-dark-m...
- untog 8y agoNot really. Slack would have to have a real, native app that used exclusively stock OS controls. I very much doubt they'd do that, so there would still be a lot of work required to implement dark mode.
- 8y ago
- Brajeshwar 8y agoFor those, who like the Dark Theme on Mojave but not dark-dark everywhere. $ defaults write -g NSRequiresAquaSystemAppearance -bool Yes Logout and Choose “Dark Mode". Revert Back $ defaults write -g NSRequiresAquaSystemAppearance -bool No
- dewiz 8y agoDetecting the user preference for dark mode seems like one more variable to fingerprint and identify users, isn't it?
- alwillis 8y agoMojave + Safari 12 has fingerprinting protection: https://www.wired.com/story/apple-safari-privacy-wwdc/ https://www.wired.com/story/apple-safari-privacy-wwdc/
- crazygringo 8y agoI'm not sure I can take it anymore. Websites are just getting too complicated to design and build. First it was desktop with mouse -- easy. Then responsive design requiring both desktop and mobile layouts, as well as interaction design with both mouse and touch. Now what if users start expecting both light and dark versions of websites? "We show the mobile version of the menu with its own hover on small screens only, but the hover only appears if JavaScript detects a mouse, but wait we need a different hover color when it's in dark mode!" Not to mention other standard things like making sure it works in all major browsers, or even that interactive things like comments or voting have non-JavaScript fallbacks, or that the order of elements is appropriate for screenreaders. I love using dark mode at night, and as a user would love for every website to follow it too. But as a developer, there are just too many combinations to design and test for, and it's growing exponentially!
- lostgame 8y agoI think the largest issue with this is it is currently a Safari-only, and an early Safari-only release at that. And that the latest MacOS right now is the only major commercial OS offering a dark theme to the extent that it does. A quick look at Safari's desktop browser market share reveals it to be about 4% right now. When this kind of standard makes its way into Chrome and/or FF, it'll be relevant. Until then, it's a toy, and nothing more. Nobody could ever realistically expect this kind of thing. It doesn't increase the complexity of web design by that much. If you think adding CSS exceptions for inverted colours is the straw that broke the camel's back on web complexity for you, perhaps you just feel like we should've stuck with the late 90's or worse, early 00's web standards? Many websites, even YouTube, already have a 'night' or 'dark' switch. It makes a lot of sense, and genuinely is not that hard to implement.
- saagarjha 8y agoChrome and Firefox might end up implementing this to serve their users on macOS.
- nine_k 8y agoMultiple alternative CSS files were a thing in early 2000s. But browsers never developed support for them. Now some sites offer switchable "themes", tough.
- dawnerd 8y agoI love me a good dark mode but what I can’t stand is when designers get lazy and think dark mode = jet black with white text. Latest tweetbot is a great example.
- deanclatworthy 8y agoI think this is great. No-one is forcing you to implement this and if you do change a few colours here and there to benefit those users who use dark mode - it'd be hugely appreciated. And for those worried about adding weight to your page just explicitly use the media query and put the over-rides in a separate file: <link media="(prefers-color-scheme: dark)" src="..." rel="stylesheet" />
- TheAceOfHearts 8y agoFor those that are unaware: Firefox still supports alternative style sheets [0]. Unfortunately it's pretty well hidden, and I think it's unsupported by other browsers. One of the things I love about this feature is that it gives users the choice. It's a damn shame that CSS System Colors [1] was deprecated. There's also System font values [2], even if it's barely used. I really like my system styles and I wish more web services could use similar element sizes and colors. A few years back using the system font for UI elements started to gain a bit of popularity [3] [4]. WebKit even added improved support for using system fonts in web content [5], although I don't know what state that's in. I understand that exposing more system information can be used for fingerprinting, but why can't I be the one to decide what information I expose? You could expose standard color values by default and allow me to whitelist trusted websites to access real system styles. I've thought about this a bit, and I wish websites could have different "modes" which you could switch to. I think it would make it much easier to develop and design websites that target devices with drastically different requirements. You usually want a desktop mode which is designed for use with a keyboard and mouse, and a mobile mode which is designed for use with a touch interface. The closest thing we have is the "desktop mode" switch on mobile browsers, but I think that depends on user-agent sniffing which is incredibly hacky. I'm typically not a fan of mobile first designs, since it usually leads to a worse experience for desktop users. Using media queries with viewport size break points is usually not what you want. For example, sometimes I want to reference some API docs so I'll resize the window to be incredibly narrow and place it next to my editor. Tons of websites take this narrow screen size to mean that I'm on mobile and drastically blow up the size of the text and UI elements, causing me to lose my position in the document. This is incredibly frustrating. Things are improving, though. Now you can use CSS media feature tests to check if the user has a pointing device [6] and if they can hover over elements [7]. Although I still think designing a website that handles all variations well is nigh impossible. Even worse, these values cannot be changed by the user! For example, imagine an advanced image editing app meant for use with a mouse. If I'm on mobile the browser could let me interface with it by providing a virtual trackpad. It might not be a great experience, but if the operation I'm doing is really simple it might be enough. I think I'd prefer it if you could use a link tag to expose different versions of the same document, and allow the user to chose which version they prefer. Aside from providing a desktop and mobile version you could also link to an API or data view which is designed for easier consumption by computers. Another neat use for this could be to provide EPUB or PDF links for online books; you can keep reading the online version or download the full version for later. [0] https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative... [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#System_Colors https://developer.mozilla.org/en-US/docs/Web/CSS/color_value... [2] https://developer.mozilla.org/en-US/docs/Web/CSS/font#System_font_values https://developer.mozilla.org/en-US/docs/Web/CSS/font#System... [3] https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ https://www.smashingmagazine.com/2015/11/using-system-ui-fon... [4] https://css-tricks.com/snippets/css/system-font-stack/ https://css-tricks.com/snippets/css/system-font-stack/ [5] https://webkit.org/blog/3709/using-the-system-font-in-web-content/ https://webkit.org/blog/3709/using-the-system-font-in-web-co... [6] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin... [7] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hove...
- amai 8y agoOn a side note, reading text in dark mode is better for your eyes: http://www.eye-tuebingen.de/the-institute/news-events/news/news-article/60-why-might-reading-make-myopic/ http://www.eye-tuebingen.de/the-institute/news-events/news/n...