From 200ee273920db02415879e24df5205b09e7806ed Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Sat, 25 Oct 2025 21:43:21 +0100
Subject: [PATCH] fix: use resolvedTheme to fallback to system theme

---
 apps/web/src/components/Dashboard.tsx         | 4 ++--
 apps/web/src/components/ThemeToggle.tsx       | 6 +++---
 apps/web/src/components/UserMenu.tsx          | 2 +-
 apps/web/src/views/home/components/Layout.tsx | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/Dashboard.tsx b/apps/web/src/components/Dashboard.tsx
index 61fa6a30..7d2bb5f1 100644
--- a/apps/web/src/components/Dashboard.tsx
+++ b/apps/web/src/components/Dashboard.tsx
@@ -39,7 +39,7 @@ export default function Dashboard({
   rightPanel,
   hasRightPanel = false,
 }: DashboardProps) {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   const { openModal } = useModal();
   const { availableWorkspaces, hasLoaded } = useWorkspace();
 
@@ -95,7 +95,7 @@ export default function Dashboard({
     }
   }, [hasLoaded, availableWorkspaces.length, openModal]);
 
-  const isDarkMode = theme === "dark";
+  const isDarkMode = resolvedTheme === "dark";
 
   return (
     <>
diff --git a/apps/web/src/components/ThemeToggle.tsx b/apps/web/src/components/ThemeToggle.tsx
index c24edd3e..2bfae290 100644
--- a/apps/web/src/components/ThemeToggle.tsx
+++ b/apps/web/src/components/ThemeToggle.tsx
@@ -2,7 +2,7 @@ import { CgDarkMode } from "react-icons/cg";
 import { useTheme } from "next-themes";
 
 const ThemeToggle = () => {
-  const { theme, setTheme } = useTheme();
+  const { theme, resolvedTheme, setTheme } = useTheme();
 
   const toggleTheme = () => {
     setTheme(theme === "light" ? "dark" : "light");
@@ -12,11 +12,11 @@ const ThemeToggle = () => {
     <button
       onClick={toggleTheme}
       className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
-      aria-label={`Switch to ${theme === "light" ? "dark" : "light"} theme`}
+      aria-label={`Switch to ${resolvedTheme === "light" ? "dark" : "light"} theme`}
     >
       <CgDarkMode
         className={`h-4 w-4 text-light-900 transition-transform duration-200 dark:text-dark-900 ${
-          theme === "dark" ? "rotate-180" : "rotate-0"
+          resolvedTheme === "dark" ? "rotate-180" : "rotate-0"
         }`}
       />
     </button>
diff --git a/apps/web/src/components/UserMenu.tsx b/apps/web/src/components/UserMenu.tsx
index 14727cd0..5d53cf03 100644
--- a/apps/web/src/components/UserMenu.tsx
+++ b/apps/web/src/components/UserMenu.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Menu, Transition } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
+import { useTheme } from "next-themes";
 import { Fragment } from "react";
 import { twMerge } from "tailwind-merge";
 
@@ -10,7 +11,6 @@ import { authClient } from "@kan/auth/client";
 
 import { useIsMobile } from "~/hooks/useMediaQuery";
 import { useModal } from "~/providers/modal";
-import { useTheme } from "next-themes";
 import { getAvatarUrl } from "~/utils/helpers";
 
 interface UserMenuProps {
diff --git a/apps/web/src/views/home/components/Layout.tsx b/apps/web/src/views/home/components/Layout.tsx
index 2bcdd379..88f1e7f7 100644
--- a/apps/web/src/views/home/components/Layout.tsx
+++ b/apps/web/src/views/home/components/Layout.tsx
@@ -7,13 +7,13 @@ import Footer from "./Footer";
 import Header from "./Header";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   const { data: session } = authClient.useSession();
 
   const isLoggedIn = !!session?.user;
 
-  const isDarkMode = theme === "dark";
+  const isDarkMode = resolvedTheme === "dark";
 
   return (
     <>