feat : add theme switcher

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">