15 ms·

Dark mode in a website with CSS

491 points by teaspoon 7y ago

greggman2 7y ago
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 ... * 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 diagrams so inverting their colors doesn't work Solution: Use a selector for svg only img[src$=.svg] and a class when manually needed * Some svg diagrams have their colors referred to like "see the red object" in that text. Solution: filter: invert(1) hue-rotate(180deg); That makes the blacks become white but the colors kind of stay the same hues at least * The are many interactive digrams on the sites. Solution: All of those had to be refactored to not use hard coded colors but do something like const darkMatcher = window.matchMedia("(prefers-color-scheme: dark)"); const isDarkMode = darkMatcher.matches; const colors = isDarkMode ? darkColors : lightColors; And draw everything with the appropriate colors. Its up to you if you want to trigger re-drawing if the user changes their preference * Some text was color coded for to match the diagrams as in <span style="color: red;">x-axis"</span> But now those colors looked bad on a dark background. Even 5 months later I still find places I missed.
- chadlavi 7y ago
  Why mess with content colors? Just leave the images.
  - jgtrosh 7y ago
    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.
    - baroffoos 7y ago
      The easy option is to just put a white background behind the diagrams. It might not be as pretty as having the image designed right for a black background but its better than that hack.
      - the8472 7y ago
        that can be like a lighthouse in a dark night. flux can help of course, but if you are serious about supporting dark mode then you should eliminate as much white space as managable.
        anfedorov 7y ago
        I think he means if you're serious about dark mode then design two graphs one light, one dark. Solving "how do I turn a well designed light mode image into a dark mode image" is an AI task that would be a nice research paper, not something a designer can hack together with a bunch of if-then rules.
      - seansta 7y ago
        +1
      - greggman2 7y ago
        I would have thought so to but looking at the white background digrams on the dark pages was a horrible experience. It pretty much defeated the entire purpose of having a dark mode as there was these bright white diagrams shining in my eyes. Which is better you can compare Here's before dark mode https://codepen.io/greggman/full/vYYOxjd https://codepen.io/greggman/full/vYYOxjd Here's leaving the backgrounds to the diagrams white https://codepen.io/greggman/full/zYYGZWB https://codepen.io/greggman/full/zYYGZWB And here's the hue rotated solution https://codepen.io/greggman/full/abbOJYB https://codepen.io/greggman/full/abbOJYB The ideal solution would be to make all the diagrams twice but that's a ton of work if your site has lots of diagrams. Of course it's all an opinion. I don't have time to redo all the diagrams or go make them CSS styled indivdually so this is the solution I chose for now.
  - DoreenMichele 7y ago
    If you have a lot of images with white backgrounds, that's going to defeat the purpose of Dark Mode. Some people prefer dark mode because they suffer migraines and bright lights are a problem when they have a migraine. Or homeless people may be using it for both stealth purposes and battery conservation when they have limited opportunities to recharge. For some people, this preference is not just some minor detail. It's a much more important thing than "I just happen to like dark color schemes."
    - dageshi 7y ago
      Do you not think maybe that people with migranes and homeless people conserving battery might be edge cases just a little bit too far to worry about? Because I do. And I'm someone who runs permanent dark mode via plugins in firefox due to eye strain/headaches. I don't expect the world to bend over backwards and I certainly don't expect people to recolour image backgrounds for me. The plugins do a good enough job.
      - DoreenMichele 7y ago
        In the U.S., more than 38 million people have migraine disease, with some estimates suggesting that this number may be even higher, impacting as many as 50 million or more. Some migraine studies estimate that 12 percent of adults in the U.S. population have migraine, and 4 million have chronic migraine. https://migraine.com/migraine-statistics/ https://migraine.com/migraine-statistics/
    - saagarjha 7y ago
      > Or homeless people may be using it for both stealth purposes and battery conservation when they have limited opportunities to recharge. Sorry, what? I feel like this is a very contrived reason to support dark mode in your interface, if it even helps…
      - DoreenMichele 7y ago
        Contrived: deliberately created rather than arising naturally or spontaneously. Synonym: deliberate created or arranged in a way that seems artificial and unrealistic. Synonym: forced ---- People can do anything they want with their websites. I'm not anyone who sets global policy on what your website should do. But there's nothing contrived about the comment. It's an unplanned, spontaneous thought based on first-hand experience. I spent nearly six years homeless. I'm quite open about that. I still blog about homelessness. I spent a lot of time online while homeless. This was written about me: http://alexandralindelof.com/story-package/ http://alexandralindelof.com/story-package/
- p7IDD243 7y ago
  >Solution: remove the backgrounds so they are transparent This sucks when you want then share the diagram with someone, on certain platforms the diagram will be unreadable due to the lack of contrasting background.
  - rangibaby 7y ago
    It’s easier to add a background later than remove one after, so I think transparent bg is a good solution
- laughinghan 7y ago
  You know the article addresses this exact problem? It links to another article focused on this problem, which suggests reducing the saturation of images: https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b https://medium.com/dev-channel/re-colorization-for-dark-mode... (It doesn't seem to have occurred to that author to try reducing the brightness of the images, or reducing saturation with the saturate() instead of grayscale(), but those also seem worth trying, brightness in particular.) Apple's Smart Invert is even simpler, it just leaves media like images and video as-is, only inverting colors of other things. I suppose for diagrams that you know are black-on-white, inversion is nice, but it should be opt-in.
- quickthrower2 7y ago
  Every time I think "oh just add a few lines off CSS" => 90% chance it'll take all day.
  - mr_toad 7y ago
    CSS needs an equivalent to an SQL query planner, so that mere humans can understand how it works.
    - Vinnl 7y ago
      The Firefox DevTools (currently in Nightly, soon in stable) have started at least telling you why a certain selector does not apply, which sounds incredibly helpful: https://twitter.com/FirefoxDevTools/status/1174701036793032704 https://twitter.com/FirefoxDevTools/status/11747010367930327...
