Collaboration
Project Management
Finance
Theme Switcher
A component to switch between light, dark and system theme.
Installation
npx love-ui@latest add theme-switcherUsage
import { ThemeSwitcher } from "@/components/theme-switcher"<ThemeSwitcher />Features
- Switch between light, dark and system theme
- Controlled and uncontrolled mode
Examples
Controlled mode
"use client";
import { ThemeSwitcher } from "../../../../../packages/theme-switcher";
import { useState } from "react";
const Example = () => {
const [theme, setTheme] = useState<"light" | "dark" | "system">("system");
return (
<ThemeSwitcher defaultValue="system" onChange={setTheme} value={theme} />
);
};
export default Example;
Uncontrolled mode
Check the console for the onChange event.
"use client";
import { ThemeSwitcher } from "../../../../../packages/theme-switcher";
const Example = () => (
<ThemeSwitcher defaultValue="system" onChange={console.log} />
);
export default Example;