Dark mode for websites

HTML & CSS
1

Since I went over to the dark side and set dark mode as my display preference in Windows, I have noticed that a few (not many) websites recognise my preference and display in dark mode.

I have since been playing around with @media (prefers-color-scheme: dark) on some of my own sites, but does anyone use this for their websites?

1 Like
2

Well now that I know it exists… :slight_smile:

I’m using css variables in :root{} for all my color definitions, but it looks like CSS doesn’t allow something like:

@media (prefers-color-scheme: dark)
	{
	:root	{
			/* ---- Colors ---- */
		    --font-color:#DDD; 					/* Default font color */
			--body-background-color:#666;		/* Background behind page */
			}
	}

Are you coding the colors directly onto CSS properties? That’s the only way I can get it to work, which would be seriously cumbersome in a large site, it seems.

3

root might not work but data attributes will, and you can use html instead of the root, and it should work about the same…

4

It does work, but he doesn’t have a connection to the media query method that Gandalf mentioned above, getting the light/dark from the Windows setting. He just does it via a user button selection of light or dark, setting the data attribute via JS. His method would conceptually require a user to click a light/dark button on every browser tab, and every time a page was brought up. That is, unless I’m reading it wrong.

5

I knew I had seen a video on this topic. I love Kevin Powell’s work. According to him, the root method should work…see around the 2:30 mark

2 Likes
6

Ah! Thank you Dave… turns out I was making a dumb mistake that I won’t describe here :slight_smile: and now it’s working!

1 Like
7

I define my variables outside the media query and swap color and background-color round in the media query.

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.