- jacobolus 7y ago
  > Solution: use CSS filter:invert for images > Solution: filter: invert(1) hue-rotate(180deg); This might be nominally acceptable, but it’s going to be pretty mediocre. Both of these methods dramatically distort color relationships from the original. Getting someone to explicitly pick colors that work in dark mode will yield much better results. (Of course, takes a lot more manual work by an expert, instead of a few automatic text replacements.)
  - greggman2 7y ago
    A agree 100% but didn't want to have to manually remake 150+ diagrams
- __MatrixMan__ 7y ago
  Your comment makes me glad I don't do UI's. But then I'm reminded of a syntax highlighting scheme I wish existed: You'd never define a particular color, just algorithms for taking some input color and deriving each needed color from that one. Then the user can say: "I want this file in blue and this one in orange" and the syntax highlighting still calls out the features in a relative way but the absolute colors are used as cues for something else (like test coverage or something from source control). Ok, maybe doing UI's would be fun after all.
  - andy_ppp 7y ago
    The problem is our brains represent colour in a very weird way and the algorithms I’ve seen for this always look horrible. I guess maybe training a neural net on this might make the results more human!
    - tripzilch 7y ago
      No, what really helps is picking the right colour space to work in. Which is probably CIE-LAB, being constructed especially for the weird way our brains perceive colour, but still also works mostly correct if you treat it as a linear space.
uallo 7y ago
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. https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955...
louismerlin 7y ago
I baked dark mode into my css microframework [0], and it's always so satisfying to see people using it ! I didn't do the "dimmer images" thing, but I'll try it sometimes. [0] https://concrete.style https://concrete.style
- pspeter3 7y ago
  That's a great micro framework
skykooler 7y ago
How does one enable this setting in Firefox?
- _bxg1 7y ago
  It's OS-level. macOS, iOS, Android, and I believe Windows 10 will all send this signal now to whichever (modern) browser you're using.
  - lol768 7y ago
    As will Linux/Gnome.
    - skykooler 7y ago
      Any idea how to set this on Ubuntu? I have what I assume is the dark theme - title bars are white text on dark grey background - but this website displays a light theme in Firefox.
      - lol768 7y ago
        It depends on your Gtk theme, I think. If it's marked as dark, then Firefox will pick that up and apply the CSS accordingly. I use Yaru-dark. You can also force Firefox, via an about:config setting to act as if you were using dark mode.
- jordanwallwork 7y ago
  I think it's an OS setting rather than a browser setting. On Windows 10 I just searched 'Dark Mode' and toggled 'Default app mode light / dark'
- snthd 7y ago
  browser.in-content.dark-mode
- chadlavi 7y ago
  Seems it happens automatically if you use the default theme
brundolf 7y ago
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. http://www.brandonsmith.ninja/ http://www.brandonsmith.ninja/
- uncheckederror 7y ago
  I've been using it for a few months on my personal site as well. It defaults to the light version and then switches to the dark them on request. This is so people who don't care or aren't good with computers get the light version and those that can set the system theme have the option of getting the dark version. https://thomasryan.xyz/ https://thomasryan.xyz/
  - saagarjha 7y ago
    FWIW, your Posts/Demo/Resume links are laid out a bit oddly on my iPad.
    - uncheckederror 7y ago
      Thanks for pointing this out! I borrowed a coworker's iPad at lunch and fixed this bug. As best as I can tell Safari wasn't respecting the text-align: right; CSS rule. I've switched to a flexbox layout for those elements.
  - _bxg1 7y ago
    > people who don't care or aren't good with computers get the light version Or more importantly, people whose browsers/OSes don't set that CSS flag
- 333c 7y ago
  I also did this on my personal website. I was surprised how easy it was, and happy that it was built into CSS, requiring no JS (as you said).
- wlesieutre 7y ago
  Mine too! Finally put up a personal site last month after not touching any web projects for a long while. I've checked out of a lot of social media and wanted my own place to put stuff and to poke around with javascript and web graphics. One of the upcoming posts is going to cover handling dark mode for <canvas> content. So far I've just used transparent backgrounds with no black or white drawing so that it's visible either way. https://will.institute/ https://will.institute/ Not much on it yet, just been slowly working through the setup for doing a canvas with a responsive site. Neat tidbit - the logo image is a single SVG in shades of dark gray, which doesn't work well on a dark background. You can apply image transformations in CSS under the dark mode media query to adapt things like this: img#wi-logo { filter: invert(100%) brightness(110%); } This is the same tool that the linked post uses for desaturating images, but adding that invert is a useful tool for dark mode. Personally I wouldn't recommend general image desaturation, photos taking more focus against a dark background is a good look if you ask me. At least consider making it an opt-in setting instead of the default.
Y-bar 7y ago
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?
- zamadatix 7y ago
  In Firefox you can add "ui.systemUsesDarkTheme" as an integer in about:config and set it to "0" for forced light or "1" for forced dark. This setting changes what is reported by the media query, you can still set your OS and/or browser theme independently. You will need to restart Firefox to apply the setting.
- degenerate 7y ago
  If you just want chrome to be dark, you can install a dark theme such as: https://chrome.google.com/webstore/detail/just-black/aghfnjkcakhmadgdomlmlhhaocbkloab https://chrome.google.com/webstore/detail/just-black/aghfnjk...
  - Y-bar 7y ago
    I think you misread > UI chrome Versus > Chrome UI
    - rrix2 7y ago
      "UI chrome" refers to the browser UI itself -- everything that is not the web content. what are you referring to?
    - agret 7y ago
      In the case of the Chrome web browser the Chrome UI is the UI Chrome though? What other UI elements are there not included in the dark theme?
