How do you add dark mode to a WordPress site?

Last updated: October 30, 2026

In short: You add dark mode to WordPress in one of two ways: with a plugin that inverts the page's colors after the fact, or with a theme that has a dark palette. The theme route looks cleaner, because a designer picked the dark colors and the logo, category colors and ad slots don't break. All five Wiozen Theme designs have a dark palette and a ready dark mode button in the header; the button is on by default and the reader's choice is saved in their own browser.

Plugin or theme?

Most dark mode plugins darken the page by calculating new colors. They're easy to set up, but they don't know your design, so they miss things: a logo on a light background sits on a dark page like a box, category labels become hard to read, a section keeps its white background. The plugin also adds its own script and styles to every page.

In a theme's own dark mode, the dark colors are part of the design. The theme only swaps color variables; layout, fonts and images stay the same. If your theme has dark mode, you don't need a plugin, and running both causes clashes.

How do you turn on dark mode in Wiozen Theme?

The News, Technology, Finance, Food and Guide designs each have their own dark palette. The dark mode button is ready in all three header layouts (Classic, Centered, Compact) of the first four, and in the tools area of the header in Guide.

1. Open Appearance › Wiozen Theme › Settings.
2. On the Header card, check that the "Dark mode button" switch is on. It's on by default.
3. Open the site and click the moon icon in the header. The page switches to the dark palette and the icon turns into a sun.

Because the button is on by default, it works even without connecting the theme to an account; an unconnected site runs the News design and has dark mode there too. Turning the button off or switching designs needs the panel, which opens on a site connected to a Wiozen account with at least $5 in total top-ups.

Where is the reader's choice saved?

When a reader clicks the button, the choice is written to their browser's local storage (localStorage). When they come back in the same browser, the page opens dark. The choice isn't tied to an account or a cookie; it's picked separately on a phone and a computer, and goes back to light when browser data is cleared.

The site opens light for every visitor first. The theme doesn't follow the device's system dark setting on its own; the reader makes the switch.

A reader who chose dark doesn't see a white flash while the page opens. The theme puts a one-line script in the <head> that reads the saved choice and applies the dark palette before the page is painted. The button itself reports its on or off state to screen readers with aria-pressed.

Why don't category colors fade on a dark background?

A dark green or navy category color that looks fine on white almost disappears on a dark background. Wiozen Theme measures each category color against the dark background. If contrast is below 4.5:1, it lightens the color toward white in up to 12 steps, by 72 percent at most, and stops at the first shade that reaches 4.5:1. That ratio is the WCAG minimum for normal text.

So even if you change a category color yourself, dark mode ends up with a readable shade. Palette colors such as the rising green and falling red in the Finance design also have separate, lighter counterparts in the dark palette.

What to check yourself in dark mode

The theme handles its own colors; it doesn't change what you upload. Before launch, look at these in dark mode:

• The logo. A black logo on a transparent background vanishes in a dark header. Use a logo that reads on both, or give it a thin light background.
• Text and backgrounds you colored by hand inside posts. If you picked a custom color code in the editor, it doesn't change in dark mode; if you pick palette colors, their dark counterparts are used.
• Screenshots and charts on white backgrounds. They show up as bright boxes on a dark page; if you use many, a border around them is easier on the eyes.
• Plugin blocks. Form, table or comment plugins may bring their own fixed colors.

Moving the dark mode button or turning it off

In the Site Editor, the block inserter has a block called "Dark mode toggle". You can add it to the footer, a sidebar or next to the menu; all buttons on the page work together. If the active design has no dark palette, the block shows a note saying so in the editor.

When you turn the button off in Settings, dark mode goes away completely: the button is hidden and readers who chose dark before see the site in light colors. Developers who want different dark colors can use the wiozen_design_dark_palette filter from a child theme. The filtered array must have all of base, contrast, muted, line, tint and accent; if one is missing, the theme turns dark mode off.

Frequently asked questions

To see dark mode on your own site, download Wiozen Theme for free; if you're building a business news site, see the Finance design guide too.