diff --git a/components/public/guide-image-export.tsx b/components/public/guide-image-export.tsx
index 632d50b..122a45c 100644
--- a/components/public/guide-image-export.tsx
+++ b/components/public/guide-image-export.tsx
@@ -496,7 +496,7 @@ export function GuideImageExport({
@@ -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 }}
diff --git a/components/public/material-poster.tsx b/components/public/material-poster.tsx
index a511b23..496a482 100644
--- a/components/public/material-poster.tsx
+++ b/components/public/material-poster.tsx
@@ -121,7 +121,7 @@ export function MaterialPoster({
return (
diff --git a/components/public/weapon-image-export.tsx b/components/public/weapon-image-export.tsx
index 814ee12..9f3e80a 100644
--- a/components/public/weapon-image-export.tsx
+++ b/components/public/weapon-image-export.tsx
@@ -64,7 +64,7 @@ export function WeaponComparisonImage({
const maximum = Math.max(100, ...values);
return (
-
+
diff --git a/components/rich-text-content.tsx b/components/rich-text-content.tsx
index 20b2671..45f0954 100644
--- a/components/rich-text-content.tsx
+++ b/components/rich-text-content.tsx
@@ -12,7 +12,7 @@ export function RichTextContent({
return (
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) }}
/>
);
diff --git a/components/rich-text-editor.tsx b/components/rich-text-editor.tsx
index 7d1c8bb..bad9634 100644
--- a/components/rich-text-editor.tsx
+++ b/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",
},
},
});
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
new file mode 100644
index 0000000..51485dd
--- /dev/null
+++ b/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 (
+
+ {children}
+
+ );
+}
diff --git a/components/theme-switcher.tsx b/components/theme-switcher.tsx
new file mode 100644
index 0000000..d78c0ea
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
index d3f848c..ab0b8b9 100644
--- a/components/ui/sonner.tsx
+++ b/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 (