- OJFord 7y ago
  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.
saagarjha 7y ago
> Photographs also looked harsh. It turns out that many people prefer images, too, to be desaturated in dark mode This is an interesting choice. While it might be easier on the eyes, personally it feels kind of icky to change colors on images…
- defanor 7y ago
  Some global CSS themes change them, but then restore original ones on hover. Not perfect, but generally fine. Though regular photos (and videos) are rarely so bright that it hurts the eyes while in a dark environment, unlike diagrams and other kinds of drawings, which can easily be mostly white.
- ubercow13 7y ago
  Yeah that seems bad. If you choose low contrast fonts, reduce the contrast of photographs to the background by making them darker, etc, it's just like turning down the brightness and contrast of your whole site. If the user thinks the content of your site is still too bright with dark mode on, maybe they should turn down the brightness of their device? By making everything on your site dark and low-contrast, the implication is that the user wants to see other things on the screen in higher contrast alongside your site, like the UI chrome. That seems unlikely - your site is the most important content that they have on the screen at that time and it should probably have the highest brightness or contrast of anything on the screen, not the lowest.
- reportgunner 7y ago
  I prefer to hide all the images altogether.
lostmsu 7y ago
Does not seem to work in Firefox for Android.
- _bxg1 7y ago
  Do you have Android's dark mode enabled, and is your Firefox up to date? It's a pretty new CSS feature
  - 354896547981565 7y ago
    Doesn't work for me either. Android 10, Firefox 68.1.1 and Chrome 77.0, dark mode activated.
    - _bxg1 7y ago
      Weird. It's supposed to work on Android Firefox 68; Chrome 77 is unclear: https://caniuse.com/#search=prefers-color-scheme https://caniuse.com/#search=prefers-color-scheme
- petepete 7y ago
  Works for me in Firefox Preview, there's an option in Settings > Theme.
- dddddaviddddd 7y ago
  Looking forward to this being implemented. Since my phone is my only OLED display, it's also the only screen where dark mode really makes a big difference in total light emitted.
cbsks 7y ago
Now if only Hacker News would implement it!
- skunkworker 7y ago
  I currently use 'DARK READER' for hacker news and it works quite well using the 'Filter+' theme engine.
  - _bxg1 7y ago
    The problem with browser extensions is that they're a massive security risk.
    - skunkworker 7y ago
      On some sites I've used it to get a good baseline then export the CSS and modify it from there.
      - _bxg1 7y ago
        How do you get your browser to even load custom CSS without an extension?
        skunkworker 7y ago
        Without an extension, I don’t know an easy way. You could just build your own extensions from scratch and load it there. I used it to style my own sites for dark mode.
        saagarjha 7y ago
        In my browser, Preferences > Advanced > Style sheet.
  - ehsankia 7y ago
    I use the following: https://userstyles.org/styles/113994/hacker-news-dark https://userstyles.org/styles/113994/hacker-news-dark Works great.
ripley12 7y ago
Shameless plug: I did the same thing to my personal website and wrote about it with light/dark screenshots: https://www.reillywood.com/blog/dark-mode/ https://www.reillywood.com/blog/dark-mode/ 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.
- saagarjha 7y ago
  I only use Solarized for code snippets on my website, but the benefit of using it as a color scheme is that switching between the two is a one line addition: only the background needs to respond to prefers-color-scheme.
  - ripley12 7y ago
    Yeah, that would be nice for UIs that can use Solarized Light. I experimented with it as a full UI, but it just didn't look quite right to me – I ended up only using it for light mode code snippets.
crazygringo 7y ago
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 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: hover/click/drag vs tap/hold/swipe - 2 modes for accessibility: full visual+audio vs screenreader/captioned - And now 2 visual modes: light vs dark That's 48 combinations to design and test for. I'm probably forgetting some too. But as a developer it makes just the baseline cost of any basic app so damned high. Again, as a user I love it. But the entrance cost for entrepreneurs, or even hobbyists? Man oh man.
- nattaylor 7y ago
  As developers, can't we use progressive enhancement to support as many scenarios as we want?
- laughinghan 7y ago
  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.
  - ken 7y ago
    The particular methods for making CSS backwards compatible are specific to the web, but the general problems faced by having user display preferences are not. Adding these features to native apps blows up your testing matrix there, too. In many ways, it's even worse. I've got OS settings here for "increase contrast", "reduce transparency", "use grayscale", "invert colors", and (because areas of native windows can be translucent) even the desktop wallpaper comes into play. I turned on dark-mode for testing my own app, and I had to turn it off because there's parts of Xcode where the contrast ratio is less than 1.1:1.0. The text is downright invisible. Obviously nobody at Apple would ever intentionally make software like that. They must have simply never thought to test with the same settings as I have. https://pbs.twimg.com/media/D1kfN6SUcAEwWxq?format=png&name=small https://pbs.twimg.com/media/D1kfN6SUcAEwWxq?format=png&name=...
kristofferR 7y ago
The two best Dark Mode extensions just implemented automatic Dark Mode support (so the web goes dark automatically when Dark Mode is enabled) :D https://github.com/darkreader/darkreader https://github.com/darkreader/darkreader https://github.com/openstyles/stylus https://github.com/openstyles/stylus (not built into release yet)
- least 7y ago
  I like DarkReader, but it's been a huge exercise in patience seeing Firefox and Chrome getting all the updates, while the paid Safari version languishes. By the extension author's own admission [1], the majority of the revenue comes from the Safari extension, but he still prioritizes the (I imagine) larger user base of the firfox and chrome extensions. It's frustrating, to say the least. [1] https://github.com/darkreader/darkreader/issues/1205#issuecomment-477282237 https://github.com/darkreader/darkreader/issues/1205#issueco...
