Retour

Combinaison de couleur (scheme)

scheme permet la définition de couleurs principales et du darkmode pour le Design System de l'Etat.

Snippet à inclure en premier dans <body></body>

<script type="module">
  const e="system",t="dark",a="dark",c=()=>{document.documentElement.setAttribute("data-fr-theme",a),document.documentElement.style.colorScheme="dark"},o=()=>{window.matchMedia("(prefers-color-scheme: dark)").matches&&c()};(()=>{if(document.documentElement.matches(":root[data-fr-theme], :root[data-fr-scheme]")){const a=(()=>{try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}})()?localStorage.getItem("scheme"):"",r=document.documentElement.getAttribute("data-fr-scheme");switch(!0){case a===t:c();break;case a===e:o();break;case r===t:c();break;case r===e:o()}}})();

</script>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.