Fonction CSS Clair-Sombre : Changement de Thème Automatique pour une Audience Mondiale

Dans l'environnement web actuel, répondre aux préférences des utilisateurs est primordial. Un aspect significatif de ceci est d'offrir la possibilité de basculer entre les thèmes clairs et sombres. Ce n'est pas seulement une question d'esthétique ; il s'agit d'accessibilité et de réduction de la fatigue oculaire, en particulier pour les utilisateurs dans différents fuseaux horaires ou travaillant dans des conditions d'éclairage variables. La requête média `prefers-color-scheme` de CSS offre un moyen propre et efficace d'ajuster automatiquement le thème de votre site Web en fonction des préférences du système de l'utilisateur. Cet article vous guidera dans l'implémentation de cette fonctionnalité pour une audience mondiale, garantissant une expérience fluide et conviviale.

Pourquoi Implémenter le Changement de Thème Clair/Sombre ?

Offrir des thèmes clairs et sombres présente plusieurs avantages clés :

• Amélioration de l'Expérience Utilisateur : De nombreux utilisateurs trouvent le mode sombre plus agréable pour les yeux, surtout dans des environnements peu éclairés. Inversement, le mode clair peut être préféré dans des espaces très éclairés. Offrir le choix améliore la satisfaction de l'utilisateur.
• Accessibilité : Les utilisateurs malvoyants peuvent trouver un thème plus accessible que l'autre. Leur donner le choix améliore l'inclusivité.
• Réduction de la Fatigue Oculaire : Le mode sombre peut réduire la fatigue oculaire, en particulier pour les utilisateurs qui passent de longues heures devant les écrans. Ceci est particulièrement pertinent pour les utilisateurs de différents fuseaux horaires travaillant tard dans la nuit.
• Autonomie de la Batterie (Écrans OLED) : Sur les appareils dotés d'écrans OLED, l'utilisation du mode sombre peut prolonger considérablement la durée de vie de la batterie.
• Tendance de Conception Moderne : Le mode sombre est une tendance de conception populaire, et son offre montre que votre site Web est à jour et attentif aux préférences des utilisateurs.

Comprendre `prefers-color-scheme`

La requête média `prefers-color-scheme` permet à votre site Web de détecter le réglage de schéma de couleurs préféré de l'utilisateur dans son système d'exploitation ou son navigateur. Elle peut avoir trois valeurs possibles :

• `light` : Indique que l'utilisateur a demandé un thème clair.
• `dark` : Indique que l'utilisateur a demandé un thème sombre.
• `no-preference` : Indique que l'utilisateur n'a pas exprimé de préférence. C'est la valeur par défaut si l'utilisateur n'a pas explicitement choisi de thème clair ou sombre.

Vous pouvez utiliser cette requête média dans votre CSS pour appliquer différents styles en fonction des préférences de l'utilisateur.

Étapes d'Implémentation : Un Guide Pratique

Voici un guide étape par étape pour implémenter le changement de thème clair et sombre automatique à l'aide de CSS :

1. Définir les Propriétés Personnalisées CSS (Variables)

La clé d'une transition fluide réside dans l'utilisation des propriétés personnalisées CSS (également connues sous le nom de variables CSS). Définissez des variables pour les couleurs, les arrière-plans et d'autres attributs de style que vous souhaitez modifier en fonction du thème.

Exemple :

            
:root {
  --background-color: #ffffff; /* Arrière-plan mode clair */
  --text-color: #000000; /* Texte mode clair */
  --link-color: #007bff; /* Couleur de lien mode clair */
}

            

              
                Copy
              
            
          

Ce code définit trois propriétés personnalisées : `--background-color`, `--text-color`, et `--link-color`. Ces propriétés sont initialement définies avec des valeurs adaptées à un thème clair.

2. Utiliser les Propriétés Personnalisées dans Vos Styles

Appliquez ces propriétés personnalisées dans tout votre CSS pour styliser les éléments de votre site Web.

Exemple :

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

a {
  color: var(--link-color);
}

            

              
                Copy
              
            
          

