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.

Under the two colours, the screen gives the contrast between the icon and the button. The icon is the button's only visible label, so it needs at least 3:1; the readout says when a pair falls below that. Minimal has no button colour and takes the colour of the text around it, so it shows no figure. On a dark page the lighter of your two colours becomes the button and the darker one the icon, so a dark button does not disappear into a dark page once it has been pressed.

Position on phones moves the floating button to a top corner on screens under 600px wide, or hides it there, without moving it anywhere else. On a phone the bottom corners are where pages keep their own buttons. The distance from the edge is 22px, and 14px on a phone, unless you set Edge offset yourself, in which case your figure is used everywhere. On a right-to-left site the corners are mirrored, and a bar that another Traslatability plugin pins to the bottom of the screen, such as a free-shipping bar, pushes the button up rather than covering it.

Hide on cart and checkout is on unless you turn it off. On a phone the floating button sat over "Proceed to Checkout" and the address fields. Dark mode itself still applies on those pages, and a block, shortcode or menu item you placed there still shows. It only appears while WooCommerce is active.

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. Its mark shows the state too: a moon while the page is light, a sun once it is dark.

Leave the two text fields empty to use the default wording, "Dark Mode" and "Light mode". The default is translated into each visitor's language, which is what a site in more than one language needs; words you type are used exactly as you typed them, in every language, unless you translate them. WPML String Translation and Polylang both list the two fields, under the plugin's admin texts, and each visitor then sees the translation for their language. The default itself counts as empty in any language the plugin comes in, so "Modo oscuro" left in the field still shows a French visitor "Mode sombre".

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.

Each placed copy can have its own shape, though — a bare mark in a header while the floating button stays a pill. In the block's settings panel, choose a Style and whether to show the Text on button; "Use plugin setting", the default, follows this screen. For the shortcode, add style (pill, round, square or minimal) or label (show or hide): [dark_mode_switch style="minimal"]. The wording, the two colours and the size always come from this screen.

Light, Auto and Dark is a style of its own for a placed copy: three buttons in one outline, for a site that wants the choice spelled out. Light and Dark are a press like any other; Auto forgets the reader's choice, so your schedule, the Default Mode or their device decides again. Choose it as the block's Style, write [dark_mode_switch style="choice"], or add the Light, Auto and Dark switch item from the Dark Mode box under Appearance → Menus. On a block theme, add a Custom Link to your Navigation block pointing at #dark-mode-choice. The checked button, which a cached page cannot know, is marked in the reader's browser; it wears this screen's two colours, and the others take the text colour of wherever it sits. It is a radio group to a screen reader, named after the menu item or Navigation link when it is one, and the arrow keys move between the three (mirrored on a right-to-left page); the page changes once the arrows stop, so arrowing past a button neither paints nor counts it. Its own styles and arrow keys, under 3KB, are added only to pages that show it. A theme whose menu is printed by its own code rather than WordPress's may show the menu item as a plain link; it then works as the one-button switch. The floating switch always stays one button.

Switch Manual placement only 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 Toggle Button screen.

A keyboard shortcut — Shift+Alt+D unless you choose another. 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 combinations the browser leaves alone are offered: Ctrl and Cmd belong to the browser, and so does Alt+D, which moves to the address bar in Chrome, Edge and Firefox on Windows and Linux. A site that had chosen Alt+D now uses Shift+Alt+D. The button tells screen readers which keys work it.

Enable URL parameter — ?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.