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

Size
Button size.
type: string
default: md
values: xs, sm, md, lg, xl, full
Attrs
Sets attributes in the html tag.
type: gopress.Attrs

Example

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

Let's dive deeper and connect!

Hanariu is brought to you by Pay For Done. We specialize in crafting products and services rooted in design systems. Join our community to discuss how we can support you.


© 2024 Pay For Done. All Rights Reserved. Website compliant with W3C validation.