Qwik-Theme-Toggle is a lightweight, zero‑flicker, SSR‑safe theme toggler built as a Qwik component.
It supports:
- Custom CSS themes (e.g.,
latte,dracula) - Auto mode with OS preference detection
- DaisyUI & Tailwind compatibility
- Icon modes (
light,dark,auto) - URL query param sync (optional)
- LocalStorage persistence
- SSR hydration consistency
npm install qwik-theme-toggle
# or
bun install qwik-theme-toggle<ThemeScript
themeStorageKey="theme"
themeQuery="theme" // optional
lightTheme="latte" // optional, default: 'light'
darkTheme="dracula" // optional, default: 'dark'
/><ThemeToggle
themeStorageKey="theme"
themeQuery="theme" // optional
lightTheme="latte" // optional, default: 'light'
darkTheme="dracula" // optional, default: 'dark'
textSize="text-3xl"
myClass="hover:text-secondary"
/>latte | dracula | auto
<html
class="latte"
data-theme="latte"
icon-theme="light"
/>
icon-theme is always:
light | dark | auto
Auto mode resolves OS preference:
auto → latte (light OS)
auto → dracula (dark OS)
src/
├── components/theme-toggle/
└── index.ts
example/
bun install
bun startbun run buildOutputs:
lib/— compiled librarylib-types/— TypeScript definitions
Codesandbox: https://codesandbox.io/p/github/lieranderl/qwik-theme-toggle/main
Video demo: https://www.youtube.com/watch?v=51iWIiZFCQY