fix: color mode conditional components

components/shared/is-dark-theme.tsx

@@ -2,16 +2,16 @@
 
 import { ReactNode } from "react"
 
-import { useColorMode } from "@/lib/state/color-mode"
+import { useTheme } from "next-themes"
 
 interface IsDarkThemeProps {
   children: ReactNode
 }
 
 export const IsDarkTheme = ({ children }: IsDarkThemeProps) => {
-  const [colorMode] = useColorMode()
+  const { theme } = useTheme()
 
-  if (colorMode !== "light") return <>{children}</>
+  if (theme !== "light") return <>{children}</>
 
   return null
 }

components/shared/is-light-theme.tsx

@@ -2,16 +2,16 @@
 
 import { ReactNode } from "react"
 
-import { useColorMode } from "@/lib/state/color-mode"
+import { useTheme } from "next-themes"
 
 interface IsLightThemeProps {
   children: ReactNode
 }
 
 export const IsLightTheme = ({ children }: IsLightThemeProps) => {
-  const [colorMode] = useColorMode()
+  const { theme } = useTheme()
 
-  if (colorMode === "light") return <>{children}</>
+  if (theme === "light") return <>{children}</>
 
   return null
 }

components/shared/mode-toggle.tsx

@@ -13,7 +13,6 @@ import {
 
 export function ModeToggle() {
   const { setTheme } = useTheme()
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>

styles/globals.css

@@ -48,7 +48,7 @@
   }
 
   .dark {
-    --background: 0 0% 3.9%;
+    --background: 0 0% 7.5%;
     --foreground: 0 0% 98%;
 
     --card: 0 0% 3.9%;