fix: use resolvedTheme boolean

components/layout/main-nav.tsx

@@ -25,7 +25,7 @@ export function MainNav() {
       <Link href="/" className="mr-6 flex items-center space-x-2">
         <LightDarkImage
           LightImage="/logo-dark.png"
-          DarkImage="/logo-white.png"
+          DarkImage="/logo-light.png"
           alt="TurboETH"
           height={32}
           width={32}

components/layout/mobile-nav.tsx

@@ -30,8 +30,8 @@ export function MobileNav() {
       <div className="flex w-full items-center justify-between md:hidden">
         <Link href="/" className="mr-6 flex items-center space-x-2">
           <LightDarkImage
-            LightImage="/logo-fill.png"
-            DarkImage="/logo-fill.png"
+            LightImage="/logo-dark.png"
+            DarkImage="/logo-light.png"
             alt="TurboETH"
             height={32}
             width={32}
@@ -58,8 +58,8 @@ export function MobileNav() {
             onOpenChange={setOpen}
           >
             <LightDarkImage
-              LightImage="/logo-fill.png"
-              DarkImage="/logo-fill.png"
+              LightImage="/logo-dark.png"
+              DarkImage="/logo-light.png"
               alt="TurboETH"
               height={32}
               width={32}

components/shared/is-dark-theme.tsx

@@ -8,9 +8,9 @@ interface IsDarkThemeProps {
 }
 
 export const IsDarkTheme = ({ children }: IsDarkThemeProps) => {
-  const { theme } = useTheme()
+  const { resolvedTheme } = useTheme()
 
-  if (theme !== "light") return <>{children}</>
+  if (resolvedTheme === "dark") return <>{children}</>
 
   return null
 }

components/shared/is-light-theme.tsx

@@ -8,9 +8,9 @@ interface IsLightThemeProps {
 }
 
 export const IsLightTheme = ({ children }: IsLightThemeProps) => {
-  const { theme } = useTheme()
+  const { resolvedTheme } = useTheme()
 
-  if (theme === "light") return <>{children}</>
+  if (resolvedTheme === "light") return <>{children}</>
 
   return null
 }

components/shared/light-dark-image.tsx

@@ -21,12 +21,10 @@ const LightDarkImage = ({
   width,
   className,
 }: LightDarkImageProps) => {
-  const { theme } = useTheme()
-
-  console.log(theme, 'themetheme')
+  const { resolvedTheme } = useTheme()
 
   let imageUrl = LightImage
-  if (theme === "dark" || theme === "system" ) {
+  if (resolvedTheme === "dark") {
     imageUrl = DarkImage
   }