Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Dark mode in a website with CSS

tombrow.com

Post reply on HN
Print view View original

161–170 of 191 posts

Re: Dark mode in a website with CSS

#161

Post by adossi »

jfengel wrote: post #160

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…

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.

Re: Dark mode in a website with CSS

#162

Post by WiseWeasel »

JDiculous wrote: post #150
WiseWeasel wrote: post #107

Earlier quoted context omitted.

To me it seems like now that all browsers support the prefers-color-scheme media query, it’s no longer a best practice to allow/force users to toggle between light and dark theme separately from the OS. Centralization of config is a good thing, freeing people from rote work.

I strongly disagree. Users should be able to control their preferences by application, and not be locked into an OS setting. My suggestion of still using classes doesn't eliminate centralization of config, it just means moving the dark mode CSS outside of the media query and into a class, and adding a couple lines of Javascript.

What I’m hearing is, “My precious snowflake app is so important, users must manage its appearance independently of the OS.” Once you allow the possibility of a different app setting, you effectively require them to continue managing it separately. You can’t respect both OS- and app-level settings, so you're going to ignore the OS.

If your app really just has light and dark theme choices, you should get rid of the toggle and move all your dark class styles into the prefers-color-scheme:dark media query instead.

Re: Dark mode in a website with CSS

#163

Post by jordanmiguel »

CaptainMarvel wrote: post #142
jordanmiguel wrote: post #86

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

How would you do that?

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

Re: Dark mode in a website with CSS

#164

Post by JDiculous »

JDiculous wrote: post #89

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

EDIT: Just wrote a quick article elaborating/demoing what I'm talking about: https://www.jbernier.com/dark-mode/

Also I made a small mistake in the code there, it's `isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches`

Re: Dark mode in a website with CSS

#165

Post by toastal »

fastball wrote: post #98
JDiculous wrote: post #89

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

Is there anything which allows user choice (i.e. state) that doesn't involve JS?

There's also alternative style sheets (https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative...), that can support the media queries on the tags, but I think Firefox is the only browser still exposing the ability to switch the styles, and it sadly don't persist between sessions or even a page navigation/refresh.

Re: Dark mode in a website with CSS

#166

Post by ken »

laughinghan wrote: post #52
crazygringo wrote: post #38

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: hov…

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 bar…

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

Re: Dark mode in a website with CSS

#167

Post by JDiculous »

WiseWeasel wrote: post #162
JDiculous wrote: post #150

Earlier quoted context omitted.

I strongly disagree. Users should be able to control their preferences by application, and not be locked into an OS setting. My suggestion of still using classes doesn't eliminate centralization of config, it just means moving the dark mode CSS outside of the media query and into a class, and adding a couple lines of Javascript.

What I’m hearing is, “My precious snowflake app is so important, users must manage its appearance independently of the OS.” Once you allow the possibility of a different app setting, you effectively require them to continue managing it separately. You can’t respect both OS- and app-level settings, so you're going to ignore the OS. If your app really just has light and dark theme choices, you should get rid of the tog…

Uh, no. What you're saying is "My user should not be allowed to customize the appearance of their application."

You want the user to have less freedom? Great, good luck with your app development, but I sure hope you're not in charge of developing anything I use.

Also if you read my original comment you would've seen that I am still reading the OS setting. The difference is that rather than locking the user into their OS's setting, I default to the OS's setting and give the user the freedom to change it as they see fit.

Re: Dark mode in a website with CSS

#168

Post by WiseWeasel »

JDiculous wrote: post #167
WiseWeasel wrote: post #162

Earlier quoted context omitted.

What I’m hearing is, “My precious snowflake app is so important, users must manage its appearance independently of the OS.” Once you allow the possibility of a different app setting, you effectively require them to continue managing it separately. You can’t respect both OS- and app-level settings, so you're going to ignore the OS. If your app really just has light and dark theme choices, you should get rid of the tog…

Uh, no. What you're saying is "My user should not be allowed to customize the appearance of their application." You want the user to have less freedom? Great, good luck with your app development, but I sure hope you're not in charge of developing anything I use. Also if you read my original comment you would've seen that I am still reading the OS setting. The difference is that rather than locking the user into their…

How is that going to work? User arrives at site, OS is set to dark, site is toggled to dark, so far, so good (assuming the toggle is smart enough to be set appropriately at this point).

1) User toggles OS to light, is your site going to switch back?

2) User toggles site to light, and back to dark to see what that does, now there's a persisted app setting. User later realizes they don’t like dark, toggles OS to light, and then has to think about your app's unique way of toggling it back.

To me, that's just unwieldy for very little gain. Why would I want your app to be inconsistent with everything else, other than a poorly executed dark mode?

While there’s a good chance you won't be using my current apps, I’m confident I won’t be the only one to reach a similar conclusion, so you'll likely have to get used to the behavior.

Re: Dark mode in a website with CSS

#169

Post by danjac »

DoreenMichele wrote: post #157
danjac wrote: post #156

Earlier quoted context omitted.

What about browser addons like Dark Reader? Would that make more sense than relying on thousands of sites to have a reliable dark mode (when the vast majority won't support any kind of dark mode anyway)?

I was internet acquainted for a time with someone suffering chronic migraines. She said she could not do anything with browsers most of the time and switching her phone to dark mode was a problem because it just flipped the colors for everything. She spent her time on Twitter because it has a terrific dark mode. She couldn't get other things to work for her. So people who are very photophobic are apparently not findi…

Sure. I'm wondering whether something like Dark Reader - i.e. an addon or even as a standard browser feature - might be more helpful to people who genuinely need dark mode everywhere, rather than trying to persuade thousands of site owners and designers to individually provide some kind of dark styling (and as is apparent in the thread, not doing so perfectly, e.g. with images).

Re: Dark mode in a website with CSS

#170

Post by vorpalhex »

z3t4 wrote: post #139
crazygringo wrote: post #38

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: hov…

The trick is to make the base as simple as possible. A static page, no items hidden behind mouse clicks or hovers. Good contrast between text and background, make sure text is resize-able. No fancy div's or nested table's for layout - so the text can flow freely and adapt to any screen size. Only problem - that is not what the market wants. Client: "why did you not implement the scrollbar-hijack/moving-blinking-text!…

Is it even a website if the videos don't autoplay and follow you, there aren't at least two modals urging you to subscribe to a newsletter, and at least one Amazon referral link?
Post reply on HN