Proposer une version sombre de son site internet devient petit à petit une norme que les sites se doivent de s'imposer pour le bien de leurs utilisateurs. Voyons dans cet article comment créer un thème sombre et comment faire pour détecter les préférences de notre visiteur.
1ère étape
Commençons par le code HTML !
<section>
<h1>Détecter la préférence d'un thème sombre ou clair de l'ordinateur de l'utilisateur.</h1>
<p>
Tutoriel par Believemy
</p>
<a href="https://believemy.com">Visiter</a>
</section>Tout va se jouer dans le CSS.
Dans l’étape précédente, nous ne faisons que nous amuser à créer un petit site de démonstration.
2ème étape
Stylisons la page avec body.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: arial, sans-serif;
background: var(--background);
color: var(--foreground);
text-align: center;
}Tout le secret réside dans l’utilisation des variables (--background et --foreground ici).
3ème étape
Passons au titre.
h1 {
color: var(--color);
margin-bottom: 0.6rem;
font-size: 3rem;
}
4ème étape
Occupons-nous du lien.
a {
display: inline-block;
text-decoration: none;
color: var(--foreground);
margin-top: 4rem;
padding: 1rem 2.4rem;
border-radius: 0.2rem;
background: var(--color);
}Nous continuons juste de jouer avec les variables pour les couleurs.
5ème étape
Créons les variables.
:root {
--background: #131416;
--foreground: #fff;
--color: #ff4754;
}
6ème étape
@media (prefers-color-scheme: light) {
:root {
--background: #fff;
--foreground: #131416;
--color: #ff4754;
}
}Vous vous attendiez à quelque chose de compliqué ? :-)
Nous inversons juste les valeurs de background et foreground.
