feat : add theme switcher

components/admin/admin-header.tsx

@@ -17,6 +17,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { PublicAccountMenu } from "@/components/public/public-account-menu";
 import { NotificationBell } from "@/components/notifications/notification-bell";
+import { ThemeSwitcher } from "@/components/theme-switcher";
 
 export function AdminHeader() {
   const pathname = usePathname();
@@ -104,6 +105,7 @@ export function AdminHeader() {
             <ExternalLinkIcon />
           </Button>
         </nav>
+        <ThemeSwitcher />
         <NotificationBell />
         <PublicAccountMenu />
       </div>

components/admin/overview-image-generator.tsx

@@ -279,7 +279,7 @@ function OverviewPoster({
     <DndContext sensors={posterSensors} onDragEnd={handlePosterDragEnd}>
       <div
         ref={posterRef}
-        className="relative isolate aspect-square size-full overflow-hidden bg-black text-white @container"
+        className="dark relative isolate aspect-square size-full overflow-hidden bg-black text-white @container"
         style={{ fontFamily: '"Genshin Overview", sans-serif' }}
       >
       {composition.backgroundUrl ? (

components/public/constellation-image.tsx

@@ -35,7 +35,7 @@ export function ConstellationImage({
   const footer = group.note;
 
   return (
-    <div className="relative isolate size-375 overflow-hidden bg-[#070b20] font-heading text-white">
+    <div className="dark relative isolate size-375 overflow-hidden bg-[#070b20] font-heading text-white">
       <GuideExportBranding backgroundUrl={background} variant="constellation" />
 
       <div className="absolute inset-x-20 top-7 z-10 flex items-start justify-center gap-5">

components/public/guide-image-export.tsx

@@ -496,7 +496,7 @@ export function GuideImageExport({
               <div
                 ref={previewRef}
                 data-export-language={language}
-                className={cn("bg-background p-10 text-foreground", captureClassName)}
+                className={cn("dark bg-background p-10 text-foreground", captureClassName)}
                 style={{ width, height }}
               >
                 <style>{'[data-export-language="th"] [data-export-lang="en"],[data-export-language="en"] [data-export-lang="th"]{display:none!important}'}</style>
@@ -516,7 +516,7 @@ export function GuideImageExport({
                 ref={captureRef}
                 data-export-language={language}
                 className={cn(
-                  "bg-background p-10 text-foreground",
+                  "dark bg-background p-10 text-foreground",
                   captureClassName,
                 )}
                 style={{ width, height }}

components/public/material-poster.tsx

@@ -121,7 +121,7 @@ export function MaterialPoster({
 
   return (
     <div
-      className={cn("@container relative aspect-4/5 w-full select-none overflow-hidden bg-black text-white", interactive && characterArtUrl && "cursor-move", className)}
+      className={cn("dark @container relative aspect-4/5 w-full select-none overflow-hidden bg-black text-white", interactive && characterArtUrl && "cursor-move", className)}
       style={{ backgroundImage: background }}
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}

components/public/site-header.tsx

@@ -8,6 +8,7 @@ import { VisitorPresence } from "@/components/public/visitor-presence";
 import { PublicNavigation } from "@/components/public/public-navigation";
 import { PublicAccountMenu } from "@/components/public/public-account-menu";
 import { NotificationBell } from "@/components/notifications/notification-bell";
+import { ThemeSwitcher } from "@/components/theme-switcher";
 import { getAdminSession } from "@/lib/auth/server";
 import { HttpError } from "@/lib/security/http";
 
@@ -46,6 +47,7 @@ export function SiteHeader({ editHref = "/admin", guideId }: { editHref?: string
         <Suspense fallback={null}>
           <AdminEditLink editHref={editHref} />
         </Suspense>
+        <ThemeSwitcher />
         <NotificationBell />
         <PublicAccountMenu />
       </div>

components/public/weapon-image-export.tsx

@@ -64,7 +64,7 @@ export function WeaponComparisonImage({
   const maximum = Math.max(100, ...values);
 
   return (
-    <div className="relative isolate w-300 overflow-hidden bg-[#070b20] px-14 pt-10 pb-12 font-heading text-white">
+    <div className="dark relative isolate w-300 overflow-hidden bg-[#070b20] px-14 pt-10 pb-12 font-heading text-white">
       <GuideExportBranding backgroundUrl={guide.character.splashImageUrl ?? guide.coverUrl} />
       <header className="relative z-10 flex flex-col items-center px-48 text-center drop-shadow-[0_4px_3px_rgba(0,0,0,0.9)]">
         <h2 className="max-w-full text-5xl leading-tight font-bold text-balance">

components/rich-text-content.tsx

@@ -12,7 +12,7 @@ export function RichTextContent({
 
   return (
     <div
-      className={cn("prose prose-sm prose-invert max-w-none leading-snug [&>p]:m-0", className)}
+      className={cn("prose prose-sm dark:prose-invert max-w-none leading-snug [&>p]:m-0", className)}
       dangerouslySetInnerHTML={{ __html: sanitizeRichTextHtml(html) }}
     />
   );

components/rich-text-editor.tsx

@@ -213,7 +213,7 @@ export function RichTextEditor({
     onUpdate: ({ editor: currentEditor }) => onChange(normalizedEditorHtml(currentEditor)),
     editorProps: {
       attributes: {
-        class: "prose prose-sm prose-invert min-h-28 max-w-none px-3 py-2 leading-snug outline-none [&_.is-editor-empty:first-child]:before:pointer-events-none [&_.is-editor-empty:first-child]:before:float-left [&_.is-editor-empty:first-child]:before:h-0 [&_.is-editor-empty:first-child]:before:text-muted-foreground [&_.is-editor-empty:first-child]:before:content-[attr(data-placeholder)] [&>p]:m-0",
+        class: "prose prose-sm dark:prose-invert min-h-28 max-w-none px-3 py-2 leading-snug outline-none [&_.is-editor-empty:first-child]:before:pointer-events-none [&_.is-editor-empty:first-child]:before:float-left [&_.is-editor-empty:first-child]:before:h-0 [&_.is-editor-empty:first-child]:before:text-muted-foreground [&_.is-editor-empty:first-child]:before:content-[attr(data-placeholder)] [&>p]:m-0",
       },
     },
   });

components/theme-provider.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ReactNode } from "react";
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  return (
+    <NextThemesProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+      {children}
+    </NextThemesProvider>
+  );
+}

components/theme-switcher.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { MoonIcon, SunIcon, SunMoonIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useSyncExternalStore } from "react";
+
+import { Button } from "@/components/ui/button";
+
+const subscribe = () => () => {};
+const clientSnapshot = () => true;
+const serverSnapshot = () => false;
+
+export function ThemeSwitcher() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const mounted = useSyncExternalStore(subscribe, clientSnapshot, serverSnapshot);
+  const isDark = resolvedTheme === "dark";
+  const label = mounted ? (isDark ? "เปลี่ยนเป็นโหมดสว่าง" : "เปลี่ยนเป็นโหมดมืด") : "เปลี่ยนธีม";
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      aria-label={label}
+      title={label}
+      disabled={!mounted}
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+    >
+      {!mounted ? <SunMoonIcon /> : isDark ? <SunIcon /> : <MoonIcon />}
+    </Button>
+  );
+}

components/ui/sonner.tsx

@@ -1,12 +1,14 @@
 "use client"
 
 import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { useTheme } from "next-themes"
 import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
 
 const Toaster = ({ ...props }: ToasterProps) => {
+  const { resolvedTheme } = useTheme()
   return (
     <Sonner
-      theme="dark"
+      theme={resolvedTheme === "dark" ? "dark" : "light"}
       className="toaster group"
       icons={{
         success: (