From 93798b5a7ed65cbd6a34099a4ff9915ca3b18ecb Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Mon, 9 Dec 2024 20:38:08 +0800
Subject: [PATCH] feat(theme): add meta color management and integrate Jotai
 for theme switching

---
 package.json                      |  1 +
 src/app/layout.tsx                |  1 +
 src/components/mode-switcher.tsx  | 10 +++++++++-
 src/components/theme-provider.tsx | 10 +++++++++-
 src/config/site.ts                |  4 ++++
 src/hooks/use-meta-color.ts       | 24 ++++++++++++++++++++++++
 6 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 src/config/site.ts
 create mode 100644 src/hooks/use-meta-color.ts

diff --git a/package.json b/package.json
index f304634..2f438bf 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "gitea-js": "^1.22.0",
+    "jotai": "^2.10.3",
     "lucide-react": "^0.468.0",
     "next": "15.0.4",
     "next-auth": "^5.0.0-beta.25",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0d3f843..7907504 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -27,6 +27,7 @@ export default function RootLayout({
           defaultTheme="system"
           enableSystem
           disableTransitionOnChange
+          enableColorScheme
         >
           <div className="w-full">{children}</div>
         </ThemeProvider>
diff --git a/src/components/mode-switcher.tsx b/src/components/mode-switcher.tsx
index 62034e0..7c9dbea 100644
--- a/src/components/mode-switcher.tsx
+++ b/src/components/mode-switcher.tsx
@@ -7,13 +7,21 @@ import * as React from "react";
 import { useTheme } from "next-themes";
 import { Sun, Moon } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { META_THEME_COLORS } from "@/config/site";
+import { useMetaColor } from "@/hooks/use-meta-color";
 
 export function ModeSwitcher() {
+  const { setMetaColor } = useMetaColor();
   const { setTheme, resolvedTheme } = useTheme();
 
   const toggleTheme = React.useCallback(() => {
     setTheme(resolvedTheme === "dark" ? "light" : "dark");
-  }, [resolvedTheme, setTheme]);
+    setMetaColor(
+      resolvedTheme === "dark"
+        ? META_THEME_COLORS.light
+        : META_THEME_COLORS.dark
+    );
+  }, [resolvedTheme, setTheme, setMetaColor]);
 
   return (
     <Button
diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx
index 4855a19..353d796 100644
--- a/src/components/theme-provider.tsx
+++ b/src/components/theme-provider.tsx
@@ -4,11 +4,19 @@
 "use client";
 
 import * as React from "react";
+import { Provider as JotaiProvider } from "jotai";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 
 export function ThemeProvider({
   children,
   ...props
 }: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+  return (
+    <JotaiProvider>
+      <NextThemesProvider {...props}>
+        <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
+      </NextThemesProvider>
+    </JotaiProvider>
+  );
 }
diff --git a/src/config/site.ts b/src/config/site.ts
new file mode 100644
index 0000000..cc8ba31
--- /dev/null
+++ b/src/config/site.ts
@@ -0,0 +1,4 @@
+export const META_THEME_COLORS = {
+  light: "#ffffff",
+  dark: "#09090b",
+}
diff --git a/src/hooks/use-meta-color.ts b/src/hooks/use-meta-color.ts
new file mode 100644
index 0000000..e5c93f9
--- /dev/null
+++ b/src/hooks/use-meta-color.ts
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { useTheme } from "next-themes";
+import { META_THEME_COLORS } from "@/config/site";
+
+export function useMetaColor() {
+  const { resolvedTheme } = useTheme();
+
+  const metaColor = React.useMemo(() => {
+    return resolvedTheme !== "dark"
+      ? META_THEME_COLORS.light
+      : META_THEME_COLORS.dark;
+  }, [resolvedTheme]);
+
+  const setMetaColor = React.useCallback((color: string) => {
+    document
+      .querySelector('meta[name="theme-color"]')
+      ?.setAttribute("content", color);
+  }, []);
+
+  return {
+    metaColor,
+    setMetaColor,
+  };
+}