Dark mode in a website with CSS • Hacker News Board

Re: Dark mode in a website with CSS

#31

Post by zamadatix » Tue, Oct 08, 2019, 8:32 PM UTC

Y-bar wrote: post #5

I’m probably not representative of the general dark mode user, I think, but I enable dark mode because I want the UI chrome out of the way to concentrate on the content. I don’t want dark content. Is there a way to disable this media query?

In Firefox you can add "ui.systemUsesDarkTheme" as an integer in about:config and set it to "0" for forced light or "1" for forced dark. This setting changes what is reported by the media query, you can still set your OS and/or browser theme independently. You will need to restart Firefox to apply the setting.

Re: Dark mode in a website with CSS

#32

Post by degenerate » Tue, Oct 08, 2019, 8:33 PM UTC

Y-bar wrote: post #5

I’m probably not representative of the general dark mode user, I think, but I enable dark mode because I want the UI chrome out of the way to concentrate on the content. I don’t want dark content. Is there a way to disable this media query?

If you just want chrome to be dark, you can install a dark theme such as: https://chrome.google.com/webstore/detail/just-black/aghfnjk...

Re: Dark mode in a website with CSS

#33

Post by p7IDD243 » Tue, Oct 08, 2019, 8:36 PM UTC

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: remove the backgrounds so they are transparent

This sucks when you want then share the diagram with someone, on certain platforms the diagram will be unreadable due to the lack of contrasting background.

Re: Dark mode in a website with CSS

#34

Post by louismerlin » Tue, Oct 08, 2019, 8:38 PM UTC

I baked dark mode into my css microframework [0], and it's always so satisfying to see people using it !

I didn't do the "dimmer images" thing, but I'll try it sometimes.

[0] https://concrete.style

Re: Dark mode in a website with CSS

#35

Post by pspeter3 » Tue, Oct 08, 2019, 8:39 PM UTC

louismerlin wrote: post #34

I baked dark mode into my css microframework [0], and it's always so satisfying to see people using it ! I didn't do the "dimmer images" thing, but I'll try it sometimes. [0] https://concrete.style

That's a great micro framework

Re: Dark mode in a website with CSS

#36

Post by skunkworker » Tue, Oct 08, 2019, 8:42 PM UTC

_bxg1 wrote: post #27

skunkworker wrote: post #24

Earlier quoted context omitted.

I currently use 'DARK READER' for hacker news and it works quite well using the 'Filter+' theme engine.

The problem with browser extensions is that they're a massive security risk.

On some sites I've used it to get a good baseline then export the CSS and modify it from there.

Re: Dark mode in a website with CSS

#37

Post by pspeter3 » Tue, Oct 08, 2019, 8:43 PM UTC

cbsks wrote: post #16

Now if only Hacker News would implement it!

I wish Hacker News had better mobile CSS in general.

Re: Dark mode in a website with CSS

#38

Post by crazygringo » Tue, Oct 08, 2019, 8:47 PM UTC

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: hover/click/drag vs tap/hold/swipe

- 2 modes for accessibility: full visual+audio vs screenreader/captioned

- And now 2 visual modes: light vs dark

That's 48 combinations to design and test for. I'm probably forgetting some too. But as a developer it makes just the baseline cost of any basic app so damned high.

Again, as a user I love it. But the entrance cost for entrepreneurs, or even hobbyists? Man oh man.

Re: Dark mode in a website with CSS

#39

Post by _bxg1 » Tue, Oct 08, 2019, 8:49 PM UTC

skunkworker wrote: post #36

_bxg1 wrote: post #27

Earlier quoted context omitted.

The problem with browser extensions is that they're a massive security risk.

On some sites I've used it to get a good baseline then export the CSS and modify it from there.

How do you get your browser to even load custom CSS without an extension?

Re: Dark mode in a website with CSS

#40

Post by defanor » Tue, Oct 08, 2019, 8:50 PM UTC

saagarjha wrote: post #7

> Photographs also looked harsh. It turns out that many people prefer images, too, to be desaturated in dark mode This is an interesting choice. While it might be easier on the eyes, personally it feels kind of icky to change colors on images…

Some global CSS themes change them, but then restore original ones on hover. Not perfect, but generally fine.

Though regular photos (and videos) are rarely so bright that it hurts the eyes while in a dark environment, unlike diagrams and other kinds of drawings, which can easily be mostly white.