Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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



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


As someone who codes dark mode first thanks for the lazy “OMG, my eyes...” mode ;-)


I 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


> Why not simply lower your screen brightness ?

On at least two cheap laptops I have used recently, the display driver steps down the overall display brightness when large regions of the screen are dark.

Windows 10 on an HP Stream 11, Intel integrated graphics and Intel display driver.

I can turn down the manual brightness to its minimal setting.

When large windows with white backgrounds are on screen, the backlight brightness increases. Decreases again when the windows are off screen or closed.

This does not change the manual brightness setting.

I have yet to find a tweak to disable this.


At least some Dell XPS 13 have this. IIRC it's feature of the LCD panel itself.


It can be turned off in the BIOS (a change I made about 15 minutes after getting my XPS13, which I otherwise love).


If I remember correctly, this can be toggled off in Power Options.


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


A white screen with high brightness can't be compared to white paper. If you have a bright lamp behind the white paper, you can begin to compare the problem. A white screen is fine for young people without any eye problems, when you get older and start having problems with the eyes, you might need to cut down on blue light to prolong the usage of your eyes depending on what problems you get. I have to use filters to remove blue light to not make my eyes worse.


That’s why I love redshift, I shove everything way over into the red and turn the gamma right down, I also killed the overhead lights in my office so it’s a comfortable quiet cave to work in.


> Do people also get annoyed at printed paper being white?

Printed paper glowing white would indeed be very annoying.

Passive displays, such as old non-backlit LCD or e-ink, can be white and not annoying. Most people don't want to stare into a light source more than necessary.

Using proper brightness helps, and dark mode can help even more.


What's the difference between a screen emitting X light as a primary light source and a sheet of paper emitting the same exact amount of light, as a secondary light source ?

The amount of light coming to your retina stays the same..

Just lower the brightness until it matches the amount of light reflected by a sheet of paper placed next to the screen.

If you can't read the paper, turn the lights on. Being in a dark room dilates your pupils which makes them even more sensible to bright light...


When reading in bright sunlight, the white paper can be excessively bright, and yes, I've wished for a dark page.

I agree that it is about matching the brightness of the monitor with the background.


I mostly use light mode, usually I can't get it bright enough during the day!

I will say my personal "Dev" computer uses dark modes though, I find at night with multiple monitors it's just too bright.


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


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


Very few monitors use OLED, and most phones don't either although it is becoming more common there.


I 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)


I set my monitor’s colour thingy to ‘paper’ and the yellowish tint makes any light theme more comfortable than a dark one.


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


Have you tried simply using Stylus with a custom style? I've been pretty happy with the setup. No performance issues.


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


a lightweight alternative to dark reader is this one:

https://addons.mozilla.org/en-US/firefox/addon/night-light-m...

YMMV


I'm curious, why 190deg and not 180deg ?


Stylistic 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

I don't really see any difference between 180 and 190 though.


Thanks for the demo. I barely see a difference too.



Subjective choice, you can fine tune based on website.



This 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


while the invert operation is not truly invertible you can still partially fix this by applying another invert and hue-rotate on images.


Interestingly this works only if you have background color explicitly set. Otherwise you still get light background.


Yes, that's the "fiddling with backgrounds" part. :) This is mostly useful if you have prototype app and want a quick and dirty dark mode.


nice.


Ahem, HN. I bet most of your dedicated users (albeit who also use FF or Safari) would benefit from this.


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


That was also the case with CRT displays. If a pixel is to stay black, no electron must be emitted to light up its phosphor.

This Google search frontend has been around long enough to claim it helped save considerable amount of energy on that principle:

http://www.blackle.com/about/

What they report about LEDs and CCFL isn't entirely correct, however. It may become in the future.

Technicalities aside, what once could be regarded as an environmental measure, today is a much more practical battery saving strategy.


CRTs consume so much power that the beam current is negligible. The comparison is with backlit LCD screens, which have to have the backlight on regardless of how many black pixels you have.


Actually traditional tft displays need to apply a current to turn a pixel black, so if you don't use adaptive brightness that would dim the backlight if the display is mostly black, you actually consume more power with a black theme. I have a low power Pentium notebook with 15" led backlit screen and the difference between a terminal with black or white background is significant.


> I have a low power Pentium notebook with 15" led backlit screen and the difference between a terminal with black or white background is significant.

