Hacker News new | ask | show | jobs
by zimbatm 2587 days 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/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
12 comments
megous 2587 days ago
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.
link
Crosseye_Jack 2587 days ago
As someone who codes dark mode first thanks for the lazy “OMG, my eyes...” mode ;-)
link
sdsdsdsds 2587 days ago
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

link
watersb 2587 days ago
> 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.

link
abrowne 2586 days ago
At least some Dell XPS 13 have this. IIRC it's feature of the LCD panel itself.
link
ac29 2586 days ago
It can be turned off in the BIOS (a change I made about 15 minutes after getting my XPS13, which I otherwise love).
link
zimmi 2587 days ago
If I remember correctly, this can be toggled off in Power Options.
link
noisem4ker 2587 days ago
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.

link
Moru 2587 days ago
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.
link
noir_lord 2587 days ago
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.
link
xorcist 2587 days ago
> 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.

link
sdsdsdsds 2586 days ago
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...

link
kbutler 2587 days ago
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.

link
penagwin 2587 days ago
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.

link
nominated1 2587 days ago
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.

link
viraptor 2587 days 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.

link
earenndil 2587 days ago
Very few monitors use OLED, and most phones don't either although it is becoming more common there.
link
Crosseye_Jack 2587 days ago
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)
link
ljm 2587 days ago
I set my monitor’s colour thingy to ‘paper’ and the yellowish tint makes any light theme more comfortable than a dark one.
link
swozey 2587 days ago
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.
link
butteroverflow 2587 days ago
Have you tried simply using Stylus with a custom style? I've been pretty happy with the setup. No performance issues.
link
johnnycab 2587 days ago
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.
link
modzu 2587 days ago
a lightweight alternative to dark reader is this one:

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

YMMV

link
escapecharacter 2587 days ago
I'm curious, why 190deg and not 180deg ?
link
diggan 2587 days ago
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.

link
c0vfefe 2585 days ago
Thanks for the demo. I barely see a difference too.
link
simonebrunozzi 2587 days ago
https://stackoverflow.com/questions/29037023/how-to-calculat...
link
megous 2587 days ago
Subjective choice, you can fine tune based on website.
link
Breadmaker 2587 days ago
Color Bookmarklets https://www.squarefree.com/bookmarklets/color.html
link
chias 2587 days ago
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

link
the8472 2587 days ago
while the invert operation is not truly invertible you can still partially fix this by applying another invert and hue-rotate on images.
link
czechdeveloper 2587 days ago
Interestingly this works only if you have background color explicitly set. Otherwise you still get light background.
link
megous 2587 days ago
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.
link
droobles 2587 days ago
nice.
link
toddsiegel 2587 days ago
Ahem, HN. I bet most of your dedicated users (albeit who also use FF or Safari) would benefit from this.
link
ncmncm 2587 days ago
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.
link
noisem4ker 2587 days ago
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.

link
ncmncm 2587 days ago
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.
link
iforgotpassword 2587 days ago
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.
link
clarry 2587 days ago
> 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.

link
iforgotpassword 2586 days ago
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...

link
firethief 2587 days ago
Surely it isn't extrapolating from current instantaneous power consumption?
link
kevin_thibedeau 2587 days ago
Not the case for LCDs with variable brightness backlight regions.
link
Waterluvian 2587 days ago
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.
link
dredmorbius 2587 days ago
https://duckduckgo.com/tty/

https://duckduckgo.com/settings#theme

link
celrod 2587 days ago
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.

link
codedokode 2587 days ago
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.
link
beatgammit 2585 days ago
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.

link
ncmncm 2587 days ago
Conceded.
link
Harvey-Specter 2587 days ago
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#

link
copperx 2587 days ago
You must mean OLED. And no, there are almost no desktop OLED monitors in the wild.
link
jmiskovic 2587 days ago
"LED display" term is commonly used for LCD displays where backlight is also actively controlled to increase dynamic range.
link
wlesieutre 2587 days ago
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.
link
ncmncm 2587 days ago
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.

link
usrusr 2587 days ago
There is nothing deceptive about LED backlit LCDs, they are an important upgrade over CFL backlit LCDs.
link
rstat1 2587 days ago
I've seen a fair few TVs with LED backlit screens, advertised as LED displays. Which what I think was meant by "deceptively labeled"
link
rehemiau 2587 days ago
LCD displays where backlight is actively controlled probably still draw more power when displaying black than white
link
ncmncm 2587 days ago
They are not uncommon on laptops, and quite common on phones. And, I have a couple on my desk at the office.
link
arthurfm 2586 days ago
> 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

link
saagarjha 2587 days ago
Is there a way to test a specific color scheme from the web inspector instead of having to change the system appearance?
link
callahad 2587 days ago
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

link
alanh 2587 days ago
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/
link
modzu 2587 days ago
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 :)

link
lostmsu 2587 days ago
I am using Dark Reader extension. It is available for both Firefox and Chrome. Has advanced settings, like grayscale, contrast, etc.
link
blitmap 2587 days ago
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)

link
noisem4ker 2587 days ago
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.
link
marshray 2587 days ago
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.

link
blitmap 2586 days ago
I contend that while everything about the client cannot be hidden from the server, the number of things that can be identified is increasing.
link
rugk 2587 days ago
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...

link
bhauer 2587 days ago
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/

link
buildzr 2587 days ago
> 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.

link
simongr3dal 2587 days ago
They have a dark mode but it’s activated with a toggle in the interface, and not with the prefers-color-scheme media query.
link
buildzr 2587 days ago
If you look here, it does show "manual toggle" sites too: https://zimbatm.com/DarkMode#websites
link
nerdponx 2587 days ago
I'll be interested to see all the clever ways this will be used to fingerprint users and browsers.
link
saagarjha 2587 days ago
Interestingly that page doesn't support prefers-color-scheme itself ;)
link
geekles 2587 days ago
The new Microsoft Edge has prefers-color-scheme as well.
link
saagarjha 2587 days ago
But Chrome itself doesn't, interestingly?
link
callahad 2587 days ago
Looks likely to ship with Chrome 76, which I believe is the current dev channel: https://www.chromestatus.com/features/5109758977638400
link
fastball 2587 days ago
Chrome has it in their dev build (Chrome Canary).

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

link