BrowserUX Theme Switcher
A modern solution to offer a light/dark theme selector and enhance the user experience across all your web interfaces.
BrowserUX Theme Switcher is a lightweight, accessible, and customizable Web Component designed to easily add a theme switcher button to any website or application. It automatically detects the system theme, remembers the user's preference, and applies the correct theme.
npm install browserux-theme-switcher
Web component
See the CHANGELOG
Key Features of BrowserUX Theme Switcher
- 🎚 Toggles
data-theme="light"/"dark"onhtmlor a custom target element - 💾 Persists user preference in
localStorage - 🕶 Detects system preference via
prefers-color-schemeon first load - 📢 Dispatches a
theme-changecustom event on every theme change - 🧠 Dynamic ARIA labels: multilingual, auto-detected or customizable
- 🌐 Built-in i18n for 9 languages (
en,fr,es,de,ja,ru,pt,it,nl) - 🖼 Automatic image swapping via filename convention or explicit
data-src-*attributes - 🎨 Fully customizable via CSS custom properties (
--bux-switch-*) - 🧩 Optional Shadow DOM, disable with
no-shadow