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.
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.
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).
Passons au titre.
h1 {
color: var(--color);
margin-bottom: 0.6rem;
font-size: 3rem;
}
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.
Créons les variables.
:root {
--background: #131416;
--foreground: #fff;
--color: #ff4754;
}
@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.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.