alib 7y ago
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.
- saagarjha 7y ago
  I'm quite surprised, as Firefox on iOS should be using WebKit…has Firefox linked against the iOS 13 SDK yet?
- jacurtis 7y ago
  I can confirm that dark mode does not work on iOS Firefox. I tested it a month ago and figured an update was coming soon. But I just tested it again on iOS 13.1 with everything up to date and still no luck. Safari works as my control.
arjunkomath 7y ago
It's not widely available yet, https://caniuse.com/#search=prefers-color-scheme https://caniuse.com/#search=prefers-color-scheme
- jacurtis 7y ago
  True, but does it have to be? The beauty of this setting is that it falls back 100% gracefully. Basically if your OS and/or browser doesn't support it, then you just see the "normal" version of the site. Because Dark Mode is only available on newest versions of most operating systems, it is also reasonable to assume that the people running a dark mode compatible device would have a modern browser. So all-in-all, I think compatibility is a moot issue.
romdev 7y ago
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: 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%); }'; })();
defanor 7y ago
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? 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).
- comex 7y ago
  > do newer versions of web browsers also change the base/default colours when dark mode is used, by the way? iOS at least does not. Perhaps because some sites customize foreground colors but not background colors or vice versa, and they’d break if the foreground wasn’t dark or the background wasn’t light.
chrismorgan 7y ago
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.) I wrote about it at https://chrismorgan.info/blog/dark-theme-implementation/ https://chrismorgan.info/blog/dark-theme-implementation/.
- tenryuu 7y ago
  SteamDB also recently added this too, but it also doesn't require JavaScript, as it's based in the cookie. The toggle does use JavaScript if you do have it enabled
pedrocr 7y ago
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.
ognarb 7y ago
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. I wrote about it here: https://carlschwan.eu/2019/07/12/new-userbase.html https://carlschwan.eu/2019/07/12/new-userbase.html
xfalcox 7y ago
I wish more stuff was presented also as a header, so you could serve a specific CSS file for people who prefer dark-mode.
nodesocket 7y ago
Doesn’t work in Chrome on iOS 13.1.2 for me. Works in Safari though.
jordanmiguel 7y ago
Try accomdating for Dark Mode as an email developer...
- CaptainMarvel 7y ago
  How would you do that?
  - jordanmiguel 7y ago
    No way as of yet. At the moment the best bet is to ensure that images accomodate for dark mode (particulary in email clients such as Outlook). Hopefully on the future this can be done with a line of CSS -_-
- teaspoon 7y ago
  Have you seen this? https://sidemail.io/articles/dark-mode-in-html-email/ https://sidemail.io/articles/dark-mode-in-html-email/
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 ago
  Is there anything which allows user choice (i.e. state) that doesn't involve JS?
  - dgb23 7y ago
    You can use checkbox inputs (the reason why HTML&CSS is turing complete)
  - agret 7y ago
    Yes, 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 ago
      There's a number of end users who would like to avoid JS on non-app sites.
  - 7y ago
flukus 7y ago
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. 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.
floatrock 7y ago
Wikipedia needs this. 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.
- Volker-E 7y ago
  You can try https://en.wikipedia.org/wiki/User:Volker_E._(WMF)/dark-mode https://en.wikipedia.org/wiki/User:Volker_E._(WMF)/dark-mode for now. It's a black/night mode at the moment. And (not yet) an official option with some technical acceptance issues like lazy-loading, therefore flicker on load. – I work for the Wikimedia Foundation. This wish has been stated as part of the Community Wishlist survey 2019. https://meta.wikimedia.org/wiki/Community_Wishlist_Survey_2019/Reading/Night_mode https://meta.wikimedia.org/wiki/Community_Wishlist_Survey_20...
oceliker 7y ago
Can HN implement this one day? A dark mode for this website would be great.
eyegor 7y ago
Slightly off topic, 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).
barbs 7y ago
Where did this dark mode craze come from? Don't get me wrong - I quite enjoy dark mode most of the time, but why now and not earlier?
- aitchnyu 7y ago
  To speculate, screens are progressing to display dark mode well. I get eye strain from Jetbrains Pycharm dark theme, the terrible way it renders on my laptop, so I am holding out now. Holo theme for Android may have accelerated the trend from 2012. https://android-developers.googleblog.com/2012/01/holo-everywhere.html https://android-developers.googleblog.com/2012/01/holo-every...
- jayflux 7y ago
  I feel like it leaked from developer software engineering culture into the mainstream. Dark mode on text editors has been a thing for a long time, I’m guessing a few people finally decided to do it in other places.
mister_hn 7y ago
Please add IE6 support
hoseja 7y ago
If you want to make sure your website is pleasant for dark-browsers, check if it doesn't break with extensions such as https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text/ https://addons.mozilla.org/en-US/firefox/addon/dark-backgrou...
- vovvov 7y ago
  Or similarly for Chrome: https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh https://chrome.google.com/webstore/detail/dark-reader/eimadp...
andy_ppp 7y ago
I would really love a dark mode for hacker news!
qubyte 7y ago
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.
m-p-3 7y ago
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. 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?
- teaspoon 7y ago
  Yes, you could craft CSS to conditionally load an image based on the media query. This would let a server observe the client's setting.
jfengel 7y ago
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. 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?
- adossi 7y ago
  Aside from being able to use your phone at night without blinding your partner, another positive aspect of dark mode is the battery savings with OLED displays. Because the blacks on OLEDs are not emitting light, some simple text on a page saves a very surprising amount of battery.
- teaspoon 7y ago
  There's a good discussion of "why dark mode" in the article that mine links to: https://web.dev/prefers-color-scheme#why-dark-mode https://web.dev/prefers-color-scheme#why-dark-mode
  - jfengel 7y ago
    Thank you.