Ce code définit la `background-color` de l'élément `body` sur la valeur de la propriété personnalisée `--background-color`, la `color` de l'élément `body` sur la valeur de la propriété personnalisée `--text-color`, et la `color` de l'élément `a` (lien) sur la valeur de la propriété personnalisée `--link-color`.

3. Implémenter la Requête Média `prefers-color-scheme`

Maintenant, utilisez la requête média `prefers-color-scheme` pour redéfinir les propriétés personnalisées pour le thème sombre.

Exemple :

            
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Arrière-plan mode sombre */
    --text-color: #ffffff; /* Texte mode sombre */
    --link-color: #66b3ff; /* Couleur de lien mode sombre */
  }
}

            

              
                Copy
              
            
          

Ce code définit une requête média qui applique les styles à l'intérieur des accolades uniquement si la préférence du système de l'utilisateur est définie sur le mode sombre. À l'intérieur de la requête média, les propriétés personnalisées sont redéfinies avec des valeurs adaptées à un thème sombre.

4. Gérer `no-preference`

Bien que ce ne soit pas strictement nécessaire, vous pouvez explicitement gérer le cas `no-preference` si vous souhaitez garantir un thème par défaut spécifique. Si aucune préférence n'est sélectionnée sur l'OS, les navigateurs passeront généralement au clair par défaut. Cependant, être explicite garantit que le site s'affiche de la même manière sur différents navigateurs.

Exemple :

            
@media (prefers-color-scheme: no-preference) {
  :root {
    --background-color: #f0f0f0; /* Arrière-plan par défaut (gris clair) */
    --text-color: #333333; /* Texte par défaut (gris foncé) */
  }
}

            

              
                Copy
              
            
          

Dans cet exemple, nous définissons un arrière-plan gris clair et un texte gris foncé pour les utilisateurs qui n'ont pas explicitement sélectionné de thème.

Exemple Complet

Voici un exemple complet combinant toutes les étapes :

            
:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --link-color: #007bff;
  --header-background-color: #f8f9fa;
  --header-text-color: #212529;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

header {
  background-color: var(--header-background-color);
  color: var(--header-text-color);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

h1, h2, h3 {
  margin-top: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #ffffff;
    --link-color: #66b3ff;
    --header-background-color: #212529;
    --header-text-color: #f8f9fa;
  }
}

            

              
                Copy
              
            
          

Aller Plus Loin : Ajouter un Bouton de Basculement Manuel

Bien que le changement de thème automatique soit pratique, certains utilisateurs préfèrent choisir leur thème manuellement. Vous pouvez ajouter un bouton de basculement à votre site Web qui permet aux utilisateurs de remplacer la préférence du système.

1. Structure HTML

Ajoutez un bouton ou une case à cocher à votre HTML pour servir de bascule de thème.

            
Basculer le Thème

            

              
                Copy
              
            
          

2. Logique JavaScript

Utilisez JavaScript pour détecter les clics sur le bouton de basculement et mettre à jour une classe CSS sur l'élément `body` (ou tout autre élément parent approprié). Stockez la préférence de l'utilisateur dans `localStorage` pour la conserver entre les sessions.

            
const themeToggle = document.getElementById('theme-toggle');
const body = document.body; // ou document.documentElement
const localStorageKey = 'theme';

// Fonction pour définir le thème
function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
  } else {
    body.classList.remove('dark-theme');
  }
  localStorage.setItem(localStorageKey, theme);
}

// Fonction pour obtenir le thème stocké
function getStoredTheme() {
  return localStorage.getItem(localStorageKey) || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
}

// Définir le thème initial
const initialTheme = getStoredTheme();
setTheme(initialTheme);

// Basculer le thème lors du clic sur le bouton
themeToggle.addEventListener('click', () => {
  const currentTheme = body.classList.contains('dark-theme') ? 'light' : 'dark';
  setTheme(currentTheme);
});

// Écouter les changements de préférence système
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
    if(localStorage.getItem(localStorageKey) === null) {
        const newColorScheme = event.matches ? "dark" : "light";
        setTheme(newColorScheme)
    }
});

            

              
                Copy
              
            
          

