Dark mode for websites

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

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.

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

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.

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


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

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

1 Like

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