michalf6 7y ago
I get that you want to avoid pure white, but why avoid pure black though? It looks gorgeous on an OLED device, blending with the bezels.
tripzilch 7y ago
> It's recommended to avoid pure white for text, and I chose likewise to avoid pure black for the background. 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. 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. 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.

491 points by teaspoon 7y ago

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 ... * 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 diagrams so inverting their colors doesn't work Solution: Use a selector for svg only img[src$=.svg] and a class when manually needed * Some svg diagrams have their colors referred to like "see the red object" in that text. Solution: filter: invert(1) hue-rotate(180deg); That makes the blacks become white but the colors kind of stay the same hues at least * The are many interactive digrams on the sites. Solution: All of those had to be refactored to not use hard coded colors but do something like const darkMatcher = window.matchMedia("(prefers-color-scheme: dark)"); const isDarkMode = darkMatcher.matches; const colors = isDarkMode ? darkColors : lightColors; And draw everything with the appropriate colors. Its up to you if you want to trigger re-drawing if the user changes their preference * Some text was color coded for to match the diagrams as in <span style="color: red;">x-axis"</span> But now those colors looked bad on a dark background. Even 5 months later I still find places I missed.

chadlavi 7y ago
Why mess with content colors? Just leave the images.
- jgtrosh 7y ago
  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.
  - baroffoos 7y ago
    The easy option is to just put a white background behind the diagrams. It might not be as pretty as having the image designed right for a black background but its better than that hack.
    - the8472 7y ago
      that can be like a lighthouse in a dark night. flux can help of course, but if you are serious about supporting dark mode then you should eliminate as much white space as managable.
      - anfedorov 7y ago
        I think he means if you're serious about dark mode then design two graphs one light, one dark. Solving "how do I turn a well designed light mode image into a dark mode image" is an AI task that would be a nice research paper, not something a designer can hack together with a bunch of if-then rules.
    - seansta 7y ago
      +1
    - greggman2 7y ago
      I would have thought so to but looking at the white background digrams on the dark pages was a horrible experience. It pretty much defeated the entire purpose of having a dark mode as there was these bright white diagrams shining in my eyes. Which is better you can compare Here's before dark mode https://codepen.io/greggman/full/vYYOxjd https://codepen.io/greggman/full/vYYOxjd Here's leaving the backgrounds to the diagrams white https://codepen.io/greggman/full/zYYGZWB https://codepen.io/greggman/full/zYYGZWB And here's the hue rotated solution https://codepen.io/greggman/full/abbOJYB https://codepen.io/greggman/full/abbOJYB The ideal solution would be to make all the diagrams twice but that's a ton of work if your site has lots of diagrams. Of course it's all an opinion. I don't have time to redo all the diagrams or go make them CSS styled indivdually so this is the solution I chose for now.
- DoreenMichele 7y ago
  If you have a lot of images with white backgrounds, that's going to defeat the purpose of Dark Mode. Some people prefer dark mode because they suffer migraines and bright lights are a problem when they have a migraine. Or homeless people may be using it for both stealth purposes and battery conservation when they have limited opportunities to recharge. For some people, this preference is not just some minor detail. It's a much more important thing than "I just happen to like dark color schemes."
  - dageshi 7y ago
    Do you not think maybe that people with migranes and homeless people conserving battery might be edge cases just a little bit too far to worry about? Because I do. And I'm someone who runs permanent dark mode via plugins in firefox due to eye strain/headaches. I don't expect the world to bend over backwards and I certainly don't expect people to recolour image backgrounds for me. The plugins do a good enough job.
    - DoreenMichele 7y ago
      In the U.S., more than 38 million people have migraine disease, with some estimates suggesting that this number may be even higher, impacting as many as 50 million or more. Some migraine studies estimate that 12 percent of adults in the U.S. population have migraine, and 4 million have chronic migraine. https://migraine.com/migraine-statistics/ https://migraine.com/migraine-statistics/
  - saagarjha 7y ago
    > Or homeless people may be using it for both stealth purposes and battery conservation when they have limited opportunities to recharge. Sorry, what? I feel like this is a very contrived reason to support dark mode in your interface, if it even helps…
    - DoreenMichele 7y ago
      Contrived: deliberately created rather than arising naturally or spontaneously. Synonym: deliberate created or arranged in a way that seems artificial and unrealistic. Synonym: forced ---- People can do anything they want with their websites. I'm not anyone who sets global policy on what your website should do. But there's nothing contrived about the comment. It's an unplanned, spontaneous thought based on first-hand experience. I spent nearly six years homeless. I'm quite open about that. I still blog about homelessness. I spent a lot of time online while homeless. This was written about me: http://alexandralindelof.com/story-package/ http://alexandralindelof.com/story-package/
p7IDD243 7y ago
>Solution: remove the backgrounds so they are transparent This sucks when you want then share the diagram with someone, on certain platforms the diagram will be unreadable due to the lack of contrasting background.
- rangibaby 7y ago
  It’s easier to add a background later than remove one after, so I think transparent bg is a good solution
laughinghan 7y ago
You know the article addresses this exact problem? It links to another article focused on this problem, which suggests reducing the saturation of images: https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b https://medium.com/dev-channel/re-colorization-for-dark-mode... (It doesn't seem to have occurred to that author to try reducing the brightness of the images, or reducing saturation with the saturate() instead of grayscale(), but those also seem worth trying, brightness in particular.) Apple's Smart Invert is even simpler, it just leaves media like images and video as-is, only inverting colors of other things. I suppose for diagrams that you know are black-on-white, inversion is nice, but it should be opt-in.
quickthrower2 7y ago
Every time I think "oh just add a few lines off CSS" => 90% chance it'll take all day.
- mr_toad 7y ago
  CSS needs an equivalent to an SQL query planner, so that mere humans can understand how it works.
  - Vinnl 7y ago
    The Firefox DevTools (currently in Nightly, soon in stable) have started at least telling you why a certain selector does not apply, which sounds incredibly helpful: https://twitter.com/FirefoxDevTools/status/1174701036793032704 https://twitter.com/FirefoxDevTools/status/11747010367930327...
