# Sélecteurs d’apparence et d’animations

Le **Sélecteur d’apparence** laisse chaque visiteur choisir le mode clair ou sombre, le **Sélecteur d’animations** réduire les animations du site. Cette page décrit leurs réglages, l’habillage de leur option, l’effet du choix et leur comportement au clavier.

## Ajouter le bloc

Les deux réglages ont chacun leur bloc :

| Bloc | Options, dans l’ordre | Icônes |
| --- | --- | --- |
| **Sélecteur d’apparence** | **Système**, le réglage du système du visiteur. **Clair**, toujours le mode clair. **Sombre**, toujours le mode sombre. | Un écran, un soleil et une lune |
| **Sélecteur d’animations** | **Système**, le réglage du système du visiteur. **Réduites**, les animations réduites. | Un écran et un symbole pause |

Insérez-les ([Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/)), ou tapez `mode sombre` ou `animation` dans la recherche des blocs. Posez-les dans l’en-tête ou le pied de page du site pour qu’ils soient sur toutes les pages ([Écrire une fois l’en-tête, le menu et le pied de page](https://lovelyrender.com/fr/documentation/compositions/)).

Le choix du visiteur vaut pour toutes les pages du site, jusqu’à ce qu’il en change. **Système** est l’option retenue tant qu’il n’a rien choisi. Le sélecteur d’animations ne propose pas d’imposer les animations à un visiteur qui les a réduites dans son système.

**Remarque :** Le sélecteur d’apparence n’a sa place que sur un site qui montre les deux modes. Un site réglé sur **Clair** ou **Sombre** dans **Modes clair et sombre** s’affiche toujours dans ce mode. Le sélecteur n’y apparaît pas ([Régler vos couleurs, vos polices et vos échelles](https://lovelyrender.com/fr/documentation/design-system/)).

## Régler le sélecteur

Sélectionnez le sélecteur, onglet **Réglages**, panneau **Sélecteur d’apparence** ou **Sélecteur d’animations**.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Afficher** | **Son icône**, **Son nom** ou **Son icône et son nom**. Quoi qu’il soit affiché, un lecteur d’écran annonce chaque option par son nom. | **Son icône** |

Le nom des options s’écrit dans la langue de la page. Sur le sélecteur d’animations, l’aide du réglage rappelle qu’un choix recharge la page une fois.

La disposition se règle dans le panneau **Mise en page flex** : le sens, l’alignement et l’écart entre les options. Le bloc arrive dessiné en pilule par son style enregistré, **Sélecteur d’apparence** ou **Sélecteur d’animations**. Ce style pose une bordure fine, des coins tout ronds, 2 px d’espace intérieur et 2 px entre deux options. Un cran choisi sur le curseur **Écart** remplace cet écart ; ramené à 0, il rend les 2 px du style.

## Habiller l’option

L’apparence se règle sur l’option. Chaque sélecteur contient un seul bloc **Option de préférence**, à partir duquel toutes ses options sont dessinées. Vous ne pouvez pas en ajouter un second.

| État | Habille |
| --- | --- |
| **Par défaut** | Une option que le visiteur peut choisir. |
| **Survol** | L’option sous le pointeur. |
| **Focus** | L’option atteinte au clavier. |
| **Actif** | L’option que le visiteur a retenue. |

L’option porte le style enregistré **Option de préférence** : le pointeur en forme de main et des coins tout ronds. Son espace intérieur est de 4 px en haut et en bas et de 8 px sur les côtés. L’option retenue est posée sur un fond léger et en gras.

Dans l’éditeur, le sélecteur s’affiche avec toutes ses options, nommées dans la langue de votre éditeur. **Système** y est retenue, dans son état **Actif** : c’est l’option que vous réglez. Un clic sur une autre option la sélectionne.

![Le Sélecteur d’apparence dans la page, réglé sur Son icône et son nom : une pilule à fine bordure avec Système, retenue, sur un fond léger et en gras, puis Clair et Sombre.](https://static.lovelyrender.com/uploads/2026/10/942-doc-blocs2-apparence.png)

**Conseil :** Une option qui ne montre que son icône n’a pas de texte à mettre en gras. Le fond dessine une forme autour de l’option retenue, visible quelle que soit la couleur. Si vous changez l’habillage, gardez un repère autre que la couleur.

Pour réunir les deux sélecteurs, posez-les dans un même [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/) en rangée et réglez l’écart entre eux sur ce conteneur. Chaque sélecteur garde sa pilule.

## L’effet du choix

| Option | Effet |
| --- | --- |
| **Clair** ou **Sombre** | Toute la page passe dans ce mode sans rechargement. Cela touche son fond et son texte, la valeur sombre de vos couleurs et les couleurs des blocs réglées avec **Mode clair / sombre**. Un bloc dont la couleur n’a pas de variante sombre la garde dans les deux modes. |
| **Réduites** | Le site se comporte comme si le système du visiteur demandait moins de mouvement. Les apparitions s’affichent d’emblée et rien ne suit le pointeur ni le défilement. Un carrousel ne défile plus seul et un diaporama qui a une navigation ne tourne plus. Une vidéo d’ambiance reste sur son image et les icônes animées se figent. La page se recharge une fois. |
| **Système** | Le site suit de nouveau le réglage du système du visiteur. |

- Un visiteur connecté à un compte du site retrouve son choix sur tous ses appareils. Un visiteur sans compte le garde le temps de sa visite, sur l’appareil où il l’a fait.
- Chaque page est servie avec le choix déjà appliqué : un visiteur en mode sombre ne voit pas la page passer par le clair.
- Le site garde le choix dans la session qu’il ouvre pour chaque visite. Il n’ajoute aucun cookie et ne transmet rien à un tiers. Votre bandeau de consentement n’a pas à le proposer ([Régler le bandeau de consentement](https://lovelyrender.com/fr/documentation/consentement/)).
- Le choix peut ne pas être enregistré, sur une page restée ouverte plus d’une journée par exemple. Il ne vaut alors que pour la page en cours et un message le dit au visiteur.

**Attention :** Des couleurs sombres écrites dans le CSS avancé d’un bloc ne suivent pas le choix du visiteur. Seules les couleurs réglées avec **Mode clair / sombre** le suivent ([Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/)).

## Sur téléphone

Le sélecteur garde la largeur de son contenu. Réglé sur **Son icône**, il prend le moins de place : c’est le réglage d’un en-tête de téléphone.

## Accessibilité

- Le sélecteur se parcourt au clavier comme un groupe de boutons radio : une seule tabulation l’atteint, sur l’option retenue, puis les flèches changent de choix. Une touche maintenue n’avance que d’une option.
- Sur le sélecteur d’animations, les flèches passent d’une option à l’autre sans choisir : `Espace` ou `Entrée` choisit et recharge la page. Après le rechargement, le focus revient sur l’option retenue. Un lecteur d’écran annonce avant le choix que l’option recharge la page.
- Un lecteur d’écran annonce le groupe, **Apparence** ou **Animations**, puis chaque option et celle qui est cochée.
- Sans JavaScript, le sélecteur affiche l’option retenue mais ne permet pas d’en changer.

## Voir aussi

- [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/)
- [Animer un bloc](https://lovelyrender.com/fr/documentation/animations/)
- [Vérifier l’accessibilité de vos pages](https://lovelyrender.com/fr/documentation/accessibilite/)