3. Stylisation CSS

Modifiez votre CSS pour appliquer les styles du thème sombre en fonction de la classe `dark-theme`.

            
.dark-theme {
  --background-color: #121212;
  --text-color: #ffffff;
  --link-color: #66b3ff;
  --header-background-color: #212529;
  --header-text-color: #f8f9fa;
}

            

              
                Copy
              
            
          

Cette approche permet aux utilisateurs de basculer manuellement les thèmes, remplaçant ainsi la préférence du système. Le `localStorage` garantit que le choix de l'utilisateur est mémorisé entre les sessions. Le gestionnaire d'événements garantit que si l'utilisateur n'a PAS sélectionné manuellement de thème, mais que la préférence système change, le site répondra en conséquence.

Bonnes Pratiques pour une Audience Mondiale

Lors de l'implémentation du changement de thème clair/sombre pour une audience mondiale, considérez ces bonnes pratiques :

• Accessibilité : Assurez-vous que les deux thèmes respectent les directives d'accessibilité (WCAG). Faites attention au contraste des couleurs et à la lisibilité. Des outils comme le vérificateur de contraste des couleurs WebAIM (https://webaim.org/resources/contrastchecker/) peuvent être utiles.
• Tests Utilisateurs : Testez vos thèmes avec des utilisateurs de différentes régions et cultures pour recueillir leurs commentaires sur leurs préférences et identifier tout problème potentiel.
• Performance : Optimisez votre CSS pour minimiser l'impact sur le temps de chargement des pages. Évitez les sélecteurs complexes et les styles inutiles.
• Conception Cohérente : Maintenez une esthétique de conception cohérente sur les deux thèmes. Évitez les transitions brusques ou les éléments qui semblent déplacés dans un thème ou l'autre.
• Localisation : Si votre site Web est localisé, assurez-vous que le mécanisme de changement de thème est également localisé. Par exemple, le texte sur le bouton de changement de thème doit être traduit dans la langue de l'utilisateur.

Considérations Avancées

• Animations et Transitions : Utilisez des animations et des transitions subtiles pour rendre le processus de changement de thème plus fluide et visuellement attrayant. Utilisez la propriété `transition` en CSS.
• Images et Icônes : Envisagez d'utiliser différentes versions d'images et d'icônes pour les thèmes clairs et sombres. Les images SVG sont particulièrement bien adaptées à cela, car leurs couleurs peuvent être facilement modifiées à l'aide de CSS.
• Bibliothèques Tierces : Il existe diverses bibliothèques et frameworks JavaScript qui peuvent simplifier l'implémentation du changement de thème clair/sombre. Cependant, soyez conscient de leurs dépendances et de leur impact potentiel sur les performances.
• Rendu Côté Serveur (SSR) : Si vous utilisez le SSR, assurez-vous que le thème est correctement rendu sur le serveur. Cela peut nécessiter de transmettre la préférence de thème de l'utilisateur du client au serveur.
• Architectures Basées sur les Composants : Pour les applications monopages (SPA) ou les sites construits avec des architectures basées sur les composants comme React, Vue ou Angular, appliquez des classes de thème ou des propriétés personnalisées au niveau du composant pour un contrôle plus granulaire.

Conclusion

L'implémentation du changement de thème clair et sombre est un investissement précieux en termes d'expérience utilisateur et d'accessibilité. En utilisant la requête média `prefers-color-scheme` de CSS et les propriétés personnalisées, vous pouvez créer une expérience fluide et conviviale pour une audience mondiale. N'oubliez pas de prendre en compte l'accessibilité, les tests utilisateurs et l'optimisation des performances pour garantir que votre implémentation est efficace et inclusive. L'ajout d'un remplacement manuel donne aux utilisateurs un contrôle total. En suivant les meilleures pratiques décrites dans cet article, vous pouvez créer un site Web à la fois visuellement attrayant et accessible à tous les utilisateurs, quelles que soient leurs préférences ou leur environnement.