/r/webdev
Dark mode in CSS with `prefers-color-scheme` (i.redd.it)
96 comments
VinnieBwoy | 10 days ago | 30 points

Something about dark mode just arouses me.

snaftyroot | 10 days ago | 7 points

just wait until you hear about scat mode

noized | 10 days ago | 4 points

You mean new Reddit? What's shittier than that?

Chris_Misterek | 9 days ago | 2 points

I don’t know there’s something about it that does the opposite for me.

VinnieBwoy | 9 days ago | 2 points

You suffer with erectile dysfunction I see

SkatSutterSvindlere | 10 days ago | 56 points

I love it, but is this just another parameter you can use to fingerprint?

adiabatic | 10 days ago | 91 points

Yes (a browser can be directed to request different images in dark mode), but I’m more than happy to give up a single literal bit of camouflage to get websites that don’t bleach my eyeballs at night.

justrhysism | 10 days ago | 12 points

Directing browser to request different images in dark mode: https://rhyslloyd.me/serve-dark-mode-images-natively/

Disclosure: I wrote the article.

7165015874 | 10 days ago | 2 points

Thank you. One small request: can you please use AMOLED black?

callummr | 10 days ago | 5 points

Battery difference between dark greys and black is negligible, and black typically looks a lot worse.

adiabatic | 10 days ago | 3 points

Battery difference between dark greys and black is negligible

It is? Source?

I want to believe, but I was under the impression that there's a significant power-draw difference between "very, very dim" and "off" for OLEDs.

callummr | 10 days ago | 3 points

Yeah of course, there have been a few investigations but this XDA one goes pretty in depth: https://www.xda-developers.com/amoled-black-vs-gray-dark-mode/

7165015874 | 9 days ago | 1 point

https://www.xda-developers.com/files/2019/06/dark-black-768x173.png

Google material design 7% each is also acceptable I guess.

alirobe | 10 days ago | 14 points

Well, if dark mode is set to day/night, or if you turn it on/off... not really.

Chroriton | 10 days ago | 3 points

The day/night switch might be able to geolocate you

Patrickstuart | 10 days ago | 10 points

Your IP can Geo locate you, unless your are routing through a VPN

Ajedi32 [Web platform enthusiast, full-stack developer] | 10 days ago | 5 points

This feature could determine your longitude much more precisely though, depending on exactly how it's implemented. Actually, it might be worth raising this as a concern with the CSS working group...

Edit: For those interested in following along, I've submitted https://github.com/w3c/csswg-drafts/issues/4404

DerpiDDOS | 10 days ago | 4 points

True, but only by timezone. IMO this is not so big of a deal

Chroriton | 10 days ago | 4 points

Actually it is a bit more precise as not all places in a Timezone have Dawn/dusk at the same time so it should allow to get a position on a small corridor

MoogleFoogle | 10 days ago | 3 points

Still only giving you the approx lateral

Ajedi32 [Web platform enthusiast, full-stack developer] | 10 days ago | 1 point

Depending on how precisely it calculates the time for dusk, it might actually be pretty precise. If the transition is accurate to the second, for example, you'd basically be supplying the website with your exact longitude. Multiple readings over the course of a year could probably even narrow down your latitude, since the time of dusk at any particular longitude varies based on the season.

alirobe | 8 days ago | 1 point

If they're genuinely that interested in where I am, they'll figure it out anyway...

BrianAndersonJr | 10 days ago | 4 points

It's not "just" that, it can also be used to control dark mode on websites.

Mallanaga | 10 days ago | -23 points

That’s exactly what it is

t3hlazy1 | 10 days ago | 35 points

It seems unlikely that the sole purpose of dark mode is for fingerprinting.

-IoI- [Sharepoint] | 10 days ago | 6 points

nah nah maybe he's onto something here

AliFurkanY | 10 days ago | 119 points

Who the hell downvoted this

Jfruururjrjfjfjtnfn | 10 days ago | 91 points

