Set up dark mode

Dark mode is part of the theme, in the free version, with no plugin needed. Your site carries two color schemes, light and dark, and the visitor chooses between them. The choice is remembered and survives moving to another page.

#Turn it on

The switch and its behavior live at AppearanceCustomizeGeneralDark Mode. Four settings, and the first one gates the rest.

#Put the switcher where people can find it

This is the part that catches everyone: turning dark mode on does not place the switcher. Its visibility is set separately, in the header and in the footer, and separately again for wide and narrow screens.

#The dark colors

Colors live at AppearanceCustomizeTheme StylesColor Scheme, in the Dark mode group at the bottom.

Every color exists as a pair: one light value, one dark value. That includes the accent, on purpose. A monochrome brand often wants a dark accent on a light page and a light accent on a dark one, and a single accent color cannot do both.

Values in the dark group apply only while the dark scheme is active. The Customizer repeats that in a note above the group so nobody wonders why a color they just changed did nothing.

Style kit presets set both schemes at once, so if you are starting from a kit the dark scheme is already coherent.

#The dark logo

Set a separate logo for the dark scheme, or a dark logo will disappear against a dark background. Site-wide it is at AppearanceCustomizeGeneralBranding; the header has its own pair under Navigation, and the footer under Footer.

If your logo is light to begin with, you do not need a second file.

#Your own content in dark mode

The theme repaints its own elements. It cannot guess the brightness of an image you uploaded or a color you typed into the content by hand.

For a block that carries its own dark background, use the light-text option described on that block page, so the text on top flips with it. Check your article images too: a screenshot with a white background will still be white in dark mode, which is usually fine, but a logo saved as a transparent PNG in black will not be.

#Questions

Does dark mode change what search engines see?

No. Both schemes render the same HTML with different color values. There is one page, not two.

Cookie or local storage: which should I pick?

Cookie, unless you have a reason. The server can read it, so the right scheme is applied as the page loads rather than after. Local storage stays entirely in the browser, which some setups prefer for privacy reasons, but it can produce a brief flash of the wrong scheme.

Can I force the whole site to dark and remove the choice?

Set the default scheme to dark and leave the switcher off in both the header and the footer. Visitors then get the dark site with nothing to toggle.

Why does my page flash white for a moment?

Usually a cache serving a page that was stored under the other scheme, or local storage being read after the first paint. Clear the cache, and switch preference storage to cookie.

Last updated 9 Sep 2026