BrowserUX Theme Switcher

Features

• 🎛 Smart Behavior

  • Theme Switching
    Toggles between data-theme="light" and "dark" on a target element (default is html)
  • Automatic Persistence
    Stores the user's preference in localStorage and restores it on each visit
  • System Detection
    Automatically enables the theme based on prefers-color-scheme if no preference is set
  • theme-change Event
    Fires a custom event on every theme change (e.detail.theme = "light" | "dark")

• 🎨 Visual Customization

  • CSS Targeting (target)
    Allows applying the theme to a specific element (e.g., main, #app, etc.)
  • Customizable CSS Variables
    Extensive appearance customization via CSS properties (--bux-switch-*)
  • Custom Slots for Icons
    Customize icons using SVG tags, emojis, or images (light-icon, dark-icon)
  • Adaptive Images (.has-dark)
    Automatically switch images based on the theme (e.g., logo.png → logo-dark.png)

• ♿ Accessibility & Internationalization

  • Dynamic ARIA Labels
    Multilingual accessible texts automatically generated or customizable via data-label-*
  • Internationalization (lang)
    Support for multiple languages (auto-detection or forced via the lang attribute)

• 🔧 Flexible Integration

  • Optional Shadow DOM (no-shadow)
    Shadow DOM encapsulation can be disabled to allow more flexible global styling