jacobolus 7y ago
> Solution: use CSS filter:invert for images > Solution: filter: invert(1) hue-rotate(180deg); This might be nominally acceptable, but it’s going to be pretty mediocre. Both of these methods dramatically distort color relationships from the original. Getting someone to explicitly pick colors that work in dark mode will yield much better results. (Of course, takes a lot more manual work by an expert, instead of a few automatic text replacements.)
- greggman2 7y ago
  A agree 100% but didn't want to have to manually remake 150+ diagrams
__MatrixMan__ 7y ago
Your comment makes me glad I don't do UI's. But then I'm reminded of a syntax highlighting scheme I wish existed: You'd never define a particular color, just algorithms for taking some input color and deriving each needed color from that one. Then the user can say: "I want this file in blue and this one in orange" and the syntax highlighting still calls out the features in a relative way but the absolute colors are used as cues for something else (like test coverage or something from source control). Ok, maybe doing UI's would be fun after all.
- andy_ppp 7y ago
  The problem is our brains represent colour in a very weird way and the algorithms I’ve seen for this always look horrible. I guess maybe training a neural net on this might make the results more human!
  - tripzilch 7y ago
    No, what really helps is picking the right colour space to work in. Which is probably CIE-LAB, being constructed especially for the weird way our brains perceive colour, but still also works mostly correct if you treat it as a linear space.

uallo 7y ago

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. https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955...

louismerlin 7y ago

I baked dark mode into my css microframework [0], and it's always so satisfying to see people using it ! I didn't do the "dimmer images" thing, but I'll try it sometimes. [0] https://concrete.style https://concrete.style

pspeter3 7y ago
That's a great micro framework

skykooler 7y ago

How does one enable this setting in Firefox?

_bxg1 7y ago
It's OS-level. macOS, iOS, Android, and I believe Windows 10 will all send this signal now to whichever (modern) browser you're using.
- lol768 7y ago
  As will Linux/Gnome.
  - skykooler 7y ago
    Any idea how to set this on Ubuntu? I have what I assume is the dark theme - title bars are white text on dark grey background - but this website displays a light theme in Firefox.
    - lol768 7y ago
      It depends on your Gtk theme, I think. If it's marked as dark, then Firefox will pick that up and apply the CSS accordingly. I use Yaru-dark. You can also force Firefox, via an about:config setting to act as if you were using dark mode.
jordanwallwork 7y ago
I think it's an OS setting rather than a browser setting. On Windows 10 I just searched 'Dark Mode' and toggled 'Default app mode light / dark'
snthd 7y ago
browser.in-content.dark-mode
chadlavi 7y ago
Seems it happens automatically if you use the default theme

brundolf 7y ago

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. http://www.brandonsmith.ninja/ http://www.brandonsmith.ninja/

uncheckederror 7y ago
I've been using it for a few months on my personal site as well. It defaults to the light version and then switches to the dark them on request. This is so people who don't care or aren't good with computers get the light version and those that can set the system theme have the option of getting the dark version. https://thomasryan.xyz/ https://thomasryan.xyz/
- saagarjha 7y ago
  FWIW, your Posts/Demo/Resume links are laid out a bit oddly on my iPad.
  - uncheckederror 7y ago
    Thanks for pointing this out! I borrowed a coworker's iPad at lunch and fixed this bug. As best as I can tell Safari wasn't respecting the text-align: right; CSS rule. I've switched to a flexbox layout for those elements.
- _bxg1 7y ago
  > people who don't care or aren't good with computers get the light version Or more importantly, people whose browsers/OSes don't set that CSS flag
333c 7y ago
I also did this on my personal website. I was surprised how easy it was, and happy that it was built into CSS, requiring no JS (as you said).
wlesieutre 7y ago
Mine too! Finally put up a personal site last month after not touching any web projects for a long while. I've checked out of a lot of social media and wanted my own place to put stuff and to poke around with javascript and web graphics. One of the upcoming posts is going to cover handling dark mode for <canvas> content. So far I've just used transparent backgrounds with no black or white drawing so that it's visible either way. https://will.institute/ https://will.institute/ Not much on it yet, just been slowly working through the setup for doing a canvas with a responsive site. Neat tidbit - the logo image is a single SVG in shades of dark gray, which doesn't work well on a dark background. You can apply image transformations in CSS under the dark mode media query to adapt things like this: img#wi-logo { filter: invert(100%) brightness(110%); } This is the same tool that the linked post uses for desaturating images, but adding that invert is a useful tool for dark mode. Personally I wouldn't recommend general image desaturation, photos taking more focus against a dark background is a good look if you ask me. At least consider making it an opt-in setting instead of the default.

Y-bar 7y ago

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?

zamadatix 7y ago
In Firefox you can add "ui.systemUsesDarkTheme" as an integer in about:config and set it to "0" for forced light or "1" for forced dark. This setting changes what is reported by the media query, you can still set your OS and/or browser theme independently. You will need to restart Firefox to apply the setting.
degenerate 7y ago
If you just want chrome to be dark, you can install a dark theme such as: https://chrome.google.com/webstore/detail/just-black/aghfnjkcakhmadgdomlmlhhaocbkloab https://chrome.google.com/webstore/detail/just-black/aghfnjk...
- Y-bar 7y ago
  I think you misread > UI chrome Versus > Chrome UI
  - rrix2 7y ago
    "UI chrome" refers to the browser UI itself -- everything that is not the web content. what are you referring to?
  - agret 7y ago
    In the case of the Chrome web browser the Chrome UI is the UI Chrome though? What other UI elements are there not included in the dark theme?