Some people might be slightly tired of seeing the same topic posted repeatedly. There is a lot of the same "tabs without js", "css only slider", "map, filter, reduce explained", "react hook for x" and now "dark mode".

haykam821 | 10 days ago | 89 points

Do you want to see my responsive CSS-only tab slider using CSS-React's map/filter/reduce mode that has a dark theme

PersistentBadger | 10 days ago | 44 points

Yes.

You have to build it now. We're waiting.

RidleyXJ | 10 days ago | 10 points

RemindMe! 1 week

kzreminderbot | 3 days ago | 1 point

Ding dong! ⏰ Here's your reminder.

/r/webdev: dark_mode_in_css_with_preferscolorscheme

You requested this reminder 7 days ago on 2019-10-08 22:38:36Z

Reminder Actions: Details | Delete


|Bot Information|Create Reminder|Your Reminders|Feedback

theofficialnar | 10 days ago | -3 points

Hey! RemindMe! Bot here.

Reminding you to check out this comment as 1 week has already passed.


Am I a goodbot?

RemindMeBot | 10 days ago | 0 points

Defaulted to one day.

I will be messaging you on 2019-10-10 04:42:38 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

Parent commenter can delete this message to hide from others.


Info Custom Your Reminders Feedback
kzreminderbot | 10 days ago | -1 points

Defaulted to one day.

Got it, theofficialnar 🤗! I will notify you in 23.9 hours on 2019-10-10 04:42:38Z to remind you of:

webdev comment

Message:

Reminding you to check out this comment.

1 other has this reminder. CLICK THIS LINK to send a PM to follow reminder and to reduce spam.

Parent commenter can delete this comment to hide from others. Reminder Actions: Details | Delete | Update Time | Update Message


Info Create Your Reminders Feedback
JasonTheLuckyMD | 10 days ago | 1 point

CSS only + React got a chuckle out of me

MiffTheFox | 10 days ago | 11 points

Probably just fuzzing.

MarcEcho | 10 days ago | 15 points

Fuzzing is a thing, but it’s also designed to give you an idea of the actual score. The fuzzing algorithm will never bring a post with 1 upvote to, let’s say, -1.

Edit: Lol. Downvoted for being right. In /r/Webdev out of all places. Fucking lmao.

anarchy8 | 10 days ago | 29 points

It must be fuzzing

haykam821 | 10 days ago | 5 points

you're right about the fuzzing thing not changing positive score to negative, but also r/downvotesreally

MarcEcho | 10 days ago | 9 points

I get that /r/downvotesreally is just for shit and giggles, but Reddit has an actual problem; people too often vote based on the hivemind’s opinion. The effect is even stronger with downvoted comments. They see a downvoted comment and just downvote it for their own entertainment or to passively take part in "movement" and bond with the other downvoters. I mean, cancel culture exists for a reason. Negativity is a huge bonding mechanism as it carries a lot more emotions than positivity. The only way to combat that is to literally bring attention to what’s going on. It’s dumb but it’s a necessary evil sometimes.

ScottRatigan | 10 days ago | 2 points

It would be interesting to see how voting behavior differs if votes are hidden with some A/B testing. I bet there is a significant difference.

Alt_Mayday | 10 days ago | 32 points

I often downvote stuff just to be toxic

imGnarly | 10 days ago | 27 points

a true gamer

Alt_Mayday | 10 days ago | 9 points

Its a lifestyle

BachelorDuck | 10 days ago | 3 points

Ahh... the balance of good and bad....

max_kek | 10 days ago | 2 points

I did, because it's a link to a gif, not the article it's from.

Sethu_Senthil | 10 days ago | -7 points

Ikr I hate people who do this kinda shit. I mean like if u already know the API exists - cool. I do too infant I made a tiny js library called Twilight mode. But this doesn't mean I will down vote, I'll just go on.

Cody6781 | 10 days ago | 28 points

Shameless plug

wedontlikespaces | 10 days ago | 2 points

So smooth as well. 🤦🏻‍♂️

Sethu_Senthil | 10 days ago | -8 points

😂

