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",c="dark",a="data-village-theme",o="data-village-scheme",r=`:root[${a}], :root[${o}]`,m=()=>{document.documentElement.setAttribute(a,c),document.documentElement.style.colorScheme="dark"},n=()=>{window.matchMedia("(prefers-color-scheme: dark)").matches&&m()};(()=>{if(document.documentElement.matches(r)){const c=(()=>{try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}})()?localStorage.getItem("scheme"):"",a=document.documentElement.getAttribute(o);switch(!0){case c===t:m();break;case c===e:n();break;case a===t:m();break;case a===e:n()}}})();

</script>

Paramètres d’affichage

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