OJFord 7y ago
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.

saagarjha 7y ago

> Photographs also looked harsh. It turns out that many people prefer images, too, to be desaturated in dark mode This is an interesting choice. While it might be easier on the eyes, personally it feels kind of icky to change colors on images…

defanor 7y ago
Some global CSS themes change them, but then restore original ones on hover. Not perfect, but generally fine. Though regular photos (and videos) are rarely so bright that it hurts the eyes while in a dark environment, unlike diagrams and other kinds of drawings, which can easily be mostly white.
ubercow13 7y ago
Yeah that seems bad. If you choose low contrast fonts, reduce the contrast of photographs to the background by making them darker, etc, it's just like turning down the brightness and contrast of your whole site. If the user thinks the content of your site is still too bright with dark mode on, maybe they should turn down the brightness of their device? By making everything on your site dark and low-contrast, the implication is that the user wants to see other things on the screen in higher contrast alongside your site, like the UI chrome. That seems unlikely - your site is the most important content that they have on the screen at that time and it should probably have the highest brightness or contrast of anything on the screen, not the lowest.
reportgunner 7y ago
I prefer to hide all the images altogether.

lostmsu 7y ago

Does not seem to work in Firefox for Android.

_bxg1 7y ago
Do you have Android's dark mode enabled, and is your Firefox up to date? It's a pretty new CSS feature
- 354896547981565 7y ago
  Doesn't work for me either. Android 10, Firefox 68.1.1 and Chrome 77.0, dark mode activated.
  - _bxg1 7y ago
    Weird. It's supposed to work on Android Firefox 68; Chrome 77 is unclear: https://caniuse.com/#search=prefers-color-scheme https://caniuse.com/#search=prefers-color-scheme
petepete 7y ago
Works for me in Firefox Preview, there's an option in Settings > Theme.
dddddaviddddd 7y ago
Looking forward to this being implemented. Since my phone is my only OLED display, it's also the only screen where dark mode really makes a big difference in total light emitted.

cbsks 7y ago

Now if only Hacker News would implement it!

skunkworker 7y ago
I currently use 'DARK READER' for hacker news and it works quite well using the 'Filter+' theme engine.
- _bxg1 7y ago
  The problem with browser extensions is that they're a massive security risk.
  - skunkworker 7y ago
    On some sites I've used it to get a good baseline then export the CSS and modify it from there.
    - _bxg1 7y ago
      How do you get your browser to even load custom CSS without an extension?
      - skunkworker 7y ago
        Without an extension, I don’t know an easy way. You could just build your own extensions from scratch and load it there. I used it to style my own sites for dark mode.
      - saagarjha 7y ago
        In my browser, Preferences > Advanced > Style sheet.
- ehsankia 7y ago
  I use the following: https://userstyles.org/styles/113994/hacker-news-dark https://userstyles.org/styles/113994/hacker-news-dark Works great.

ripley12 7y ago

Shameless plug: I did the same thing to my personal website and wrote about it with light/dark screenshots: https://www.reillywood.com/blog/dark-mode/ https://www.reillywood.com/blog/dark-mode/ 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.

saagarjha 7y ago
I only use Solarized for code snippets on my website, but the benefit of using it as a color scheme is that switching between the two is a one line addition: only the background needs to respond to prefers-color-scheme.
- ripley12 7y ago
  Yeah, that would be nice for UIs that can use Solarized Light. I experimented with it as a full UI, but it just didn't look quite right to me – I ended up only using it for light mode code snippets.

crazygringo 7y ago

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 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: hover/click/drag vs tap/hold/swipe - 2 modes for accessibility: full visual+audio vs screenreader/captioned - And now 2 visual modes: light vs dark That's 48 combinations to design and test for. I'm probably forgetting some too. But as a developer it makes just the baseline cost of any basic app so damned high. Again, as a user I love it. But the entrance cost for entrepreneurs, or even hobbyists? Man oh man.

nattaylor 7y ago
As developers, can't we use progressive enhancement to support as many scenarios as we want?
laughinghan 7y ago
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.
- ken 7y ago
  The particular methods for making CSS backwards compatible are specific to the web, but the general problems faced by having user display preferences are not. Adding these features to native apps blows up your testing matrix there, too. In many ways, it's even worse. I've got OS settings here for "increase contrast", "reduce transparency", "use grayscale", "invert colors", and (because areas of native windows can be translucent) even the desktop wallpaper comes into play. I turned on dark-mode for testing my own app, and I had to turn it off because there's parts of Xcode where the contrast ratio is less than 1.1:1.0. The text is downright invisible. Obviously nobody at Apple would ever intentionally make software like that. They must have simply never thought to test with the same settings as I have. https://pbs.twimg.com/media/D1kfN6SUcAEwWxq?format=png&name=small https://pbs.twimg.com/media/D1kfN6SUcAEwWxq?format=png&name=...

kristofferR 7y ago

The two best Dark Mode extensions just implemented automatic Dark Mode support (so the web goes dark automatically when Dark Mode is enabled) :D https://github.com/darkreader/darkreader https://github.com/darkreader/darkreader https://github.com/openstyles/stylus https://github.com/openstyles/stylus (not built into release yet)

least 7y ago
I like DarkReader, but it's been a huge exercise in patience seeing Firefox and Chrome getting all the updates, while the paid Safari version languishes. By the extension author's own admission [1], the majority of the revenue comes from the Safari extension, but he still prioritizes the (I imagine) larger user base of the firfox and chrome extensions. It's frustrating, to say the least. [1] https://github.com/darkreader/darkreader/issues/1205#issuecomment-477282237 https://github.com/darkreader/darkreader/issues/1205#issueco...

alib 7y ago

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.