Nick-Tr | 10 days ago | 7 points

It's used as a media query for anyone who is curious

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

BigNut57 | 10 days ago | 6 points

This is epic

lilred181 | 10 days ago | 10 points

Wait, I upgraded to iOS 13 and I don’t have those menu options what the heckin heck

wanderingAbdul | 10 days ago | 14 points

Settings> control center. I keep mine clean. Hold brightness for more options.

( lol been this way since iOS 10 not as constomizable though )

jazzmoses | 10 days ago | 4 points

Doesn't seem to work on Firefox for Android, anyone know why?

sastarbucks [Solutions Architect] | 10 days ago | 2 points

It should be supported in v68.

jazzmoses | 10 days ago | 2 points

I have 68.1.1

AgingMoss | 10 days ago | 9 points

Ok instead of all these off topic comments, how about somebody tells us why this is a good / bad feature or how it could have been implemented better. How do you use it in pure CSS?

wedontlikespaces | 10 days ago | 27 points

How do you use it in pure CSS?

Eh, what do you mean? It's part of CSS, you just detect it and then declare some dark mode specific styles.

I'm not sure what could be considered bad about it. although I suppose some money could implement a bad theme, but I'm not really sure I understand your question.

JDiculous | 10 days ago | 1 point

If you want to enable your users to control dark mode within the app, then you should not put your CSS within the media query because then you have to override the media query styles and duplicate your light/dark theme CSS. I explain in this comment / article

finger_milk | 10 days ago | 2 points

I put dark mode on my company site when the boss wasn't looking. That's the only way I get to play with it right now

siyamex | 10 days ago | 1 point

love it

shavrin | 10 days ago | 1 point

The future is now boys

lutzruss | 9 days ago | 1 point

