8 ms·
Firefox 67 also the first browser that ships with `prefers-color-scheme` (aka dark mode) after Safari. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/
by zimbatm 7y ago
Firefox 67 also the first browser that ships with `prefers-color-scheme` (aka dark mode) after Safari.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
And it does the right thing and disables the feature when enabling the resist fingerprinting option.
I did a small survey and only very few websites have developed a second dark theme: https://zimbatm.com/DarkMode https://zimbatm.com/DarkMode
- megous 7y agoBTW, cheap-ass dark mode can be made by: filter: invert(95%) hue-rotate(190deg) on <body> and perhaps fiddling with some backgrounds, to avoid transparency.
- Crosseye_Jack 7y agoAs someone who codes dark mode first thanks for the lazy “OMG, my eyes...” mode ;-)
- swozey 7y agoHave you used the Dark Reader addon? It's not amazing in firefox (has major performance issues on some sites) but I can't live without it.
- butteroverflow 7y agoHave you tried simply using Stylus with a custom style? I've been pretty happy with the setup. No performance issues.
- johnnycab 7y agoStylus is great when Darkreader breaks on certain sites. But when it works there are no substitutes e.g. navigating HN using the light setting in Darkreader offers a degree of customisation to create a scheme and reduce eye fatigue, without too much effort. Whereas, it can be hit and miss when trying various themes/stylesheets etc.
- modzu 7y agoa lightweight alternative to dark reader is this one: https://addons.mozilla.org/en-US/firefox/addon/night-light-mode/ https://addons.mozilla.org/en-US/firefox/addon/night-light-m... YMMV
- sdsdsdsds 7y agoI used to code with black themes for a long time but not anymore: Why not simply lower your screen brightness ? I feel it better for my eyes because the text which i'm looking at is actually dark and not bright. Most people with dark themes have high brightness levels on their screens. I think this can be bad on the long term. Especially that many screen elements are not as dark as their code, which makes them ultra bright
- Crosseye_Jack 7y agoI mean that when I build out an application / site, I build the Dark Mode first then convert the dark mode into the light mode. (Most of my users choose to use dark mode over light mode if the option is given to them)
- nominated1 7y agoI've also read that it takes more power (battery) to render black than it does white. Combined with the need for more brightness it doesn't seem like a good solution. Calibrating my monitors took them from having piercing bluish whites to more softer pinkish whites and reduced daytime eye strain significantly. I then use Redshift at night with the undocumented "preserve" switch to combine my icc profile with the Redshift changes.
- viraptor 7y ago> I've also read that it takes more power (battery) to render black than it does white This really depends on the display technology and for more modern monitors, the opposite is true.
- earenndil 7y agoVery few monitors use OLED, and most phones don't either although it is becoming more common there.
- noisem4ker 7y agoDo people also get annoyed at printed paper being white? Do they wish books had black pages? If not, as you say, it is only a matter of adjusting the screen for the proper brightness, depending on ambient light. And it is true that, inevitably, whatever you're doing, sooner or later some white background or picture will appear on screen and blast your eyes with light. I cannot stand this, so I don't use dark themes on my PC.
- Breadmaker 7y agoColor Bookmarklets https://www.squarefree.com/bookmarklets/color.html https://www.squarefree.com/bookmarklets/color.html
- escapecharacter 7y agoI'm curious, why 190deg and not 180deg ?
- diggan 7y agoStylistic choice? Didn't find any information why exactly 190deg, so assuming the author just liked it that way. Made a quick demo showing the difference: https://output.jsbin.com/hujebimavu/1 https://output.jsbin.com/hujebimavu/1 I don't really see any difference between 180 and 190 though.
- c0vfefe 7y agoThanks for the demo. I barely see a difference too.
- simonebrunozzi 7y agohttps://stackoverflow.com/questions/29037023/how-to-calculate-required-hue-rotate-to-generate-specific-colour https://stackoverflow.com/questions/29037023/how-to-calculat...
- megous 7y agoSubjective choice, you can fine tune based on website.
- deleted 7y ago[deleted]
- czechdeveloper 7y agoInterestingly this works only if you have background color explicitly set. Otherwise you still get light background.
- megous 7y agoYes, that's the "fiddling with backgrounds" part. :) This is mostly useful if you have prototype app and want a quick and dirty dark mode.
- droobles 7y agonice.
- chias 7y agoThis has amusing effects on avatar images / pictures of faces. I wasn't quite mentally prepared for what I looked like with non-inverted colors but light shadows and dark highlights. Edit: This is my dog: https://i.imgur.com/1ECupVA.png https://i.imgur.com/1ECupVA.png
- the8472 7y agowhile the invert operation is not truly invertible you can still partially fix this by applying another invert and hue-rotate on images.
- ncmncm 7y agoDark mode, for the first time ever, has legitimate, objective reasons to want, now that we have pure LED displays: a black LED pixel consumes no energy.
- copperx 7y agoYou must mean OLED. And no, there are almost no desktop OLED monitors in the wild.
- jmiskovic 7y ago"LED display" term is commonly used for LCD displays where backlight is also actively controlled to increase dynamic range.
- wlesieutre 7y agoBacklight control for dynamic range is common, but not necessary for being an “LED display.” It just means the backlight uses LEDs instead of CCFLs like they used to.
- ncmncm 7y agoThus the distinction "pure LED" in my previous post. That there are plenty of deceptively labeled LCDs does not mean there are no actual LED displays.
- geekles 7y agoThe new Microsoft Edge has prefers-color-scheme as well.
- saagarjha 7y agoBut Chrome itself doesn't, interestingly?
- callahad 7y agoLooks likely to ship with Chrome 76, which I believe is the current dev channel: https://www.chromestatus.com/features/5109758977638400 https://www.chromestatus.com/features/5109758977638400
- fastball 7y agoChrome has it in their dev build (Chrome Canary). https://caniuse.com/#search=prefers-color-scheme https://caniuse.com/#search=prefers-color-scheme
- toddsiegel 7y agoAhem, HN. I bet most of your dedicated users (albeit who also use FF or Safari) would benefit from this.
- saagarjha 7y agoIs there a way to test a specific color scheme from the web inspector instead of having to change the system appearance?
- callahad 7y agoI'd expect controls for this to improve in the future (e.g., https://bugzil.la/1547818 https://bugzil.la/1547818), but for now you can use this add-on to force a dark scheme: https://addons.mozilla.org/firefox/addon/dark-mode-website-switcher/ https://addons.mozilla.org/firefox/addon/dark-mode-website-s... Or, in about:config, set the hidden ui.systemUsesDarkTheme to 0 for light, 1 for dark, and 2 for no preference
- saagarjha 7y agoInterestingly that page doesn't support prefers-color-scheme itself ;)
- buildzr 7y ago> I did a small survey and only very few websites have developed a second dark theme: https://zimbatm.com/DarkMode https://zimbatm.com/DarkMode Add YouTube to this list, it's got a pretty good dark theme that can be easily enabled now.
- simongr3dal 7y agoThey have a dark mode but it’s activated with a toggle in the interface, and not with the prefers-color-scheme media query.
- buildzr 7y agoIf you look here, it does show "manual toggle" sites too: https://zimbatm.com/DarkMode#websites https://zimbatm.com/DarkMode#websites
- bhauer 7y agoI put one together for TFB [1] a little while ago and used the prefers-color-scheme media feature in anticipation of it being supported more broadly. I'm super happy to see that added to Firefox. [1] https://www.techempower.com/benchmarks/ https://www.techempower.com/benchmarks/
- rugk 7y agoYeah, prefers-color-scheme is a really nice thing! I have even also made an add-on for Firefox that you can use to toggle that dark mode directly in your browser (not only at OS level): https://addons.mozilla.org/firefox/addon/dark-mode-website-switcher/?src=external-hn https://addons.mozilla.org/firefox/addon/dark-mode-website-s...
- nerdponx 7y agoI'll be interested to see all the clever ways this will be used to fingerprint users and browsers.
- alanh 7y agoPsst: Night Eye is a browser extension that has really, deeply impressed me by managing to give almost every website and web app a good-enough 'night mode,' surpassing all the quick-hack filter() solutions and more common extensions like Darken. https://nighteye.app/ https://nighteye.app/
- modzu 7y agoreviews for that look harsh. its limited to 5 sites?? another alternative is (shameless plug) this one: https://addons.mozilla.org/en-US/firefox/addon/night-light-mode/ https://addons.mozilla.org/en-US/firefox/addon/night-light-m... its open source :)
- lostmsu 7y agoI am using Dark Reader extension. It is available for both Firefox and Chrome. Has advanced settings, like grayscale, contrast, etc.
- blitmap 7y agoIt's frustrating to me that browsers lend themselves so willingly to being fingerprinted, and it's up to the user to stay aware of and keep ahead of these new avenues. I wish there were 4 modes: - Standard/light mode - Dark mode (website has facilities to test for this and style accordingly) - Dark mode with fake or unknown values advertised to the website - Dark mode with a user-custom filter applied (like below) that the website cannot test for (it sees untransformed computed styles) > filter: invert(95%) hue-rotate(190deg)
- noisem4ker 7y agoIt's frustrating that we've come to a point where websites can track users by knowing how they set up their browser to render pages. Such information should have no way nor reason to ever be transmitted back from the client to the server in the first place.
- marshray 7y agoOne of the original, and continuing, uses of browser scripting is to tweak the layout based on client rendering quirks. ISTR (late 1990's?) reading about fingerprinting attacks that didn't require script or even CSS. Subtle changes in font size and attributes (bold, italic) may affect the order in which page elements are requested by the browser. Even if you wanted to, there's simply no reliable way to isolate data about client rendering from any other data exchanged with the server. Even if you did a heroic rearchitecture of the DOM and rendering system, there are still static IP addresses and cookies.
- blitmap 7y agoI contend that while everything about the client cannot be hidden from the server, the number of things that can be identified is increasing.
- deleted 7y ago[deleted]