Thème sombre avec CSS

Ces dernières années, le mode sombre est devenu une partie intégrante du design web moderne. Non seulement il réduit la fatigue oculaire lors du travail dans des conditions de faible luminosité, mais il économise également la batterie sur les appareils équipés d'écrans OLED. L'implémentation d'un thème sombre sur un site web en utilisant CSS est assez simple, mais il est important de le faire correctement pour que les utilisateurs puissent facilement basculer entre les versions claire et sombre.

Principes de Base du Travail avec les Thèmes

Les thèmes sombres et clairs sont deux ensembles de styles qui peuvent être appliqués dynamiquement aux éléments du site web. Idéalement, les utilisateurs devraient avoir la possibilité de choisir quel thème utiliser, mais les préférences système du système d'exploitation peuvent également être prises en compte.

Il existe deux principales méthodes pour implémenter un thème sombre :

Utilisation de variables CSS et basculement des styles via JavaScript
Application automatique du thème basée sur les paramètres système en utilisant prefers-color-scheme

Les deux approches peuvent être combinées pour rendre la gestion des thèmes plus flexible.

Utilisation des Variables CSS pour les Thèmes

L'une des méthodes les plus pratiques pour implémenter un thème sombre est d'utiliser des variables CSS (custom properties). Cela facilite la gestion des couleurs et autres paramètres de style.

Tout d'abord, créons des variables racine dans :root qui seront utilisées dans tout le document :

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

.dark-theme {
    --bg-color: #121212;
    --text-color: #ffffff;
}

Ensuite, appliquons ces variables aux éléments de la page :

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

Maintenant, il suffit d'ajouter la classe .dark-theme à <html> ou <body> pour changer les couleurs.

Basculement des Thèmes avec JavaScript

Pour permettre aux utilisateurs de basculer entre les thèmes clair et sombre, vous pouvez utiliser JavaScript :

const toggleThemeBtn = document.getElementById('theme-toggle');

toggleThemeBtn.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark-theme');

    // Sauvegarder le choix de l'utilisateur dans localStorage
    if (document.documentElement.classList.contains('dark-theme')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

// Vérifier les paramètres sauvegardés au chargement de la page
if (localStorage.getItem('theme') === 'dark') {
    document.documentElement.classList.add('dark-theme');
}

De cette façon, le choix de l'utilisateur est conservé après le rechargement de la page.

Détection Automatique du Thème Système

Si vous souhaitez respecter les paramètres système de l'utilisateur, vous pouvez utiliser prefers-color-scheme. Cette media query applique automatiquement le thème approprié :

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #ffffff;
    }
}

Cette méthode est pratique car elle adapte immédiatement le site web aux préférences système. Cependant, si l'utilisateur souhaite sélectionner manuellement un thème, vous devrez combiner cette approche avec JavaScript.

Combinaison de la Détection Automatique et de la Sélection Manuelle

Pour prendre en compte les deux méthodes, vous pouvez d'abord vérifier s'il existe un choix de thème sauvegardé dans localStorage. Sinon, appliquez les paramètres système :

const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

if (userTheme) {
    document.documentElement.classList.toggle('dark-theme', userTheme === 'dark');
} else {
    document.documentElement.classList.toggle('dark-theme', systemTheme === 'dark');
}

Création d'un Commutateur Convivial

Maintenant, ajoutons un bouton de basculement de thème en HTML :

<button id="theme-toggle">Changer de Thème</button>

Le bouton permet à l'utilisateur de changer manuellement de thème, et la logique de sauvegarde du choix rend l'interaction pratique.

Amélioration des Animations de Transition

Pour rendre le changement de thème fluide, vous pouvez ajouter une animation :

* {
    transition: background-color 0.3s, color 0.3s;
}

Cela crée un effet d'assombrissement ou d'éclaircissement progressif lors du changement de thème.

Exemple de Basculement entre Thème Clair et Sombre

Testez le code sur une page séparée

Conclusion

L'implémentation d'un thème sombre sur un site web en utilisant CSS et JavaScript est une tâche relativement simple mais importante. L'utilisation de variables CSS rend le code pratique et évolutif, tandis que la combinaison de prefers-color-scheme et localStorage offre aux utilisateurs une flexibilité dans leurs choix. En résultat, le site web sera adaptatif et confortable à utiliser dans toutes les conditions d'éclairage.

Articles CSS Connexes

Modèle:Encyclopedia CSS/Navigation Modèle:Navigation/CSS