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

181–190 of 191 posts

Re: Dark mode in a website with CSS

#181

Post by jfengel »

teaspoon wrote: post #177
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…

There's a good discussion of "why dark mode" in the article that mine links to: https://web.dev/prefers-color-scheme#why-dark-mode

Thank you.

Re: Dark mode in a website with CSS

#182

Post by LocalH »

WiseWeasel wrote: post #168
JDiculous wrote: post #167

Earlier quoted context omitted.

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

Your name here seems quite appropriate, as that was a weasel tactic, rephrasing the opponent's words to modify their intent. Not to mention you also used a quite inflammatory tone towards someone who's strongest words were "I strongly disagree".

I never saw any assertion that the user must manage apps individually, only that they should be able to. Easy way to do that - by default, the app echoes the system setting. If and only if the user manually changes the setting, does it diverge from that. Somewhat simple way around having a persistent setting get stuck - if the user switches back from the opposite mode, then you go back into "system" mode. So really, instead of needing two toggles, you would have one that has two states - "Respect system setting" and "Use the opposite mode from the system" (which probably need to be worded way better). The only snafu there that I can think of, off the top of my head, would be that if the user changes the system setting, the app state would likewise change.

It's also completely valid if someone doesn't wish to use system-wide dark mode (say, due to specific applications they use that may not function or render correctly in dark mode) but yet wishes to have specific apps in dark mode. I run Windows, which does have a dark mode nowadays, but that only works for certain apps that specifically use it (Windows Explorer does, not that I use that, along with many of the "modern" style apps that ship with Windows), and yet in apps like Discord I still prefer to use the dark mode, and I also have a dark mode extension for my browser.

For what it's worth, the site did correctly detect my dark mode setting in Windows, and display the dark style. As well, I don't necessarily disagree with any developer that does wish to exclusively use the system setting. However, I do see room for both approaches.

Re: Dark mode in a website with CSS

#183

Post by WiseWeasel »

WiseWeasel wrote: post #168
JDiculous wrote: post #167

Earlier quoted context omitted.

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

After some more thought, I’ve realized that should you want to allow but never force a user to manage appearance separately, you could give the toggle three options, ‘System setting’ (default), ‘Light’, ‘Dark’.

Re: Dark mode in a website with CSS

#184

Post by cerberusss »

qplex wrote: post #145
DoreenMichele wrote: post #123

Earlier quoted context omitted.

If you are illegally camped in a dark field and your phone, tablet or laptop is the only source of light, bright white images emit much more light that can give away your position than dark ones. IIRC, the two primary things we did to conserve battery power were 1. Avoid certain games and 2. Turn down screen brightness. In ordinary usage, the screen on our tablets was typically the biggest drain on the battery. This…

"As an example, one commercial QVGA OLED display consumes 0.3 watts while showing white text on a black background, but more than 0.7 watts showing black text on a white background, while an LCD may consume only a constant 0.35 watts regardless of what is being shown on screen." https://en.m.wikipedia.org/wiki/AMOLED

The citation was from 2009. I expect, or rather hope, that things have improved. Interesting link, by the way, and very useful to add to the discussion.

Re: Dark mode in a website with CSS

#185

Post by cerberusss »

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…

I don't think it's a problem; the Wordpress people fix it once in their most popular themes, which then immediately fixes it for 30% of the web.

Re: Dark mode in a website with CSS

#186

Post by stonecrusher »

IAmGraydon wrote: post #57
cbsks wrote: post #16

Now if only Hacker News would implement it!

My wife would be very grateful as I read Hacker News in bed every night and it lights the whole room up with all its white pixels.

Install Stylus https://github.com/openstyles/stylus/ (and fall in love with it), then install a style (e.g. https://userstyles.org/styles/97106/ ) or write your own.

Re: Dark mode in a website with CSS

#187

Post by uncheckederror »

saagarjha wrote: post #11
uncheckederror wrote: post #9

Earlier quoted context omitted.

I've been using it for a few months on my personal site as well. It defaults to the light version and then switches to the dark them on request. This is so people who don't care or aren't good with computers get the light version and those that can set the system theme have the option of getting the dark version. https://thomasryan.xyz/

FWIW, your Posts/Demo/Resume links are laid out a bit oddly on my iPad.

Thanks for pointing this out!

I borrowed a coworker's iPad at lunch and fixed this bug.

As best as I can tell Safari wasn't respecting the text-align: right; CSS rule. I've switched to a flexbox layout for those elements.

Re: Dark mode in a website with CSS

#188

Post by signal11 »

WiseWeasel wrote: post #159
signal11 wrote: post #155

Earlier quoted context omitted.

I don't particularly care for dark mode in web pages, however iOS apps which allow theming should allow the themes to be set independently of iOS. For instance, the first version of Tweetbot for iOS 13 wouldn't allow you to choose a dark theme if iOS was set to use a light theme. This was quite frustrating because I like Safari in light mode, but I like Tweetbot, iBooks, Kindle, etc in dark mode. This always has alwa…

Why do you like Safari in light mode, or dislike it in dark mode? Are you referring mostly to the app chrome or to the content of the sites you visit? I would tend towards ease of configuration and consistency, and would only make exceptions for apps/sites with more theme choices than just light/dark.

I suspect it's because the light Chrome looks better to me with most web pages.

Whereas for apps with lots of text (e.g. Kindle etc) dark mode looks better (to me).

Re: Dark mode in a website with CSS

#189

Post by tripzilch »

andy_ppp wrote: post #135
__MatrixMan__ wrote: post #128

Earlier quoted context omitted.

Your comment makes me glad I don't do UI's. But then I'm reminded of a syntax highlighting scheme I wish existed: You'd never define a particular color, just algorithms for taking some input color and deriving each needed color from that one. Then the user can say: "I want this file in blue and this one in orange" and the syntax highlighting still calls out the features in a relative way but the absolute colors are u…

The problem is our brains represent colour in a very weird way and the algorithms I’ve seen for this always look horrible. I guess maybe training a neural net on this might make the results more human!

No, what really helps is picking the right colour space to work in. Which is probably CIE-LAB, being constructed especially for the weird way our brains perceive colour, but still also works mostly correct if you treat it as a linear space.

Re: Dark mode in a website with CSS

#190

Post by tripzilch »

> It's recommended to avoid pure white for text, and I chose likewise to avoid pure black for the background.

This is such nonsense. Pure black is never pure black on a monitor and neither is white. And the link he provides just restates the assertion with no additional reasoning.

See, I get it. If you create work as an artistic statement, you deliberately pick not-quite-blacks/whites because the defaults are not your artistic choices if you just default to them.

However, once you take this as a given rule and you pick some not-quite-white because "it is recommended", that defeats the entire purpose.

Post reply on HN