Theme Toggle

A button component that toggles between light and dark mode. Displays a sun icon in dark mode and a moon icon in light mode.

Usage

component.tsx

import ThemeToggle from "@/components/ui/theme-toggle"

export default function Page() {
    return (
        <ThemeToggle />
    )
}

State	Display
Dark mode	Displays a `Sun` icon. Clicking switches to light mode.
Light mode	Displays a `Moon` icon. Clicking switches to dark mode.
Not mounted	Renders `null` to avoid hydration mismatch.

The theme-toggle.tsx file already comes in the EasyToLaunch repo by default.