Mode sombre et mode nuit avec Tailwind CSS et variables CSS

Le mode sombre et le mode nuit sont des incontournables pour les sites Web modernes. Ils améliorent l'accessibilité et donnent aux utilisateurs la possibilité de choisir leur look préféré. Voyons comment vous pouvez créer cette fonctionnalité à l'aide de Tailwind CSS et des variables CSS.

Pourquoi Tailwind CSS et les variables CSS fonctionnent si bien

• Variables CSS : simplifiez la gestion des couleurs pour différents thèmes.
• Classe parent : basculez entre les thèmes en changeant de classe parent unique.
• Intégration JavaScript : mettre à jour dynamiquement les thèmes avec un minimum effort.

Configuration des couleurs du thème avec des variables CSS

Commencez par définir les couleurs de vos thèmes. Ces variables CSS seront à l'intérieur d'une classe parent pour faciliter le changement de thème.

/* Light Theme (Default) */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

/* Dark Theme */
.theme-dark {
  --bg-color: #000000;
  --text-color: #ffffff;
}

/* Solarized Theme */
.theme-solarized {
  --bg-color: #002b36;
  --text-color: #839496;
}

Utilisation de variables CSS dans les classes Tailwind

Tailwind facilite l'utilisation des variables CSS pour le style.

<div>



<h2>
  
  
  Adding JavaScript for Dynamic Theme Switching
</h2>

<p>Here’s the JavaScript to handle theme changes dynamically:<br>
</p>

<pre class="brush:php;toolbar:false">const themeSelect = document.getElementById("theme-select");
const rootElement = document.documentElement;

// Listen for dropdown changes
themeSelect.addEventListener("change", (event) => {
  const selectedTheme = event.target.value;

  // Remove all theme classes
  rootElement.classList.remove("theme-light", "theme-dark", "theme-solarized");

  // Add the selected theme class
  rootElement.classList.add(selectedTheme);
});

// Set default theme on load
window.addEventListener("DOMContentLoaded", () => {
  rootElement.classList.add("theme-light");
});

Changement de thème en temps réel en action

Lorsque les utilisateurs choisissent un thème dans la liste déroulante, les couleurs d'arrière-plan et du texte changent instantanément. Cette mise à jour dynamique rend l'expérience transparente et interactive.

Pourquoi cette approche est géniale

• Évolutivité : ajoutez de nouveaux thèmes en définissant des variables CSS supplémentaires.
• Séparation propre : CSS gère les thèmes ; JavaScript gère la logique.
• Performance : les variables CSS rendent les mises à jour fluides et efficaces.

Enregistrer les préférences de thème avec LocalStorage

Montez d'un cran en enregistrant le thème sélectionné afin qu'il persiste d'une session à l'autre.

// Save the theme
themeSelect.addEventListener("change", (event) => {
  const selectedTheme = event.target.value;
  rootElement.classList.remove("theme-light", "theme-dark", "theme-solarized");
  rootElement.classList.add(selectedTheme);
  localStorage.setItem("theme", selectedTheme);
});

// Load the saved theme
window.addEventListener("DOMContentLoaded", () => {
  const savedTheme = localStorage.getItem("theme") || "theme-light";
  rootElement.classList.add(savedTheme);
});

Conseils supplémentaires pour le mode sombre et le mode nuit

• Plus de thèmes : ajoutez des thèmes à contraste élevé ou personnalisés définis par l'utilisateur.
• Transitions : utilisez les transitions CSS pour des changements fluides de couleur d'arrière-plan et de texte.
• Accessibilité : assurez-vous que votre sélecteur de thème fonctionne bien avec les claviers et les lecteurs d'écran.

Avec Tailwind CSS et les variables CSS, la création d'un mode sombre dynamique ou d'un mode nuit est simple et efficace. Essayez-le et voyez comment il transforme l'expérience utilisateur de votre site Web !

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!