Dark mode

Hi @vitaliikolisnyk,

Glad you like it! There’s currently no functionality in WordPress for setting a separate color scheme for dark mode, and although it could be done by a plugin, I don’t think one exists for it at the moment.

Since block themes use CSS variables for colors, you could add custom CSS that overwrites those CSS variables for devices set to dark mode. If you add the following CSS to a custom CSS plugin:

@media ( prefers-color-scheme: dark ) {
	body {
		--wp--preset--color--foreground: #1D201F;
		--wp--preset--color--background: #fff;
		--wp--preset--color--primary: #FFDE0D;
		--wp--preset--color--secondary: #909291;
		--wp--preset--color--tertiary: #282B2A;
		--wp--preset--color--quaternary: #3F4141;
	}
}

…you can change the variables to whatever colors you want, and have those colors be used on devices with dark mode active.

— Anders

If you add the following CSS to a custom CSS plugin:

It works! Thank you very much.

Actually @anlino & @vitaliikolisnyk
Since this theme has the admin menu item for cuntomizer, no custom CSS plugin is needed. You can use Additional CSS in the customizer.

Even with block themes that remove that menu item, customizer still exists and works because most themes require it.

/wp-admin/customize.php

Likewise with /nav-menus.php and /widgets.php

They all come in handy with block themes. I find it easier to build a menu the old fashioned way. Some plugins add their own sidebar with “legacy” widgets and /widgets.php is the only place to work with those.

@vitaliikolisnyk

greenshift plugin has a special button with cookie and a tutorial on their site on how to use it to make a dark/light mode switch.

background/foreground variable gets swapped but other colors can be dealt with in the same manner, even those that are not var.