saagarjha 7y ago
I'm quite surprised, as Firefox on iOS should be using WebKit…has Firefox linked against the iOS 13 SDK yet?
jacurtis 7y ago
I can confirm that dark mode does not work on iOS Firefox. I tested it a month ago and figured an update was coming soon. But I just tested it again on iOS 13.1 with everything up to date and still no luck. Safari works as my control.

arjunkomath 7y ago

It's not widely available yet, https://caniuse.com/#search=prefers-color-scheme https://caniuse.com/#search=prefers-color-scheme

jacurtis 7y ago
True, but does it have to be? The beauty of this setting is that it falls back 100% gracefully. Basically if your OS and/or browser doesn't support it, then you just see the "normal" version of the site. Because Dark Mode is only available on newest versions of most operating systems, it is also reasonable to assume that the people running a dark mode compatible device would have a modern browser. So all-in-all, I think compatibility is a moot issue.

romdev 7y ago

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: 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%); }'; })();

defanor 7y ago

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? 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).

comex 7y ago
> do newer versions of web browsers also change the base/default colours when dark mode is used, by the way? iOS at least does not. Perhaps because some sites customize foreground colors but not background colors or vice versa, and they’d break if the foreground wasn’t dark or the background wasn’t light.

chrismorgan 7y ago

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.) I wrote about it at https://chrismorgan.info/blog/dark-theme-implementation/ https://chrismorgan.info/blog/dark-theme-implementation/.

tenryuu 7y ago
SteamDB also recently added this too, but it also doesn't require JavaScript, as it's based in the cookie. The toggle does use JavaScript if you do have it enabled

pedrocr 7y ago

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.

ognarb 7y ago

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. I wrote about it here: https://carlschwan.eu/2019/07/12/new-userbase.html https://carlschwan.eu/2019/07/12/new-userbase.html

xfalcox 7y ago

I wish more stuff was presented also as a header, so you could serve a specific CSS file for people who prefer dark-mode.

nodesocket 7y ago

Doesn’t work in Chrome on iOS 13.1.2 for me. Works in Safari though.

jordanmiguel 7y ago

Try accomdating for Dark Mode as an email developer...

CaptainMarvel 7y ago
How would you do that?
- jordanmiguel 7y ago
  No way as of yet. At the moment the best bet is to ensure that images accomodate for dark mode (particulary in email clients such as Outlook). Hopefully on the future this can be done with a line of CSS -_-
teaspoon 7y ago
Have you seen this? https://sidemail.io/articles/dark-mode-in-html-email/ https://sidemail.io/articles/dark-mode-in-html-email/

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 ago
Is there anything which allows user choice (i.e. state) that doesn't involve JS?
- dgb23 7y ago
  You can use checkbox inputs (the reason why HTML&CSS is turing complete)
- agret 7y ago
  Yes, 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 ago
    There's a number of end users who would like to avoid JS on non-app sites.
- 7y ago

flukus 7y ago

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. 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.

floatrock 7y ago

Wikipedia needs this. 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.

Volker-E 7y ago
You can try https://en.wikipedia.org/wiki/User:Volker_E._(WMF)/dark-mode https://en.wikipedia.org/wiki/User:Volker_E._(WMF)/dark-mode for now. It's a black/night mode at the moment. And (not yet) an official option with some technical acceptance issues like lazy-loading, therefore flicker on load. – I work for the Wikimedia Foundation. This wish has been stated as part of the Community Wishlist survey 2019. https://meta.wikimedia.org/wiki/Community_Wishlist_Survey_2019/Reading/Night_mode https://meta.wikimedia.org/wiki/Community_Wishlist_Survey_20...

oceliker 7y ago

Can HN implement this one day? A dark mode for this website would be great.

eyegor 7y ago

Slightly off topic, 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).

barbs 7y ago

Where did this dark mode craze come from? Don't get me wrong - I quite enjoy dark mode most of the time, but why now and not earlier?

aitchnyu 7y ago
To speculate, screens are progressing to display dark mode well. I get eye strain from Jetbrains Pycharm dark theme, the terrible way it renders on my laptop, so I am holding out now. Holo theme for Android may have accelerated the trend from 2012. https://android-developers.googleblog.com/2012/01/holo-everywhere.html https://android-developers.googleblog.com/2012/01/holo-every...
jayflux 7y ago
I feel like it leaked from developer software engineering culture into the mainstream. Dark mode on text editors has been a thing for a long time, I’m guessing a few people finally decided to do it in other places.

mister_hn 7y ago

Please add IE6 support

hoseja 7y ago

If you want to make sure your website is pleasant for dark-browsers, check if it doesn't break with extensions such as https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text/ https://addons.mozilla.org/en-US/firefox/addon/dark-backgrou...

vovvov 7y ago
Or similarly for Chrome: https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh https://chrome.google.com/webstore/detail/dark-reader/eimadp...

andy_ppp 7y ago

I would really love a dark mode for hacker news!

qubyte 7y ago

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.

m-p-3 7y ago

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. 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?

teaspoon 7y ago
Yes, you could craft CSS to conditionally load an image based on the media query. This would let a server observe the client's setting.

jfengel 7y ago

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. 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?

adossi 7y ago
Aside from being able to use your phone at night without blinding your partner, another positive aspect of dark mode is the battery savings with OLED displays. Because the blacks on OLEDs are not emitting light, some simple text on a page saves a very surprising amount of battery.
teaspoon 7y ago
There's a good discussion of "why dark mode" in the article that mine links to: https://web.dev/prefers-color-scheme#why-dark-mode https://web.dev/prefers-color-scheme#why-dark-mode
- jfengel 7y ago
  Thank you.

michalf6 7y ago

I get that you want to avoid pure white, but why avoid pure black though? It looks gorgeous on an OLED device, blending with the bezels.

tripzilch 7y ago

> It's recommended to avoid pure white for text, and I chose likewise to avoid pure black for the background. 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. 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. 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.