diff --git a/web/src/providers/index.tsx b/web/src/providers/index.tsx
index 380783f8..398732d1 100644
--- a/web/src/providers/index.tsx
+++ b/web/src/providers/index.tsx
@@ -9,22 +9,25 @@ import { Suspense } from "react";
import LiFiProvider from "./lifi";
import FarcasterProvider from "./farcaster";
import RelayProvider from "./relay";
+import ThemeProvider from "./theme";
export default function Providers({ children }: { children: React.ReactNode }) {
return (
-
-
-
-
-
-
-
-
-
-
- {children}
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
);
}
diff --git a/web/src/providers/theme.tsx b/web/src/providers/theme.tsx
new file mode 100644
index 00000000..8c807bca
--- /dev/null
+++ b/web/src/providers/theme.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from "react";
+
+type Theme = "light" | "dark";
+
+interface ThemeContextValue {
+ theme: Theme;
+ toggleTheme: () => void;
+ setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext
(undefined);
+
+const STORAGE_KEY = "9lives-theme";
+
+function getStoredTheme(): Theme | null {
+ if (typeof window === "undefined") {
+ return null;
+ }
+
+ const storedTheme = window.localStorage.getItem(STORAGE_KEY) as Theme | null;
+ return storedTheme === "light" || storedTheme === "dark" ? storedTheme : null;
+}
+
+function getInitialTheme(): Theme {
+ if (typeof window === "undefined") {
+ return "light";
+ }
+
+ const storedTheme = getStoredTheme();
+ if (storedTheme) {
+ return storedTheme;
+ }
+
+ return window.matchMedia("(prefers-color-scheme: dark)").matches
+ ? "dark"
+ : "light";
+}
+
+export default function ThemeProvider({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ const [theme, setThemeState] = useState(getInitialTheme);
+ const [hasExplicitPreference, setHasExplicitPreference] = useState(
+ () => getStoredTheme() !== null,
+ );
+
+ useEffect(() => {
+ if (typeof window === "undefined") {
+ return;
+ }
+
+ const root = document.documentElement;
+ if (theme === "dark") {
+ root.classList.add("dark");
+ } else {
+ root.classList.remove("dark");
+ }
+ root.dataset.theme = theme;
+ }, [theme]);
+
+ useEffect(() => {
+ if (!hasExplicitPreference || typeof window === "undefined") {
+ return;
+ }
+
+ window.localStorage.setItem(STORAGE_KEY, theme);
+ }, [hasExplicitPreference, theme]);
+
+ useEffect(() => {
+ if (typeof window === "undefined") {
+ return;
+ }
+
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+ const handleChange = (event: MediaQueryListEvent) => {
+ if (!hasExplicitPreference) {
+ setThemeState(event.matches ? "dark" : "light");
+ }
+ };
+
+ mediaQuery.addEventListener("change", handleChange);
+ return () => mediaQuery.removeEventListener("change", handleChange);
+ }, [hasExplicitPreference]);
+
+ const toggleTheme = useCallback(() => {
+ setHasExplicitPreference(true);
+ setThemeState((prev) => (prev === "dark" ? "light" : "dark"));
+ }, []);
+
+ const setTheme = useCallback((nextTheme: Theme) => {
+ setHasExplicitPreference(true);
+ setThemeState(nextTheme);
+ }, []);
+
+ const value = useMemo(
+ () => ({
+ theme,
+ toggleTheme,
+ setTheme,
+ }),
+ [setTheme, theme, toggleTheme],
+ );
+
+ return {children};
+}
+
+export function useTheme() {
+ const context = useContext(ThemeContext);
+ if (!context) {
+ throw new Error("useTheme must be used within a ThemeProvider");
+ }
+ return context;
+}
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
index 5c44b896..8c4e75db 100644
--- a/web/tailwind.config.ts
+++ b/web/tailwind.config.ts
@@ -1,6 +1,7 @@
import type { Config } from "tailwindcss";
const config: Config = {
+ darkMode: ["class"],
content: [
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
@@ -30,6 +31,8 @@ const config: Config = {
"9black": "#0C0C0C",
"9gray": "#EEEEEE",
"9layer": "#F5F5F5",
+ "9darkLayer": "#1A1A1A",
+ "9darkPanel": "#222222",
},
boxShadow: {
"9btnPrimaryIdle":
From 4178139f3a056129ac86bbac61eb4b9c123de11e Mon Sep 17 00:00:00 2001
From: Bayge <71931113+af-afk@users.noreply.github.com>
Date: Tue, 4 Nov 2025 04:02:03 +0900
Subject: [PATCH 2/2] chore(web): format header and theme provider
---
web/src/components/header.tsx | 2 +-
web/src/providers/theme.tsx | 4 +++-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
index 1efb45b1..0cef9431 100644
--- a/web/src/components/header.tsx
+++ b/web/src/components/header.tsx
@@ -19,7 +19,7 @@ export default function Header({ simple = false }: { simple?: boolean }) {
{children};
+ return (
+ {children}
+ );
}
export function useTheme() {