Le pattern paramètre d'affichage permet de définir ses préférences de thème
<button class="fr-btn--display fr-btn fr-btn--display fr-btn" aria-controls="fr-theme-modal" data-fr-opened="false" 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-display">
<fieldset class="fr-fieldset" id="display-fieldset">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="display-fieldset-legend">
Choisissez un thème pour personnaliser l’apparence du site.
</legend>
<div class="fr-fieldset__element">
<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">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" xlink:href="../../../dist/artwork/pictograms/environment/sun.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" xlink:href="../../../dist/artwork/pictograms/environment/sun.svg#artwork-minor"></use>
<use class="fr-artwork-major" xlink:href="../../../dist/artwork/pictograms/environment/sun.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-fieldset__element">
<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">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" xlink:href="../../../dist/artwork/pictograms/environment/moon.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" xlink:href="../../../dist/artwork/pictograms/environment/moon.svg#artwork-minor"></use>
<use class="fr-artwork-major" xlink:href="../../../dist/artwork/pictograms/environment/moon.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-fieldset__element">
<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">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" xlink:href="../../../dist/artwork/pictograms/system/system.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" xlink:href="../../../dist/artwork/pictograms/system/system.svg#artwork-minor"></use>
<use class="fr-artwork-major" xlink:href="../../../dist/artwork/pictograms/system/system.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</fieldset>
</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-deprecated" data-fr-opened="false">
Paramètres d'affichage
</button>
<dialog id="fr-theme-modal-deprecated" class="fr-modal" role="dialog" aria-labelledby="fr-theme-modal-deprecated-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-deprecated" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-theme-modal-deprecated-title" class="fr-modal__title">
Paramètres d’affichage
</h1>
<div id="fr-display-deprecated" 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>