Scheme - gestion du dark mode
Bouton ouverture thèmes
<button class="village-btn--display village-btn village-btn--display village-btn" aria-controls="village-theme-modal" data-village-opened="false" id="button-6898" title="Paramètres d'affichage">
Paramètres d'affichage
</button>
Snippet modal de paramètres d'affichage
<dialog id="village-theme-modal" class="village-modal" aria-labelledby="village-theme-modal-title">
<div class="village-container village-container--fluid village-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-controls="village-theme-modal" id="button-6901" title="Fermer">
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-display">
<fieldset class="village-fieldset" id="display-fieldset">
<legend class="village-fieldset__legend--regular village-fieldset__legend" id="display-fieldset-legend">
Choisissez un thème pour personnaliser l’apparence du site.
</legend>
<div class="village-fieldset__element">
<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__pictogram">
<svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/environment/sun.svg#artwork-decorative"></use>
<use class="village-artwork-minor" href="../../../dist/artwork/pictograms/environment/sun.svg#artwork-minor"></use>
<use class="village-artwork-major" href="../../../dist/artwork/pictograms/environment/sun.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="village-fieldset__element">
<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__pictogram">
<svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/environment/moon.svg#artwork-decorative"></use>
<use class="village-artwork-minor" href="../../../dist/artwork/pictograms/environment/moon.svg#artwork-minor"></use>
<use class="village-artwork-major" href="../../../dist/artwork/pictograms/environment/moon.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="village-fieldset__element">
<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__pictogram">
<svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/system/system.svg#artwork-decorative"></use>
<use class="village-artwork-minor" href="../../../dist/artwork/pictograms/system/system.svg#artwork-minor"></use>
<use class="village-artwork-major" href="../../../dist/artwork/pictograms/system/system.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
Dépréciation
Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes
Scheme - gestion du dark mode
Bouton ouverture thèmes
<button class="village-link village-icon-theme-fill village-link--icon-left" aria-controls="village-theme-modal-deprecated" data-village-opened="false" id="link-7068">Paramètres d'affichage</button>
Snippet modal de paramètres d'affichage
<dialog id="village-theme-modal-deprecated" class="village-modal" aria-labelledby="village-theme-modal-deprecated-title">
<div class="village-container village-container--fluid village-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-controls="village-theme-modal-deprecated" id="button-7071" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="village-theme-modal-deprecated-title" class="village-modal__title">
Paramètres d’affichage
</h1>
<div id="village-display-deprecated" class="village-form-group village-display">
<div class="village-form-group">
<fieldset class="village-fieldset">
<legend class="village-fieldset__legend village-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="../../../dist/artwork/light.svg" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</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="../../../dist/artwork/dark.svg" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</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="../../../dist/artwork/system.svg" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>