Paramètres d’affichage

• Voir la page de documentation du composant sur le Système de Design de l’État Ouvre une nouvelle fenêtre
• Voir la page d’exemple du Système de Design de l’État Ouvre une nouvelle fenêtre
• Voir la page du composant sur Storybook Ouvre une nouvelle fenêtre

Documentation du tag

Returns the HTML for the theme selection modale for DSFR

Tag name: dsfr_theme_modale

Usage: {% dsfr_theme_modale %}

Rendu

Code source : <dialog id="fr-theme-modal" class="fr-modal" 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-btn--close fr-btn" aria-describedby="fr-theme-modal-title" aria-controls="fr-theme-modal"> Fermer </button> </div> <div class="fr-modal__content"> <h2 id="fr-theme-modal-title" class="fr-modal__title"> Paramètres d’affichage </h2> <div id="fr-display" class="fr-form-group fr-display"> <div class="fr-form-group"> <fieldset class="fr-fieldset"> <legend class="fr-fieldset__legend fr-text--regular" id="-legend"> 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 value="light" type="radio" id="fr-radios-theme-light" name="fr-radios-theme" /> <label class="fr-label" for="fr-radios-theme-light"> Thème clair </label> <div class="fr-radio-rich__img" data-fr-inject-svg> <img src="/django-dsfr/static/dsfr/dist/artwork/light.svg" alt="" /> </div> </div> <div class="fr-radio-group fr-radio-rich"> <input value="dark" type="radio" id="fr-radios-theme-dark" name="fr-radios-theme" /> <label class="fr-label" for="fr-radios-theme-dark"> Thème sombre </label> <div class="fr-radio-rich__img" data-fr-inject-svg> <img src="/django-dsfr/static/dsfr/dist/artwork/dark.svg" alt="" /> </div> </div> <div class="fr-radio-group fr-radio-rich"> <input value="system" type="radio" id="fr-radios-theme-system" name="fr-radios-theme" aria-describedby="fr-radios-theme-system-hint-text" /> <label class="fr-label" for="fr-radios-theme-system"> Système <span class="fr-hint-text" id="fr-radios-theme-system-hint-text">Utilise les paramètres système.</span> </label> <div class="fr-radio-rich__img" data-fr-inject-svg> <img src="/django-dsfr/static/dsfr/dist/artwork/system.svg" alt="" /> </div> </div> </div> </fieldset> </div> </div> </div> </div> </div> </div> </div> </dialog>