Paramètres d'affichage - Switch theme

Le parcours “Paramètres d’affichage” permet à l’utilisateur de choisir d'afficher le site en thème clair ou en thème sombre (pour en savoir plus sur ces deux thèmes, consultez la page Couleurs).

 

Paramètres d’affichage

Le parcours “Paramètres d’affichage” peut s’intégrer dans l’en-tête ou le pied de page de votre site.

Structure

Le parcours se compose des éléments suivants :

  1. d’un attribut sur la balise html - obligatoire.

  2. d’un lien pouvant s’intégrer dans l’en-tête ou le pied de page de votre site - obligatoire.

  3. d’une modale comportant un titre, un texte de description, et deux boutons radios riches - obligatoire.

1. Activation de la gestion du thème

Afin d’activer la gestion du thème, il est nécessaire d’ajouter l’attribut data-fr-theme sur la balise html.

  • Si l’attribut n’est pas présent, le site s’affichera en mode clair (thème par défaut).

  • Si l’attribut est présent, le site affichera le thème adapté selon les règles suivantes:

    • data-fr-theme sans valeur (ou avec une valeur différente de “light” ou “dark”) : les préférences par défaut du navigateur sont prises en compte (en se basant sur la média query prefers-color-scheme)

    • data-fr-theme=”light” : le site s’affiche en thème clair.

    • data-fr-theme=”dark” : le site s’affiche en thème sombre.

  • Si l’utilisateur effectue une modification, son choix est conservé (dans le local storage) pour les visites ultérieures.

2. Le lien

Intégré dans l’en-tête du site

Lorsque le lien paramètres d’affichage est mis en avant dans l’en-tête de la page, il prend la forme d’un lien accès rapide. (voir le snippet de l’en-tête avec accès rapide )

1 2 3 4 5 6 7 8 <!-- bouton à insérer dans le bloc tools-links du header --> <div class="fr-header__tools-links"> <ul class="fr-links-group"> <li> <button class="fr-link fr-fi-theme-fill fr-link--icon-left" aria-controls="fr-theme-modal" data-fr-opened="false">Paramètres d'affichage</button> </li> </ul> </div>

 

Intégré dans le pied de page

Lorsque le lien paramètres d’affichage est mis en avant dans le pied de page, il est intégré au niveau des mentions légales (voir le snippet du footer )

 

 

1 2 3 4 5 <!-- bouton à insérer dans le bloc bottom list du footer --> <li class="fr-footer__bottom-item"> <button class="fr-footer__bottom-link fr-fi-theme-fill fr-link--icon-left" aria-controls="fr-theme-modal" data-fr-opened="false">Paramètres d'affichage</button> </li>

 

3. La modale

Une fois la modale affichée, la modification du thème s’effectue immédiatement lorsque l’utilisateur effectue son choix.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <dialog id="fr-theme-modal" class="fr-modal" role="dialog" aria-labelledby="fr-theme-modal-title"> <div class="fr-container fr-container--fluid"> <div class="fr-grid-row fr-grid-row--center"> <div class="fr-col-12 fr-col-md-6 fr-col-lg-4"> <div class="fr-modal__body"> <div class="fr-modal__header"> <button class="fr-link--close fr-link" aria-controls="fr-theme-modal">Fermer</button> </div> <div class="fr-modal__content"> <h1 id="fr-theme-modal-title" class="fr-modal__title"> Paramètres d’affichage </h1> <div id="fr-switch-theme" class="fr-form-group fr-switch-theme"> <fieldset class="fr-fieldset"> <legend class="fr-fieldset__legend fr-text--regular">Choisissez un thème pour personnaliser l’apparence du site.</legend> <div class="fr-fieldset__content"> <div class="fr-radio-group fr-radio-rich"> <input type="radio" id="fr-radios-theme-light" name="fr-radios-theme" value="light"> <label class="fr-label" for="fr-radios-theme-light">Thème clair </label> </div> <div class="fr-radio-group fr-radio-rich"> <input type="radio" id="fr-radios-theme-dark" name="fr-radios-theme" value="dark"> <label class="fr-label" for="fr-radios-theme-dark">Thème sombre </label> </div> </div> </fieldset> </div> </div> </div> </div> </div> </div> </dialog>

 

Responsive

En version mobile, les éléments du parcours paramètres d’affichage se réorganisent automatiquement afin d’afficher les versions mobiles des composants :

 

Le lien

Intégré dans l’en-tête du site

Comme dans la version mobile du header, l’accès rapide au lien “paramètres d’affichage” se trouve dans le menu mobile.

 

Intégré dans le footer du site

 

 

La modale

Règles d’utilisation

Usage

La fermeture de la modale permet à l’utilisateur de reprendre sa navigation à l’endroit où il se trouvait auparavant dans la page.

Lorsque la modale de paramètre est ouverte, la page en arrière plan se fige, il devient alors impossible de scroller le contenu d’arrière plan avant de l’avoir clôturée.

Accessibilité

Pour ce parcours veillez à respecter les règles d’accessibilité des composants :

Personnalisation

Il est possible de personnaliser le texte de description de la modale Paramètres d’affichage.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :