The Appearance switcher lets each visitor choose light or dark mode, the Motion switcher lets them reduce the site’s animations. This page describes their settings, the look of their option, the effect of the choice and their keyboard behavior.
Add the block
The two settings each have their own block:
| Block | Options, in order | Icons |
|---|---|---|
| Appearance switcher | System, the setting of the visitor’s system. Light, always light mode. Dark, always dark mode. | A screen, a sun and a moon |
| Motion switcher | System, the setting of the visitor’s system. Reduced, reduced animations. | A screen and a pause symbol |
Insert them (Add a block), or type dark mode or animation in the block search. Place them in the header or the footer of the site so that they are on every page (Write the header, menu and footer once).
The visitor’s choice applies to all the pages of the site, until they change it. System is the option used as long as they have not chosen anything. The motion switcher does not offer to force animations on a visitor who has reduced them in their system.
Set up the switcher
Select the switcher, Settings tab, Appearance switcher or Motion switcher panel.
| Setting | Effect | Default value |
|---|---|---|
| Show | Its icon, Its name or Its icon and its name. Whichever is displayed, a screen reader announces each option by its name. | Its icon |
The name of the options is written in the language of the page. On the motion switcher, the help of the setting reminds you that a choice reloads the page once.
The layout is set in the Flex layout panel: the direction, the alignment and the gap between the options. The block comes drawn as a pill by its saved style, Appearance switcher or Motion switcher. This style puts a thin border, fully rounded corners, 2 px of inner space and 2 px between two options. A step chosen on the Gap slider replaces this gap; brought back to 0, it returns the 2 px of the style.
Style the option
The look is set on the option. Each switcher contains a single Preference option block, from which all its options are drawn. You cannot add a second one.
| State | Styles |
|---|---|
| Default | An option the visitor can choose. |
| Hover | The option under the pointer. |
| Focus | The option reached with the keyboard. |
| Active | The option the visitor has selected. |
The option has the saved style Preference option: a hand-shaped pointer and fully rounded corners. Its inner space is 4 px at the top and bottom and 8 px on the sides. The selected option sits on a light background and in bold.
In the editor, the switcher is displayed with all its options, named in the language of your editor. System is selected there, in its Active state: it is the option you set. A click on another option selects it.
To bring the two switchers together, place them in the same Container in a row and set the gap between them on that container. Each switcher keeps its pill.
The effect of the choice
| Option | Effect |
|---|---|
| Light or Dark | The whole page switches to that mode without reloading. This affects its background and text, the dark value of your colors and the block colors set with Light / Dark mode. A block whose color has no dark variant keeps it in both modes. |
| Reduced | The site behaves as if the visitor’s system asked for less motion. Entrance animations appear immediately and nothing follows the pointer or the scroll. A carousel no longer scrolls by itself and a slider that has navigation no longer turns. An ambient video stays on its still image and animated icons freeze. The page reloads once. |
| System | The site follows the setting of the visitor’s system again. |
- A visitor logged in to a site account finds their choice on all their devices. A visitor without an account keeps it for the length of their visit, on the device where they made it.
- Each page is served with the choice already applied: a visitor in dark mode does not see the page pass through light.
- The site keeps the choice in the session it opens for each visit. It adds no cookie and passes nothing to a third party. Your consent banner does not have to offer it (Set up the consent banner).
- The choice may not be saved, on a page left open for more than a day for example. It then applies only to the current page and a message tells the visitor.
On a phone
The switcher keeps the width of its content. Set to Its icon, it takes the least space: it is the setting for a phone header.
Accessibility
- The switcher is navigated with the keyboard like a group of radio buttons: a single Tab reaches it, on the selected option, then the arrow keys change the choice. A held key moves only one option.
- On the motion switcher, the arrow keys move from one option to the other without choosing:
SpaceorEnterchooses and reloads the page. After the reload, focus returns to the selected option. A screen reader announces before the choice that the option reloads the page. - A screen reader announces the group, Appearance or Motion, then each option and the one that is checked.
- Without JavaScript, the switcher shows the selected option but does not allow changing it.