How significant? Turn the screen black, and show the remaining battery time estimate. Turn it white, do the same. I'm curious.


Battery at 74%. Sitting at black screen for about a minute, the highest estimate I got was 4:50, lowest 4:05. It was mostly showing numbers close to either of these, almost never something in between.

Switching to white I got 5:40 and 4:50 showing pretty much the same behavior.

It's an HP pavilion 15-p005ng with a Pentium N3530. Terrible machine btw. Linux freezes in irregular intervals, almost immediately with OpenGL stuff...


Surely it isn't extrapolating from current instantaneous power consumption?


I'm pretty sure that's how it works. The drivers report total battery capacity, current battery capacity, and current power draw, so the meters just do the math.


Not the case for LCDs with variable brightness backlight regions.


I remember my high school electrical engineering teacher challenging me to make a project out of comparing ways to save power with CRTs and LCDs. All black vs. all white screen had no measurable difference on my multimeter. I couldn't answer it at the time. I was convinced that it should save power.



I regularly get migraines, where "bright" lights are searingly painful to look at. When the symptoms aren't too bad, dark themes on a text editor are okay, but light themes are not.

Migraines aren't an uncommon problem.

I think that is a fairly objective reason driving the preference.


I dislike sites with dark background. Maybe it is a problem with my poor quality LCD screen, but I switch to reading mode on such sites (so that the background becomes white) because they are hard to read.


I'm pretty much the exact opposite. I typically use my computer/phone in a low light environment (monitor and phone are almost always on lowest brightness settings), and a white background hurts my eyes. I use a dark background wherever possible, especially when reading ebooks/longer articles on my phone.

Any good software designed for reading should have good support for both.


Conceded.


Don't most dark themes actually use dark grey rather than black? The material design dark theme guidelines [0] were posted recently and recommend dark grey as the primary surface colour.

[0] https://material.io/design/color/dark-theme.html#


You must mean OLED. And no, there are almost no desktop OLED monitors in the wild.


"LED display" term is commonly used for LCD displays where backlight is also actively controlled to increase dynamic range.


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


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


There is nothing deceptive about LED backlit LCDs, they are an important upgrade over CFL backlit LCDs.


I've seen a fair few TVs with LED backlit screens, advertised as LED displays. Which what I think was meant by "deceptively labeled"


It's a display and it "has LED". Given a clean slate language reboot for today's technology we would probably reserve the term "LED display" to "LED per subpixel" models and call LED LCDs "LED backlit", but the term got into widespread use when the backlit kind was the only one available so that's where we are now.


LCD displays where backlight is actively controlled probably still draw more power when displaying black than white


They are not uncommon on laptops, and quite common on phones. And, I have a couple on my desk at the office.


> a black LED pixel consumes no energy

At last years Android Dev Summit, Google provided some interesting stats on how much power dark mode saves.

[1] https://www.theverge.com/2018/11/8/18076502/google-dark-mode...

[2] https://youtu.be/N_6sPd0Jd3g


Is there a way to test a specific color scheme from the web inspector instead of having to change the system appearance?


I'd expect controls for this to improve in the future (e.g., 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-s...

Or, in about:config, set the hidden ui.systemUsesDarkTheme to 0 for light, 1 for dark, and 2 for no preference


Psst: 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/


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

its open source :)


I am using Dark Reader extension. It is available for both Firefox and Chrome. Has advanced settings, like grayscale, contrast, etc.


It'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)


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


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


I contend that while everything about the client cannot be hidden from the server, the number of things that can be identified is increasing.


Yeah, 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-s...


I 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/


> I did a small survey and only very few websites have developed a second dark theme: https://zimbatm.com/DarkMode

Add YouTube to this list, it's got a pretty good dark theme that can be easily enabled now.


They have a dark mode but it’s activated with a toggle in the interface, and not with the prefers-color-scheme media query.


If you look here, it does show "manual toggle" sites too: https://zimbatm.com/DarkMode#websites


I'll be interested to see all the clever ways this will be used to fingerprint users and browsers.


Interestingly that page doesn't support prefers-color-scheme itself ;)


The new Microsoft Edge has prefers-color-scheme as well.


But Chrome itself doesn't, interestingly?


Looks likely to ship with Chrome 76, which I believe is the current dev channel: https://www.chromestatus.com/features/5109758977638400


Chrome has it in their dev build (Chrome Canary).

https://caniuse.com/#search=prefers-color-scheme




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: