src/components/toggleTheme.tsx - master - durovcode/Frontend

src/components/toggleTheme.tsx
74 строки3 KB
Alch3m1st
Correction placeholder, add text verification.
22 сен 2024, 06:38
22 сен 2024, 06:38a548aca
import { Moon, Sun } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useTheme } from "@/components/theme-provider"
import { DropdownMenuSeparator } from "@radix-ui/react-dropdown-menu"


export const ToggleTheme = () => {
    const { setTheme } = useTheme()

    function customSetTheme(theme: string) {
        setTheme(theme);
        window.location.reload();
    }

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant="outline">
                    <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                    <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                    <span className="sr-only">Toggle theme</span>
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => customSetTheme("light")}>
                    Light
                </DropdownMenuItem>
                <div className="themePickers">
                    <DropdownMenuItem onClick={() => customSetTheme("light-violet")}>
                        <span className="themePicker violet-picker"></span>
                        Violet
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => customSetTheme("light-green")}>
                        <span className="themePicker green-picker"></span>
                        Green
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => customSetTheme("light-blue")}>
                        <span className="themePicker blue-picker"></span>
                        Blue
                    </DropdownMenuItem>
                </div>
                <hr></hr>
                <DropdownMenuItem onClick={() => customSetTheme("dark")}>
                    Dark
                </DropdownMenuItem>
                <div className="themePickers">
                    <DropdownMenuItem onClick={() => customSetTheme("dark-violet")}>
                        <span className="themePicker violet-picker"></span>
                        Violet
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => customSetTheme("dark-green")}>
                        <span className="themePicker green-picker"></span>
                        Green
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => customSetTheme("dark-blue")}>
                        <span className="themePicker blue-picker"></span>
                        Blue
                    </DropdownMenuItem>
                </div>
                <hr></hr>
                <DropdownMenuItem onClick={() => customSetTheme("system")}>
                    System
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    )
}