Introduction

Le mode sombre est un paramètre d'affichage qui utilise un arrière-plan sombre avec du texte et des éléments clairs. Il a gagné en popularité car il est beau et offre plusieurs avantages pratiques.

Les avantages du mode sombre incluent :

1. Réduction de la fatigue oculaire : Le mode sombre peut être plus doux pour les yeux, en particulier dans les environnements faiblement éclairés, car il réduit la quantité de lumière vive émise par les écrans.
2. Autonomie améliorée de la batterie sur les écrans OLED : Sur les écrans OLED (Organic Light Emitting Diode), le mode sombre peut économiser la batterie car les pixels noirs sont essentiellement éteints, consommant moins d'énergie que l'affichage de couleurs vives.

Dans ce didacticiel, nous expliquerons comment passer votre site Web en mode sombre à l'aide de CSS et JavaScript. Nous commencerons par un simple modèle de page Web sur le thème clair et le transformerons en un site Web avec un mode clair/sombre basculable, permettant aux utilisateurs de basculer facilement entre les thèmes clairs et sombres.

Mise en place du projet

Commençons par un simple modèle de page Web sur le thème de la lumière. Ensuite, nous le transformerons en un site Web avec un mode clair/sombre commutable, permettant aux utilisateurs de basculer entre les thèmes clairs et sombres.

Implémentation des styles du mode sombre

Choisir les couleurs

La première étape consiste à lister toutes les couleurs que nous utilisons et à choisir une version à thème sombre pour chacune d'elles. Dans le tableau ci-dessous, j'ai répertorié toutes les couleurs de la page et leurs versions sombres correspondantes.

Variables personnalisées

Nous utilisons ensuite des variables CSS pour créer une classe sombre et claire sur le corps avec ces variables.

body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}

Vous pouvez en savoir plus sur les variables CSS dans Utilisation des propriétés personnalisées CSS. Essentiellement, ce sont des entités définies à l'aide de deux tirets (--) qui stockent des valeurs à réutiliser dans un document. Les variables CSS facilitent la maintenance en permettant aux modifications de se mettre à jour automatiquement.

Couleurs des éléments dynamiques

Nous utilisons la fonction CSS var() pour insérer les valeurs des variables CSS. De cette façon, nous pouvons changer dynamiquement la couleur et mettre à jour une variable pour refléter les modifications dans l'ensemble du document, au lieu de modifier chacune d'entre elles manuellement.

Voici un exemple de l'élément nav et de ses enfants :

body {
  background-color: var(--body-bg);
  color: var(--primary-text);
}

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}

Basculer le mode clair/sombre avec JavaScript

Nous pouvons maintenant changer la classe du corps en sombre ou clair pour changer de thème. Tout d’abord, ajoutez un bouton à l’en-tête et définissez la fonction changeTheme() pour son événement de clic :

Définissez la fonction changeTheme() qui change la classe du corps :

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }
}

Et maintenant, les utilisateurs peuvent changer le thème du site en cliquant sur le bouton.

Vous pouvez voir le code du tutoriel dans le CodePen ci-dessous

Prochaines étapes

De plus, vous pouvez stocker les préférences de thème de l'utilisateur dans le stockage local. La mise à jour de la fonction changeTheme() pour enregistrer le thème sélectionné et le vérifier lors du chargement de la page garantira que le choix de l'utilisateur est mémorisé et appliqué automatiquement lors de sa prochaine visite.

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});

Ajout de la palette de couleurs : dark ; La propriété dans le thème sombre peut également garantir que certains éléments, qui seraient autrement difficiles à styliser, verront leur style modifié par le navigateur.

body.dark {
  color-scheme: dark;
}

Conclusion

En conclusion, l'ajout du mode sombre à votre site Web peut améliorer l'expérience utilisateur en réduisant la fatigue oculaire et en prolongeant la durée de vie de la batterie sur les écrans OLED. En suivant ce guide, vous pouvez facilement configurer un basculement en mode clair/sombre à l'aide de CSS et JavaScript. Personnalisez le mode sombre en fonction de votre design.

Partagez vos implémentations ou posez des questions dans les commentaires ci-dessous.