Skip to content
Traslatability traslatability

Dark Mode Documentation

Give your site a dark mode your readers can switch on — one that reads properly on every page, without you restyling anything.

The switch

Four shapes: a pill, a circle, a rounded square, or just the mark. Five corners. Your own wording for both states, your own two colours, and a size — forty-four pixels is the smallest a finger finds reliably.

The label is read out by a screen reader whether or not you show it, and the button reports its state, so somebody who cannot see it still knows whether the page is currently dark.

Putting it somewhere yourself

In the block editor, add the Dark mode switch block — search for "dark". Anywhere a block will not go, [dark_mode_switch] draws the same button: a widget, a template, an Elementor shortcode widget, a theme file.

Neither stores its own copy of the button. Both ask this screen at the moment the page is shown, so changing the wording next month changes it inside pages published last year too.

Switch Only where I put it on to hide the floating one and keep the block and the shortcode working, which is what you want if your theme already has somewhere sensible for it.

Switching the floating switch off without placing one of them means nobody can turn dark mode on at all. The dashboard says so if you do.

Two other ways to reach it

Both are off until you turn them on, and both are on the switch screen.

A keyboard shortcut — Alt and a letter. Never while somebody is typing in a field, a comment box or an editor, so it cannot repaint the site under somebody mid-sentence. Only Alt combinations are offered: Ctrl and Cmd belong to the browser, and a plugin that takes Ctrl+D over has broken bookmarking everywhere on your site to save one click here.

A link that opens the site dark?dark=1 on any address opens that page dark, and ?dark=0 opens it light. It is read before the page is painted, so the link does not flash white first, and it counts as the reader's own choice: following a link on from there stays dark.

Useful for a support reply ("here is how it looks at night"), for a newsletter that goes out in the evening, and for checking a page yourself without hunting for the switch.

Still stuck? We answer support email from real people.

Browse the knowledge base

Get Dark Mode

One licence, every feature. Updates and support included.

See pricing