Pluginless dark mode for WordPress full site editor themes

The WordPress full site editor is pretty great.

Look, yes, I know, but hear me out. At first I thought it was messy and unwieldy. I still do, especially after consulting the documentation. But, bugs and lacklustre documentation aside, once I got the hang of it, stuff started to make some sense. And, I've realised, the full site editor provides immense flexibility for building and styling your site. In fact, unless you turn to code, it is difficult to imagine a way that provides more options and fine-tuned control.

There is one glaring omission, however. There's no functionality for specifying a dark mode. And that's despite the out of the box support for multiple styles for a single theme. Here's how it should have worked:

I style my theme to my liking

I clone my theme style.

I modify the colours of the new style to be suitable for a "dark mode" style.

I flick a toggle in the newly created theme style to indicate it is my "dark mode" style.

Instead of being this easy, there is no way at all to achieve it with the built-in functionality. As far as I can tell, we're also missing the ability to clone or even just add a new theme style through the editor. Your only option is to start with one of the styles provided by the theme creator, and edit it to your liking.

So there's a bit to do before my suggestion becomes reality.

Luckily, it's not difficult to achieve the same with just a tiny bit of CSS. Proof? This very website! It will show as dark or light depending on the settings of your operating systems. And all I did was add a few lines of CSS.

WordPress theme styles are usually built around a few colours, maybe as much as four or five of them. These colours are defined as CSS variables.

To identify the colours your theme is using, go to:

"Appearance" > "Editor" > "Styles" > "Edit styles"

and select "Colours" in the right hand menu. Under "Palette" you will find your theme colours. Hover over them to see their names. In the Twenty TwentyFour theme, they are as follows:

• Base
• Base / Two
• Contrast
• Contrast / Two
• Contrast / Three

Additionally, I have defined a custom colour called "Base3". Make a note of it if you have any custom colours. Once you know which colours to look for, you should open your browser inspector. Just right click somewhere on the page and click inspect. The exact location will depend on which browser you're using, but you're looking to find the variable names of the colours. In Safari variables are shown in the right-most column of the inspector tool, under "Calculated":

As you can see, the names of the variables are as follows:

--wp--preset--color--base
--wp--preset--color--base-2
--wp--preset--color--black
--wp--preset--color--contrast
--wp--preset--color--contrast-2
--wp--preset--color--contrast-3

If you're using the default colours, it is fairly safe to just assume they follow the convention of the first five lines above. If you don't feel like going for a little treasure hunt in your browser's inspector tool.

Our colour variables identified, we need a way to tell our browser to replace these colours with darker colours if the user has dark mode enabled. Thankfully, that's quite easy to do with CSS. Start by navigating to the WordPress Customizer. If you have enabled a theme which is fully compatible with the site editor, the Customizer is actually hidden from the menu in WordPress Admin. But you can still access it by appending customize.php to the WP-admin URL, like so: https://blog.url/wp-admin/customize.php

Once there, click on "Additional CSS" to open the editor for adding your own CSS to the theme. We need to tell the browser that, if the user has dark mode enabled, it should use different values for the variables above. It is easily done with a media query:

@media (prefers-color-scheme: dark) { }

If your default colour scheme is dark, just swap out dark for light. All we need to do from here is to include our alternate colour definitions. One thing to be aware of, that actually tripped me up when I was doing this, is that global variables tend to be defined at the :root level. In WordPress, they are instead applied to the body element.

Which means that your full dark mode colour definitions need to look something like this:

@media (prefers-color-scheme: dark) {
    body {
    --wp--preset--color--base: #282828;
    --wp--preset--color--base-2: #303030;
    --wp--preset--color--contrast: #ccd6d6;
    --wp--preset--color--contrast-2: #c0b2bb;
    --wp--preset--color--contrast-3: #e0d4db;
    }
}

And that's all. Once you've added this little snippet to the stylesheet, you have a fully functioning dark mode. It's super simple, and a workable workaround until WordPress eventually gets support for assigning dark/light modes through the style editor.