Add Dark Mode to WordPress with a Light Toggle

There’s a simple way to add Dark Mode to WordPress that lets your site automatically switch themes based on the user’s system scheme. You can also include a toggle switch to manually switch between light and dark modes. That can be achieved using the light-dark() function, which works seamlessly with all WordPress sites and any page builder. Supported by all major browsers.

What is light-dark() function

The light-dark() CSS function allows you to define two color values for a property — for example, color: light-dark(black, white); — and automatically selects one based on the developer’s specified color scheme or the user’s system scheme for light or dark mode.

When light mode is selected, the black color will be applied. When dark mode is selected, or if the user’s system preference is set to dark, the white color will be applied to the property.

How to use light-dark() function

The method is simple: First, you assign a class to each of your elements — for example, headings, paragraphs, lists, and tables. Then, define a light-dark() color pair for each class.

If you choose to enable dark mode automatically based on user’s system scheme, you don’t even need JavaScript. However, if you prefer to add a toggle switch, a small JavaScript snippet is required to make it work.

What you will need:

• Any site builder that allows you to assign classes to elements, e.g. Gutenberg, Elementor, Bricks…
• A code snippet plugin, e.g. FluentSnippets (for writing CSS and JS).

Next, I’ll explain two methods for enabling Dark Mode: Automatically based on the system scheme, and manually using a toggle switch.

This site uses toggle switch and you can see it live on the site header.

Method 1: Automatic Dark Mode

This is the simpler of the two methods because you won’t need JavaScript to make it work.

Use the code snippet plugin to create a new CSS snippet:

:root {
    /* This has to be set to switch between light or dark */
    color-scheme: light dark;

    /* Define color pair variables for text and background */
    --text-color: light-dark(black, white);
    --bg-color  : light-dark(white, black);
}
Code language: CSS (css)

Next, simply write the CSS to assign those color variables to the elements:

h1, h2, h3, p {
    color: var( --text-color );
}

body {
    background-color: var( --bg-color );
}
Code language: CSS (css)

That’s it — as simple as that! You can now test it by switching between light and dark modes on your device to see your site adjust automatically.

Method 2: Using Toggle Switch

This is the more advanced way. I’ll add a toggle to the site — for example, in the header section — that allows visitors to manually switch between light and dark modes. For a better user experience, I’ll make the site remember the selected mode so it stays consistent across tabs and even after the visitor closes and reopens them.

First, place a toggle switch on the header by using the HTML block and insert this code:

<label class="toggle-switch">
    <input type="checkbox" id="toggle-check" aria-label="Toggle Dark mode">
    <span class="toggle-slider"></span>
</label>
Code language: HTML, XML (xml)

Next, create a new CSS snippet to style the toggle:

/* Toggle Container */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
}

/* Hide the checkbox */
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The track */
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333333;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;
    border-radius: 28px;
}

/* The knob */
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    border-radius: 100%;
    background-color: white;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;
}

/* Change the track color when checked */
input:checked + .toggle-slider {
    background-color: darkgreen;
}

/* Move the knob when checked */
input:checked + .toggle-slider:before {
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
    background-color: lightgreen;
}

/* Remove the grey tap highlight on iOS Safari */
.toggle-switch, 
.toggle-slider, 
.toggle-switch input {
    -webkit-tap-highlight-color: transparent;
}
Code language: CSS (css)

And the CSS snippet to style the elements:

:root {
    /* Define color pair variables for text and background */
    --text-color: light-dark(black, white);
    --bg-color  : light-dark(white, black);
}

/* For the toggle switch to work */
html      { color-scheme: light; }
html.dark { color-scheme: dark; }

h1, h2, h3, p {
    color: var( --text-color );
}

body {
    background-color: var( --bg-color );
}
Code language: CSS (css)

In this method, I’ve removed the color-scheme: light dark; declaration to disable automatic mode. If you leave it enabled, it will conflict with the toggle switch and require a more complex setup to make both work together — which is not in the scope of this article.

For the new added lines:

/* For the toggle switch to work */
html      { color-scheme: light; }
html.dark { color-scheme: dark; }Code language: CSS (css)

This is how they work:

• The next JavaScript snippet adds the dark class to the HTML document when the visitor switches the toggle to dark mode, and removes it when switching back to light mode.
• When the dark class is active, the site and all its elements will use the dark color scheme — and revert to the light scheme when it’s removed.

Continue to add a JavaScript snippet code:

// Define the toggle switch
const toggle = document.getElementById("toggle-check");

// Load saved theme (default: light)
const savedTheme = localStorage.getItem("theme") || "light";

// Apply the saved theme
applyTheme(savedTheme);

// Sync toggle state
toggle.checked = savedTheme === "dark";

// Handle toggle click
toggle.addEventListener("change", () => {
    const newTheme = toggle.checked ? "dark" : "light";
    applyTheme(newTheme);
    localStorage.setItem("theme", newTheme);
});

// Function to apply theme
function applyTheme(theme) {
    if (theme === "dark") {
        document.documentElement.classList.add("dark");
    } else {
        document.documentElement.classList.remove("dark");
    }
}
Code language: JavaScript (javascript)

What this code does is attach the function to the toggle switch, and use localStorage mechanism to save the toggle position to the user’s local storage so that the mode will be consistent between tabs and visits.

Done. Now your site supports Dark Mode. Cheers!