Mode Sombre avec CSSeducteur

CSSeducteur offre une intégration native pour gérer le mode sombre dans vos projets. Grâce à son modificateur puissant cs-dark, vous pouvez créer des interfaces modernes et élégantes qui s'adaptent automatiquement aux préférences de vos utilisateurs.

Utilisation de Base

Pour activer le mode sombre, il suffit d'utiliser le modificateur cs-dark dans vos classes CSS. Voici un exemple simple :

<div class="cs-bg-white cs-dark:bg-gray-900">
  <p class="cs-text-gray-900 cs-dark:text-white">
    Texte en mode sombre automatique
  </p>
</div>

Basculer en Mode Sombre Dynamiquement

Vous pouvez également permettre à vos utilisateurs de basculer entre le mode clair et le mode sombre à l'aide de JavaScript :

const toggleDarkMode = () => {
  document.documentElement.classList.toggle('dark');
};

En attachant cette fonction à un bouton, vous pouvez offrir une expérience utilisateur fluide :

<button onClick={toggleDarkMode} class="cs-btn cs-dark:cs-btn-light">
  Basculer le mode
</button>

Préférence Système

CSSeducteur prend en charge les préférences système par défaut. Vous pouvez détecter si l'utilisateur préfère un thème sombre et appliquer automatiquement les classes correspondantes :

// Détecter la préférence du mode sombre du système
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark');
}

Cette approche garantit que votre application respecte les choix de vos utilisateurs dès leur première visite.

Avantages de CSSeducteur pour le Mode Sombre

• Simplifie la gestion des thèmes avec des classes intuitives comme cs-dark.
• Prend en charge les préférences utilisateur avec prefers-color-scheme.
• Facilement extensible pour répondre aux besoins de design avancés.