Theme Switcher

A component to switch between light, dark and system theme.

Installation

npx love-ui@latest add theme-switcher

Usage

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 { useState } from "react"

import { ThemeSwitcher } from "../../../../../packages/theme-switcher"

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

Color Picker Typography