Comments on: A Complete Guide to Dark Mode on the Web

By: Pollard

Pollard — Mon, 24 Oct 2022 00:38:47 +0000

Well now you’ve done it. Just created a dark theme with switch for a site but I did not know prefers-color-scheme

Also just swapped dark mode browser addon for one that allows custom colors/css.

Now I can have my color scheme set for system/browser dark mode. I can have every website I visit use the same and it just so happens that it’s not to different than my desktop theme in Plasma.

Unification. Just need to remember to turn it off occasionally so I can see what the real world looks like.

By: Funkaholik

Funkaholik — Wed, 24 Aug 2022 19:54:52 +0000

In reply to Charles.

Can you code it down, pls?
So we could switch from device more than once)
Also i’m curious why css-tricks still doesn’t have this feature to let users switch manually..((

By: Aaron Muir Hamilton

Aaron Muir Hamilton — Sun, 21 Aug 2022 06:38:57 +0000

Why doesn’t css-tricks itself respect dark color preference? There are several articles about enabling it here, including some that go into quite some detail, but as of now the main content is a blinding white rectangle.

It’s not that far off either. There could be about 8 lines of CSS in a @media query and it would just work. I have it working pretty well right now with just a couple tweaks in devtools. Replace the .wp-block-column background with a translucent tint, turn off a couple resets, and then you don’t have to do much work at all.

By: Geoff Graham

Geoff Graham — Tue, 16 Aug 2022 13:12:51 +0000

In reply to John. Check that the table’s border isn’t getting set in the HTML itself, then style it up in CSS:

By: John

John — Tue, 16 Aug 2022 12:13:58 +0000

How would I edit a table in dark mode, im trying to get the border of the table to be a different color other than black, but cant seem to get the output I want. Thanks!

By: Mack

Mack — Thu, 11 Aug 2022 06:17:09 +0000

In reply to Charles. The Javascript example does not work because it cannot detect theme change by itself in the way the code is written. The class-toggling part would just run once. To toggle every time theme changes, add the class-toggling code to "onchange" event of object "prefersDarkScheme" as callback and everything would work nicely.

By: om kumar sahu

om kumar sahu — Sun, 12 Jun 2022 10:30:32 +0000

Can you write an article on how the brave browser changes the complete color palette when we switch the force dark mode on?

By: Paul Drewett

Paul Drewett — Fri, 27 May 2022 17:43:30 +0000

In reply to Kel. That is the greatest dark mode I have ever seen :-)

By: Mori

Mori — Sat, 22 Jan 2022 10:31:52 +0000

Pure CSS: https://codepen.io/mori79/pen/ExwqNVv

By: Seb

Seb — Wed, 24 Nov 2021 17:34:43 +0000

I’d like to know this as well Tomás. Messy when you have half a dozen properties, a nightmare when you have 100! There must be a better way…

By: Tomás

Tomás — Tue, 23 Nov 2021 05:35:50 +0000

Is there anyway to avoid duplicating the css code for the media query with: “prefers-color-scheme: dark”?

By: Mark

Mark — Wed, 28 Apr 2021 15:53:13 +0000

Thanks for this, a really excellent article which had everything I needed for my current site build.

By: Orlando Fernando Marconi

Orlando Fernando Marconi — Mon, 19 Apr 2021 04:10:30 +0000

Hey!

Is it possible to detect power saving as well?

There are videos that don’t load when my iphone is in economy mode.

It would be interesting to add a bodyclass when the device is in power saving.

By: Sujin

Sujin — Mon, 12 Apr 2021 07:52:12 +0000

In reply to Kark. What is "FLIC"? I couldn't find what "FLIC" stands for anywhere..

By: Kark

Kark — Tue, 23 Mar 2021 19:02:50 +0000

To prevent that “FLIC” , you could use some kind of transition. I’ve saw that a few weeks ago but can’t remember on what page it was. Still. I think that may be a good solution – as long as the user didn’t turn on reduce-motion…