Theme Switcher
A Switch component for toggling between light, dark and system themes
The ThemeSwitcher component allows users to toggle between light, dark, and system themes.
It's built using the Switcher component with next-themes for theme management.
Since it uses the Switcher you can customize the color, size, and all the other props.
Usage
Since Runway already has next-themes set up in combination with
Tailwind, using the ThemeSwitcher is super easy:
javascript
1import ThemeSwitcher from "@/components/molecules/ThemeSwitcher"; 2 3<ThemeSwitcher />
Throughout your app, use dark: to apply styles in dark mode. i.e. bg-white dark:bg-black
Props
The TextLink component accepts the following props:
| Name | Type | Default | Description |
|---|---|---|---|
| color | string | gray | The color of the Switcher (see tailwind.config). |
| variant | "soft" | "solid" | soft | The variant of the Switcher. |
| size | "xs" |"sm" | "md" | "lg" | sm | The size of the Switcher. |
| borderRadius | string | "full" | Tailwind border-radius class (e.g. "none", "xs", "sm", "md", "lg", "full", etc.). |
| buttonBorder | boolean | true | If true, the Switcher will have a border around selected button. |
| border | boolean | false | If true, the Switcher will have a border. |
| vertical | boolean | false | If true, the Switcher will be displayed vertically. |
| system | boolean | true | If true, the Switcher will include a system theme option. |
| className | string | "" | Additional Tailwind classes for the Switcher. |
The ThemeSwitcher component uses the Switcher component.
Examples
Default Theme Switcher
Just drop it in your app and you're good to go!
Custom Theme Switcher
You can customize the color, size, and all the other props.