Le pattern paramètre d'affichage permet de définir ses préférences de thème
<button class="fr-btn--display fr-btn" title="Paramètres d'affichage">
Paramètres d'affichage
</button>
<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-btn--close fr-btn" aria-controls="fr-theme-modal" title="Fermer">
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-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="../../../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="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="../../../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="fr-radio-group fr-radio-rich">
<input value="system" type="radio" id="fr-radios-theme-system" name="fr-radios-theme">
<label class="fr-label" for="fr-radios-theme-system">
Système
<span class="fr-hint-text">Utilise les paramètres système.</span>
</label>
<div class="fr-radio-rich__img" data-fr-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>
Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes
<button class="fr-link fr-icon-theme-fill fr-link--icon-left" aria-controls="fr-theme-modal" data-fr-opened="false">
Paramètres d'affichage
</button>
<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-btn--close fr-btn" aria-controls="fr-theme-modal" title="Fermer">
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-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="../../../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="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="../../../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="fr-radio-group fr-radio-rich">
<input value="system" type="radio" id="fr-radios-theme-system" name="fr-radios-theme">
<label class="fr-label" for="fr-radios-theme-system">
Système
<span class="fr-hint-text">Utilise les paramètres système.</span>
</label>
<div class="fr-radio-rich__img" data-fr-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>