Default to user prefers-color-scheme value and have switch invert it

[jerclarke]

This was already brought up in the comments on the blog post, but since I have a hacky solution, I figured I'd share it here along with an overall request for the block to someone support this by default.

Goal: When user arrives they see the site in dark mode if their browser already has prefers-color-scheme: dark, then have the switch still work to switch it back to light.

Ideally the block would handle this, show the "moon" by default, and clicking to switch it to "sun" would make the site light again.

WHILE WE WAIT WITH BAITED BREATH LOL: I figured out a "clever" CSS solution that gives a similar effect, allowing my site to match the user setting by default, while letting them invert it.

The main issue with my hack is that the sun/moon icons don't change, so if someone has prefers-color-scheme: dark, they'll still see the sun by default and clicking the button "switches to light mode" but that means switching to the sun. IMO this isn't the end of the world, and I'd rather it honors their preference, while still allowing them to invert, than to have the icons working perfectly.

Here's the CSS I put in the style.css of my Twenty Twentyfive child theme (I added the dark colors in the palette section of theme.json):

/* Hide switch by default so old browsers without prefers-color-scheme see nothing */
.wp-block-tabor-dark-mode-toggle {
	display: none;
}
/* In light default mode clicking the switch enables the dark colors */
@media (prefers-color-scheme: light) {
	.wp-block-tabor-dark-mode-toggle {
		display: block;
	}
	:root.theme-dark body {
		--wp--preset--color--base: var(--wp--preset--color--base-dark);
		--wp--preset--color--contrast: var(--wp--preset--color--contrast-dark);
		--wp--preset--color--accent-1: var(--wp--preset--color--accent-1-dark);
		--wp--preset--color--accent-2: var(--wp--preset--color--accent-2-dark);
		--wp--preset--color--accent-3: var(--wp--preset--color--accent-3-dark);
		--wp--preset--color--accent-4: var(--wp--preset--color--accent-4-dark);
		--wp--preset--color--accent-5: var(--wp--preset--color--accent-5-dark);
		--wp--preset--color--accent-6: var(--wp--preset--color--accent-6-dark);
	}
}
/* In dark default the switch is inverted with :not, so the dark colors apply as long as 
the switch is NOT clicked, and clicking the switch reverts the colors to light mode */
@media (prefers-color-scheme: dark) {
	.wp-block-tabor-dark-mode-toggle {
		display: block;
	}
	:root:not(.theme-dark) body {
		--wp--preset--color--base: var(--wp--preset--color--base-dark);
		--wp--preset--color--contrast: var(--wp--preset--color--contrast-dark);
		--wp--preset--color--accent-1: var(--wp--preset--color--accent-1-dark);
		--wp--preset--color--accent-2: var(--wp--preset--color--accent-2-dark);
		--wp--preset--color--accent-3: var(--wp--preset--color--accent-3-dark);
		--wp--preset--color--accent-4: var(--wp--preset--color--accent-4-dark);
		--wp--preset--color--accent-5: var(--wp--preset--color--accent-5-dark);
		--wp--preset--color--accent-6: var(--wp--preset--color--accent-6-dark);
	}
}

How does it work?

• We only enable our special dark mode when we have access to the prefers-color-scheme
• When prefers-color-scheme is light, we use the normal CSS expected by this block: Modify all the color presets to use dark variants with the :root.theme-dark body selector.
• When prefers-color-scheme is dark we invert that logic by using the :root:not(.theme-dark) body selector. This means that "by default" the dark colors will be loaded, but if the switch has been flipped, the dark colors are disabled, thus bringing back the "light" colors.
• As a point of progressive enhancement, the CSS above also disables the switch entirely by default, and only shows it in the @media (prefers-color-scheme) queries. This is because older browsers without support for prefers-color-scheme will never see any of the dark colors because their browser won't trigger either of the media queries, so it's better to just deny them the switch and leave them with the default colors. 94% of browsers support prefers-color-scheme according to caniuse, so you can remove this if you don't want the hassle lol.

Notably, I think this could also be a solution for someone with a "dark by default" theme, just inverting the logic a few more times. Either way I think the CSS principle of putting all colors in a prefers-color-scheme media query, then using :root:not(.theme-dark), should let anyone control the "inversion" of their color scheme, as long as they don't mind the icons getting mixed up.

[richtabor]

Hey @jerclarke, maybe I'm not understanding fully. Currently if you go to my blog and you have dark mode set at an OS-level, you can switch it off:

CleanShot.2025-12-01.at.11.19.12.mp4

[jerclarke]

EDIT: Sorry I wrote this before understanding that you had already created a patch that does exactly what I wanted! The only thing I don't understand is your question to me, but feel free to ignore the text below. I'll go test the patch, the description is exactly what I was looking for!

Thanks for replying!

I think I wrote too much and it's confusing. Your block has no support at all for prefers-color-scheme, it always shows light mode by default, and the toggle switches it to dark mode. At least that's what I've experienced with it. The baseline request here is to somehow make your toggle be set to "dark" to match prefers-color-scheme dictates it should be, while letting the user override that by clicking it. It seems complicated to me from a CSS/JS perspective, but in theory it would be a great addition. LMK if I'm missing something and the block is supposed to already support this.

The rest of my post above talks about my own hacky solution that combines CSS based on prefers-color-scheme with your block, netting a neat result where you get the right default and can still toggle it, but with some tradeoffs around consistency of the iconography.

Another issue with my CSS above which I don't think I had mentioned at the time, is that the toggle always inverts the default, with the awkward result that the "inversion" persists over time. So if you visit my site in the day when your phone is in light mode, the site will be light, and clicking the button makes it dark. That's fine, but if you come back at night, when your phone is in dark mode, the site will persist the "inversion" and show you the light mode, forcing you to click it again, which isn't ideal at all, as you surely want the dark mode at that point.

Anyway, you can test it out on my site if you want: https://jerclarke.org

• Set your system to light mode and it should be light
• Switch system to dark mode and it should be dark
• Use the toggle and it should flip the scheme in both cases, though you'll see the "meaning of the sun and the moon" inverts depending on your system scheme.

[jerclarke]

Ok tested it and it's incredible, you solved the fundamental issue! The icons do what they should and if I load a fresh browser window it reads the system preference and applies it.

The one thing it doesn't have that would be nice is awareness of changes in system preference after loading the page. Here in Github if I change the system preference it immediately switches back and forth, but with the way your plugin currently works, it stays the same and I have to use the toggle. IMO the ideal behavior would be for it to somehow listen to the CSS value and switch automatically.

This comes up every day for me when my whole system goes dark after sunset.

Not a dealbreaker though! This patch is 95% of the way there and a huge upgrade for anyone using the plugin, as far as I can tell.

[jerclarke]

FWIW I took a stab at adding the tweak I'm hoping for (listen for changes to user preference and toggle automatically), but got stuck. Maybe my stub will be helpful, I imagine you would have been able to figure this part our easily.

The .addEventListener part of this is working, but I'm not sure the right way to run toggleTheme from this part of the JS. With the code below toggleTheme() throws an undefined function error:

		(function() {
			const rootElement = document.documentElement;
			const isDarkMode = localStorage.getItem("darkMode") === "enabled";
			const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;

			// Apply the "theme-dark" class based on user or system preference
			rootElement.classList.toggle("theme-dark", isDarkMode || (!localStorage.getItem("darkMode") && prefersDark));

			const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
			mediaQuery.addEventListener("change", (event) => {
		        if (event.matches) {
					console.log("User switched to dark.");
					toggleTheme();
				} else {
					console.log("User switched to light");
					toggleTheme();
				}
			});
		})();