Comment remplacer le paramètre de schéma de couleurs natif pour une meilleure expérience utilisateur ?

Remplacer le 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 pleinement 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 du thème du site Web

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 :

<code class="css">: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;
}</code>

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

<code class="css">body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}</code>

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 :

<code class="javascript">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();</code>

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

<code class="javascript">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');
  }  
}</code>

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

<code class="html"><label id="theme-switch" class="theme-switch" for="checkbox_theme">
  <input type="checkbox" id="checkbox_theme">
</label></code>

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!