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
Documentation du tag

Returns the HTML for the theme selection modale for village
Tag name: village_theme_modale
Usage: {% village_theme_modale %}
Résultat

Code source :
<dialog id="village-theme-modal"
        class="village-modal"
        aria-labelledby="village-theme-modal-title">
  <div class="village-container village-container--fluid facile-container-md">
    <div class="village-grid-row village-grid-row--center">
      <div class="village-col-12 village-col-md-6 village-col-lg-4">
        <div class="village-modal__body">
          <div class="village-modal__header">
            <button class="village-btn--close village-btn"
                    aria-describedby="village-theme-modal-title"
                    aria-controls="village-theme-modal">
              Fermer
            </button>
          </div>
          <div class="village-modal__content">
            <h1 id="village-theme-modal-title" class="village-modal__title">
              Paramètres d’affichage
            </h1>
            <div id="village-display" class="village-form-group village-display">
              <div class="village-form-group">
                <fieldset class="village-fieldset">
                  <legend class="village-fieldset__legend facile-text--regular" id="-legend">
                    Choisissez un thème pour personnaliser l’apparence du site.
                  </legend>
                  <div class="village-fieldset__content">
                    <div class="village-radio-group village-radio-rich">
                      <input value="light"
                             type="radio"
                             id="village-radios-theme-light"
                             name="village-radios-theme" />
                      <label class="village-label" for="village-radios-theme-light">
                        Thème clair
                      </label>
                      <div class="village-radio-rich__img" data-village-inject-svg>
                        <img src="/static/django_village/dist/artwork/light.svg" alt="" />
                        
                      </div>
                    </div>
                    <div class="village-radio-group village-radio-rich">
                      <input value="dark"
                             type="radio"
                             id="village-radios-theme-dark"
                             name="village-radios-theme" />
                      <label class="village-label" for="village-radios-theme-dark">
                        Thème sombre
                      </label>
                      <div class="village-radio-rich__img" data-village-inject-svg>
                        <img src="/static/django_village/dist/artwork/dark.svg" alt="" />
                        
                      </div>
                    </div>
                    <div class="village-radio-group village-radio-rich">
                      <input value="system"
                             type="radio"
                             id="village-radios-theme-system"
                             name="village-radios-theme" />
                      <label class="village-label" for="village-radios-theme-system">
                        Système
                        <span class="village-hint-text">Utilise les paramètres système.</span>
                      </label>
                      <div class="village-radio-rich__img" data-village-inject-svg>
                        <img src="/static/django_village/dist/artwork/system.svg" alt="" />
                        
                      </div>
                    </div>
                  </div>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</dialog>