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

121–130 of 191 posts

Re: Dark mode in a website with CSS

#121

Post by least »

kristofferR wrote: post #41

The two best Dark Mode extensions just implemented automatic Dark Mode support (so the web goes dark automatically when Dark Mode is enabled) :D https://github.com/darkreader/darkreader https://github.com/openstyles/stylus (not built into release yet)

I like DarkReader, but it's been a huge exercise in patience seeing Firefox and Chrome getting all the updates, while the paid Safari version languishes.

By the extension author's own admission [1], the majority of the revenue comes from the Safari extension, but he still prioritizes the (I imagine) larger user base of the firfox and chrome extensions. It's frustrating, to say the least.

[1] https://github.com/darkreader/darkreader/issues/1205#issueco...

Re: Dark mode in a website with CSS

#122

Post by seansta »

baroffoos wrote: post #82
jgtrosh wrote: post #56

Earlier quoted context omitted.

The problem is very simple: if you have diagrams with black lines on transparent background it doesn't work with dark background. Many colour choices we do make less sense for dark backgrounds than for light ones. The comment above properly describes the breadth of real problems you might face.

The easy option is to just put a white background behind the diagrams. It might not be as pretty as having the image designed right for a black background but its better than that hack.

+1

Re: Dark mode in a website with CSS

#123

Post by DoreenMichele »

saagarjha wrote: post #117
DoreenMichele wrote: post #116

Earlier quoted context omitted.

Contrived: deliberately created rather than arising naturally or spontaneously. Synonym: deliberate created or arranged in a way that seems artificial and unrealistic. Synonym: forced ---- People can do anything they want with their websites. I'm not anyone who sets global policy on what your website should do. But there's nothing contrived about the comment. It's an unplanned, spontaneous thought based on first-hand…

I'm aware of that, but images on a website being desaturated or having a dark background doesn't seem like it would help. (I do agree with your appeal to those who are sensitive to bright lights, FWIW. It's just that this one sounds like a bit of a reach.)

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 was especially true for tablets with a large screen.

I don't have (anec)data specific to dark mode on websites and power usage. I just know that using our devices carefully was the difference being kept occupied for three or four hours until we could sleep or running out after an hour and having nothing to do but talk, which is not a stealthy activity.

Re: Dark mode in a website with CSS

#124

Post by etaioinshrdlu »

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…

You don't have to do any of those things. In fact the a good strategy is to use as little CSS and JS as possible and things will mostly just work, now and in the future, for all users.

Re: Dark mode in a website with CSS

#125

Post by ehsankia »

kristofferR wrote: post #65
ehsankia wrote: post #30

Earlier quoted context omitted.

I use the following: https://userstyles.org/styles/113994/hacker-news-dark Works great.

I've put an updated version here. This updated version is an UserCSS, which means it can be automatically enabled/disabled based on system Dark Mode setting. https://raw.githubusercontent.com/kristofferR/userstyles/mas...

Awesome, and I see you fixed the vote button colors.

Re: Dark mode in a website with CSS

#127

Post by jetako »

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…

No need for dark mode if the canonical design is dark. I wish this was more prevalent.

Re: Dark mode in a website with CSS

#128

Post by __MatrixMan__ »

greggman2 wrote: post #19

I recently added dark-mode support to a few sites. It took way more time then I thought it would. At first I thought "oh just add a few lines off CSS" but then ... * Some diagrams had white backgrounds Solution: remove the backgrounds so they are transparent * Most diagrams had black lines/arrows which didn't look good on dark gray backgrounds Solution: use CSS filter:invert for images * Some images are photos not di…

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 used as cues for something else (like test coverage or something from source control).

Ok, maybe doing UI's would be fun after all.

Re: Dark mode in a website with CSS

#129

Post by greggman2 »

jacobolus wrote: post #105
greggman2 wrote: post #19

I recently added dark-mode support to a few sites. It took way more time then I thought it would. At first I thought "oh just add a few lines off CSS" but then ... * Some diagrams had white backgrounds Solution: remove the backgrounds so they are transparent * Most diagrams had black lines/arrows which didn't look good on dark gray backgrounds Solution: use CSS filter:invert for images * Some images are photos not di…

> Solution: use CSS filter:invert for images > Solution: filter: invert(1) hue-rotate(180deg); This might be nominally acceptable, but it’s going to be pretty mediocre. Both of these methods dramatically distort color relationships from the original. Getting someone to explicitly pick colors that work in dark mode will yield much better results. (Of course, takes a lot more manual work by an expert, instead of a few…

A agree 100% but didn't want to have to manually remake 150+ diagrams

Re: Dark mode in a website with CSS

#130

Post by greggman2 »

baroffoos wrote: post #82
jgtrosh wrote: post #56

Earlier quoted context omitted.

The problem is very simple: if you have diagrams with black lines on transparent background it doesn't work with dark background. Many colour choices we do make less sense for dark backgrounds than for light ones. The comment above properly describes the breadth of real problems you might face.

The easy option is to just put a white background behind the diagrams. It might not be as pretty as having the image designed right for a black background but its better than that hack.

I would have thought so to but looking at the white background digrams on the dark pages was a horrible experience. It pretty much defeated the entire purpose of having a dark mode as there was these bright white diagrams shining in my eyes.

Which is better you can compare

Here's before dark mode

https://codepen.io/greggman/full/vYYOxjd

Here's leaving the backgrounds to the diagrams white

https://codepen.io/greggman/full/zYYGZWB

And here's the hue rotated solution

https://codepen.io/greggman/full/abbOJYB

The ideal solution would be to make all the diagrams twice but that's a ton of work if your site has lots of diagrams. Of course it's all an opinion. I don't have time to redo all the diagrams or go make them CSS styled indivdually so this is the solution I chose for now.

Post reply on HN