Interface de contrôle des tests
Retour

Combinaison de couleur (schemes)

Les color schemes permettent la définition de couleurs principales et du darkmode pour le Design System de l'Etat.

Schemes - gestion du dark mode

bouton ouverture thèmes

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

snippet modal de paramètres d'affichage

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site. 

<dialog id="fr-theme-modal" class="fr-modal" role="dialog" aria-labelledby="fr-theme-modal-title">
    <div class="fr-container fr-container--fluid fr-container-md">
        <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>