BrowserUX Theme Switcher

Fonctionnalités

• 🎛 Comportement intelligent

  • Changement de thème
    Alterne entre data-theme="light" et "dark" sur un élément cible (par défaut html)
  • Persistance automatique
    Stocke la préférence utilisateur dans localStorage et la restaure à chaque visite
  • Détection système
    Active automatiquement le thème en fonction de prefers-color-scheme si aucune préférence n’est définie
  • Événement theme-change
    Déclenche un événement personnalisé à chaque changement de thème (e.detail.theme = "light" | "dark")

• 🎨 Personnalisation visuelle

  • Ciblage CSS (target)
    Permet d’appliquer le thème à un élément spécifique (par ex. : main, #app, etc.)
  • Variables CSS modifiables
    Large personnalisation de l’apparence via des propriétés CSS (--bux-switch-*)
  • Slots personnalisés pour icônes
    Personnalisation des icônes avec des balises SVG, emojis ou images (light-icon, dark-icon)
  • Images adaptatives (.has-dark)
    Remplacement automatique d’images selon le thème (ex. logo.png → logo-dark.png)

• ♿ Accessibilité & internationalisation

  • Libellés ARIA dynamiques
    Textes accessibles multilingues générés automatiquement ou personnalisables (data-label-*)
  • Internationalisation (lang)
    Prise en charge de plusieurs langues (auto-détection ou forçage via attribut lang)

• 🔧 Intégration flexible

  • Shadow DOM optionnel (no-shadow)
    Encapsulation désactivable pour permettre un style global plus souple