M

MLOG

Français

Découvrez comment utiliser les media queries CSS pour créer des thèmes clair/sombre automatiques, améliorant l'accessibilité et l'attrait visuel pour un public mondial.

Fonction CSS Light-Dark : Adaptation automatique des thèmes pour un Web mondial

Dans le monde globalement connecté d'aujourd'hui, les sites web doivent être accessibles et visuellement attrayants pour des utilisateurs d'horizons et de préférences divers. L'une des manières les plus efficaces d'y parvenir est l'adaptation automatique des thèmes, en proposant spécifiquement des thèmes clair et sombre qui s'ajustent en fonction des paramètres système de l'utilisateur. Cet article de blog vous guidera dans la mise en œuvre de cette fonctionnalité à l'aide des media queries CSS et des propriétés personnalisées, garantissant une expérience de navigation fluide et confortable pour votre public international.

Pourquoi implémenter des thèmes clair et sombre automatiques ?

Il existe plusieurs raisons convaincantes d'intégrer l'adaptation automatique des thèmes dans vos projets web :

Comment implémenter l'adaptation automatique de thème avec CSS

Le cœur de l'adaptation automatique de thème réside dans la media query prefers-color-scheme. Cette media query CSS vous permet de détecter le schéma de couleurs préféré de l'utilisateur (clair ou sombre) et d'appliquer les styles correspondants.

Étape 1 : Définir les propriétés personnalisées (variables CSS)

Commencez par définir des propriétés personnalisées (variables CSS) pour stocker les valeurs de couleur de vos thèmes clair et sombre. Cela facilite le basculement entre les thèmes en mettant simplement à jour les valeurs des variables.


:root {
  --background-color: #ffffff; /* Arrière-plan du thème clair */
  --text-color: #000000; /* Texte du thème clair */
  --link-color: #007bff; /* Lien du thème clair */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Arrière-plan du thème sombre */
    --text-color: #ffffff; /* Texte du thème sombre */
    --link-color: #66b3ff; /* Lien du thème sombre */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

Dans cet exemple, nous définissons des variables pour la couleur de fond, la couleur du texte, la couleur des liens et les couleurs des boutons. Le sélecteur :root applique ces variables à l'ensemble du document. La media query @media (prefers-color-scheme: dark) remplace ensuite ces variables par les valeurs du thème sombre lorsque l'utilisateur a configuré son système en mode sombre.

Étape 2 : Appliquer les propriétés personnalisées à vos styles

Ensuite, appliquez ces propriétés personnalisées à vos styles CSS pour contrôler l'apparence des éléments de votre site web.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Transition en douceur */
}

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

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Ici, nous utilisons la fonction var() pour accéder aux valeurs de nos propriétés personnalisées. Nous avons également ajouté une propriété transition à l'élément body pour créer une transition fluide entre les thèmes.

Étape 3 : Test et affinage

Testez minutieusement votre implémentation sur différents navigateurs et systèmes d'exploitation. Les navigateurs modernes comme Chrome, Firefox, Safari et Edge prennent entièrement en charge la media query prefers-color-scheme. Vous pouvez basculer entre les modes clair et sombre dans les paramètres de votre système d'exploitation pour voir les changements se refléter sur votre site web.

Techniques avancées et considérations

Fournir un sélecteur de thème manuel

Bien que l'adaptation automatique de thème soit un excellent point de départ, certains utilisateurs peuvent préférer outrepasser manuellement les paramètres de leur système. Vous pouvez fournir un sélecteur de thème manuel en utilisant JavaScript et le stockage local (local storage).

HTML :

JavaScript :


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

let currentTheme = localStorage.getItem('theme') || 'auto'; // Par défaut sur auto

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Appliquer le thème initial au chargement de la page
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Si réglé sur auto, laisser prefers-color-scheme décider
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS : Ajoutez le CSS suivant avec le CSS précédent. Notez la surcharge manuelle :


body.light-theme {
  --background-color: #ffffff; /* Arrière-plan du thème clair */
  --text-color: #000000; /* Texte du thème clair */
  --link-color: #007bff; /* Lien du thème clair */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Arrière-plan du thème sombre */
  --text-color: #ffffff; /* Texte du thème sombre */
  --link-color: #66b3ff; /* Lien du thème sombre */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Cet extrait de code ajoute un bouton qui permet aux utilisateurs de basculer entre les thèmes clair, sombre et automatique. Le thème sélectionné est stocké dans le stockage local afin qu'il persiste d'un chargement de page à l'autre.

Gérer les images et les SVG

Certaines images et SVG могут ne pas bien rendre dans les thèmes clair et sombre. Vous pouvez utiliser les media queries CSS pour afficher conditionnellement différentes versions de ces ressources.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Cet extrait de code affiche une image (avec la classe light-mode) en mode clair et une autre image (avec la classe dark-mode) en mode sombre.

Considérations sur la palette de couleurs pour les publics internationaux

Lorsque vous choisissez des palettes de couleurs pour vos thèmes clair et sombre, soyez conscient des associations culturelles et des considérations d'accessibilité. Voici quelques directives générales :

Considérations sur les performances

Bien que la mise en œuvre de l'adaptation automatique des thèmes soit relativement simple, il est important de tenir compte de l'impact potentiel sur les performances. Évitez d'utiliser des sélecteurs CSS ou des animations trop complexes qui peuvent ralentir le rendu. Assurez-vous également que vos propriétés personnalisées sont définies efficacement pour minimiser la surcharge liée à la recherche de variables.

Voici quelques bonnes pratiques pour optimiser les performances :

Bonnes pratiques d'accessibilité

Assurez-vous que vos thèmes clair et sombre respectent les directives d'accessibilité, telles que les WCAG (Web Content Accessibility Guidelines). Cela inclut de fournir un contraste de couleurs suffisant, d'utiliser du HTML sémantique et de s'assurer que tous les éléments interactifs sont accessibles au clavier.

Voici quelques bonnes pratiques d'accessibilité spécifiques à suivre :

Exemples dans différentes régions

Considérez ces exemples de la manière dont les thèmes clair et sombre peuvent être adaptés à divers publics mondiaux :

Conclusion

La mise en œuvre de thèmes clair et sombre automatiques est une étape cruciale vers la création d'une expérience web plus accessible et conviviale pour un public mondial. En tirant parti des media queries CSS et des propriétés personnalisées, vous pouvez facilement adapter l'apparence de votre site web pour correspondre aux préférences de l'utilisateur, réduire la fatigue oculaire et améliorer l'accessibilité pour les utilisateurs malvoyants. N'oubliez pas de tenir compte des associations culturelles, des directives d'accessibilité et des considérations de performance pour garantir une expérience de navigation fluide et inclusive pour tous.

En adoptant ces techniques, vous démontrez un engagement envers les principes de conception web modernes et répondez aux divers besoins de votre public international, faisant de votre site web un espace accueillant et confortable pour tous.