# Appearance and motion switchers

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](https://lovelyrender.com/documentation/add-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](https://lovelyrender.com/documentation/header-menu-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.

**Note:** The appearance switcher belongs only on a site that shows both modes. A site set to **Light** or **Dark** in **Light and dark modes** is always displayed in that mode. The switcher does not appear there ([Set your colors, fonts and scales](https://lovelyrender.com/documentation/set-colors-fonts-scales/)).

## 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.

![The Appearance switcher in the page, set to Its icon and its name: a thin-bordered pill with System, selected, on a light background and in bold, then Light and Dark.](https://static.lovelyrender.com/uploads/2026/10/942-doc-blocs2-apparence.png)

**Tip:** An option that shows only its icon has no text to put in bold. The background draws a shape around the selected option, visible whatever the color. If you change the styling, keep a cue other than color.

To bring the two switchers together, place them in the same [Container](https://lovelyrender.com/documentation/container-block/) 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](https://lovelyrender.com/documentation/set-up-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.

**Warning:** Dark colors written in the advanced CSS of a block do not follow the visitor’s choice. Only the colors set with **Light / Dark mode** follow it ([Color a block](https://lovelyrender.com/documentation/color-block/)).

## 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: `Space` or `Enter` chooses 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.

## See also

- [Color a block](https://lovelyrender.com/documentation/color-block/)
- [Animate a block](https://lovelyrender.com/documentation/animate-block/)
- [Check the accessibility of your pages](https://lovelyrender.com/documentation/check-accessibility/)