ThemeSwitcher

ThemeSwitcher is a button for switching between light and dark mode for Tailwind components.

How it works

Component is implementing idea of switching mode from Tailwind documentation. It's using Alpine.store `for` managing state of dark mode, and it has additional feature - it can detect the user's system theme and react to its change.

All js logic for this component is in web/app/src/themeSwitcher.ts file.

ThemeSwitcher

Example

1// Theme switcher button example
2// Sizes: xs, sm, md, lg, xl
3
4@atoms.ThemeSwitcher(&atoms.ThemeSwitcherBosons{
5  Size: "md",
6})