Support light or dark theme

SitePoint Library Unleashing the Power of CSS
1

Is this code correct:

color-scheme: light dark;

The text reads:

… just list that single value:

Link to content: Unleashing the Power of CSS - Section 1

2

While listing:
color-scheme: light dark;
does have some effect, I’ve found it much more useful to actually make a section of custom properties specific to your “dark mode” colors, like this:

@media (prefers-color-scheme:dark)
	{
	:root	{
			--font-color:#EEE; 					
			--body-background-color:black;
			--body-border:#777;	/* Borders around divs and other box elements */
			}
	}

This allows you to control the two color renditions of your site yourself, whether in light mode or dark mode. If you just put in the one-liner color-scheme, the browser (in my brief experience) just changes a couple things like button background colors, but not the vast majority of your page.

3

Thanks for the quick response. I’m familiar with the @media possibility.
My question refers to the specific text passage:

If we only support light or dark, just list that single value:

Should the code not either be
color-scheme: light only;
or
color-scheme: dark only;
?

4

According to MDN permitted values are:

color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;

/* Global values */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;

only Forbids the user agent from overriding the color scheme for the element.

5

I do in a different way - not using color-scheme. I set the variables in the CSS root and put the data-theme in the body. It may or may not be a way to set the dark theme more exactly.

6

color-scheme: only dark;
is possible, too.

7

I don’t know but I assume so. I only use the media query meself. I guess the way to find out is to suck it and see. :slight_smile: