From 2c44df3a5cb67d7055cdf7570d499779f60ceb80 Mon Sep 17 00:00:00 2001
From: Yunxiao Xu <xuyunxiao2001@gmail.com>
Date: Sat, 21 Feb 2026 08:32:29 -0800
Subject: [PATCH] fix(frontend): update theme context usage

- Add theme-context.tsx
- Update ThemeToggle.tsx to use ThemeContext
---
 .../src/components/layout/ThemeToggle.tsx     |  2 +-
 frontend/src/components/theme-context.tsx     | 20 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/theme-context.tsx

diff --git a/frontend/src/components/layout/ThemeToggle.tsx b/frontend/src/components/layout/ThemeToggle.tsx
index 93c4c8c..acc677d 100644
--- a/frontend/src/components/layout/ThemeToggle.tsx
+++ b/frontend/src/components/layout/ThemeToggle.tsx
@@ -1,6 +1,6 @@
 import { Moon, Sun } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { useTheme } from "@/components/theme-provider"
+import { useTheme } from "@/components/theme-context"
 
 export function ThemeToggle() {
   const { theme, toggleTheme } = useTheme()
diff --git a/frontend/src/components/theme-context.tsx b/frontend/src/components/theme-context.tsx
new file mode 100644
index 0000000..583d5c7
--- /dev/null
+++ b/frontend/src/components/theme-context.tsx
@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react"
+
+export type Theme = "light" | "dark"
+
+export interface ThemeContextType {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+  setThemeLocal: (theme: Theme) => void
+  toggleTheme: () => void
+}
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider")
+  }
+  return context
+}