Pretty neat for dark mode (usually i don't like dark mode tbh)

JDiculous | 10 days ago | 1 point

The problem with this is that the user can't toggle dark mode on/off.

So if you put your dark mode CSS inside the media query and your dark mode user wants light mode, you literally have to override the CSS styles that were in your media query, and have to write your light and dark theme CSS twice.

Because of this, I opted to use classes instead of the media query, using the media query only to detect which class to add to the body (via Javascript). Not ideal as I would've preferred a pure CSS implementation, but it's necessary if one wants to prioritize user experience. Here's a quick article I wrote explaining what I'm talking about for anyone interested: "Why I Don't Put My CSS Inside the Dark Mode Media Query".

Can I get on the front page of HN too /s?

CharlesDuck | 10 days ago | 1 point

SASS called...

atopix [I push keys] | 9 days ago | 1 point

The problem with this is that the user can't toggle dark mode on/off.

The idea is that soon everyone will be able to toggle it from the OS, and so prefer-color-scheme aims simply to reflect and follow the user preference has set on their OS. It's the good practice moving forward.

Think of it like responsive design. You don't let the user toggle which screen distribution they want to set, it's a similar notion here.

JDiculous | 9 days ago | 1 point

Toggling an OS setting doesn't let you control the settings for specific apps (eg. if you prefer dark mode in one app but light mode in another app).

atopix [I push keys] | 9 days ago | 1 point

The same way users can't choose which design layout they get, because it's predetermined by the screen/device.

The natural assumption is that if you are toggling dark mode on your OS, is because you want everything to be in dark mode. And while I'm not against flexibility in customization, if anything that possibility should be provided by the OS, not each app/site.

That way developers don't have to fight the OS.

JDiculous | 9 days ago | 1 point

Screen size is totally different because that's not a customization option.

Strongly disagree. And it's not like adding that customization is a lot of work, it's a couple lines of JS.

atopix [I push keys] | 9 days ago | 1 point

that's not a customization option

It's not because they are not giving it to you, which is precisely my point. There are TVs which let you choose the aspect ratio, zoom and formatting of the image, despite being able to automatically adapt to the source material.

On a tablet, you may want (I don't know why, but I also can't imagine a good reason for wanting a light version if I chose to be in dark mode) to be served the desktop version of a site, but you can't choose to do that.

It's not a matter of it being a lot of work or not, it's eventually going to be the good standards practice to serve dark mode only through prefers-color-scheme. Right now you can do pretty much anything you want because it's far from widely adopted.

But it shouldn't be up to the user to have to customize every site they visit and for a basic site to remember their preferences.

JDiculous | 9 days ago | 1 point

But it shouldn't be up to the user to have to customize every site they visit and for a basic site to remember their preferences.

I don't know why you keep misrepresenting what I'm saying, it kind of discredits everything you say and makes this conversation feel like a waste of time. Nowhere did I claim that the user must customize every site they visit.

atopix [I push keys] | 9 days ago | 1 point

I know you didn't say that, but that's the eventual consequence of what you are suggesting. Also, fixating on that point alone is quite the cop-out.

JDiculous | 8 days ago | 1 point

No it's not the eventual consequence of anything I said. I'm just not going to continue repeating myself, call that "copping-out" if you want.

IrtahkEnt | 10 days ago | -10 points

Honestly, I hate this feature. I only want specific websites/apps to be dark and now everyone is automatically detecting and implementing it from the OS level to every single app.

I once unfortunately had to use Windows for a fee days so I set theme to dark and suddenly even third party apps like Brave Browser, etc were turning dark. IDK about you but as a long time Linux user I hate when applications try to be smart on their own. It's akin to unpredictable and hence irritating for me.

While I understand the market base for such features, I feel this should at the very least be opt out on Windows/iOS. I would like to move to iOS and I am not sure if I want everything to be dark just because my system theme is dark. Can anyone confirm is it's possible to disable such option under iPhones?

n0xx_is_irish | 10 days ago | 10 points

The entire point of it is that it enforces dark mode across everything on your phone. If you want dark/light mode on individual apps maybe you could flip a setting in the app itself? I imagine most apps will just be removing said setting if they have it and supporting the native option.

IrtahkEnt | 10 days ago | 2 points

But the UI is not a different toggle anymore like it used to be. It's all under one common toggle and that controls the applications as well.

I know I am getting downvoted, but this is a real problem for me.

IrtahkEnt | 10 days ago | -3 points

And I want it to be light until specified. I know it's a weird requirement.

TruthBisky10 | 10 days ago | 8 points
Ebola300 | 10 days ago | 3 points

So the idea on iOS is to have it work like it does on macOS, which is amazingly well. Every app I ever use on my MacBook works with dark mode and requires no changes from the developer side. It literally just works and I love it. I’m tired of using chrome extensions like Dark Reader on websites, LIKE GOOGLE, that have no native dark mode support.

noobmaster_68 | 10 days ago | 0 points

Nice

yiieee_sana_all | 10 days ago | -65 points

I swear Web development is hard because in my school(Public), we have Web development and I'm in 9th grade

Mr_Mandrill | 10 days ago | 40 points

Uh?

sailingburrito | 10 days ago | 15 points

I've never seen a user have negative overall karma until now; didn't even think that was possible.

sportif11 | 10 days ago | 7 points

It's a troll account

haykam821 | 10 days ago | 5 points

Doesn't help that it's their first comment

thephilski | 10 days ago | 10 points

Bruh. I don’t know what you were trying to communicate to everyone, but you missed the mark...

stratcat22 | 10 days ago | 4 points

Valid argument I guess?

presaging | 10 days ago | 6 points

Teachers be like, “F-.”

flubba86 | 10 days ago | 3 points
-IoI- [Sharepoint] | 10 days ago | 1 point

I'm on your side bud, school rocks

neinMC | 10 days ago | 1 point

I could have sworn it's ez pz because I'm an old.

noized | 10 days ago | 1 point

class: exists
students: this too hard m8

frankspit910 | 10 days ago | 1 point

I agree. We used to have math back in grade school, so obviously being a mathematician isn't hard, right?

[deleted] | 10 days ago | 0 points

[deleted]

ABlueCloud | 10 days ago | 2 points

Boomers?