diff --git a/src/app/globals.css b/src/app/globals.css index 0cbb5b5..1197e25 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -50,11 +50,11 @@ */ } - .dark { + [data-theme='dark'], .dark { --background: 0 0% 0%; --foreground: 0 0% 98%; - --surface: rgb(23, 23, 23); + --surface: rgb(23, 23, 23); --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 00666e1..9e47b35 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -30,7 +30,6 @@ export default async function RootLayout({ diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx index 2d1018c..7df6eb6 100644 --- a/src/components/mode-toggle.tsx +++ b/src/components/mode-toggle.tsx @@ -1,7 +1,7 @@ "use client"; -import * as React from "react"; -import { MoonIcon, SunIcon } from "@radix-ui/react-icons"; +import {useEffect, useState} from "react"; +import { MoonIcon, SunIcon, Half2Icon } from "@radix-ui/react-icons"; import { useTheme } from "next-themes"; import { Button } from "./ui/button"; import { @@ -12,14 +12,36 @@ import { } from "./ui/dropdown-menu"; export function ModeToggle() { + const [mounted, setMounted] = useState(false); const { theme, setTheme } = useTheme(); const toggleTheme = () => { - setTheme(theme === "light" ? "dark" : "light"); + switch (theme) { + case 'system': + setTheme("dark"); + break; + case 'dark': + setTheme("light"); + break; + case 'light': + setTheme('system'); + break; + } }; + + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) { + return null; + } + + console.log(theme); return ( );