Remplacement du paramètre de schéma de couleurs natif

La mise en œuvre des modes sombres est devenue cruciale avec l'adoption généralisée dans divers systèmes d'exploitation. Bien que la prise en charge native des navigateurs existe via la règle multimédia CSS @media (prefers-color-scheme : dark), elle peut ne pas répondre entièrement aux préférences de l'utilisateur ou répondre aux navigateurs non pris en charge comme Microsoft Edge.

Découplage des paramètres système. from Website Theme

Pour fournir un contrôle utilisateur optimal, il est crucial de permettre aux utilisateurs de remplacer le paramètre de jeu de couleurs du système. Cela garantit qu’ils peuvent choisir le thème qu’ils préfèrent pour un site Web spécifique. Pour y parvenir, une combinaison de variables CSS et JavaScript est utilisée.

Configuration CSS

Les variables CSS définissent les paramètres du thème :

:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}

Les variables sont utilisées dans toute la feuille de style pour garantir la flexibilité :

body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}

Implémentation de JavaScript

JavaScript joue un rôle central dans la détection des préférences de l'utilisateur et le basculement entre les thèmes :

function detectColorScheme() {
  let theme = "light";

  if (localStorage.getItem("theme") == "dark") {
    theme = "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  }

  if (theme == "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}

detectColorScheme();

La fonction toggleTheme gère le changement de thème :

function switchTheme(e) {
  if (e.target.checked) {
    localStorage.setItem('theme', 'dark');
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
    document.documentElement.setAttribute('data-theme', 'light');
  }  
}

Ce JavaScript garantit la détection automatique du thème et permet aux utilisateurs de le remplacer par une case à cocher :

Conclusion

En combinant des variables CSS et JavaScript, nous donnons aux utilisateurs la possibilité de contrôler la palette de couleurs d'un site Web, quels que soient les paramètres de leur système. . Cette approche garantit une expérience utilisateur améliorée, répondant aux préférences individuelles et aux limitations des différents navigateurs.