โหมดมืด

ทุก component รองรับโหมดมืดโดยอัตโนมัติเพราะใช้ design token — คุณแค่ตั้ง provider และปุ่มสลับโหมด

ลองกดสลับเลย:

ทำงานอย่างไร

ใช้ next-themes กับ attribute="class" — ตอนสลับโหมดจะเพิ่ม/ลบ class dark ที่ <html>
defaultTheme="system" ทำให้ตามค่าของระบบผู้ใช้ตั้งแต่เปิดหน้าแรก
ค่าสีของโหมดมืดทั้งหมดอยู่ในบล็อก .dark ของ app/globals.css
อย่าลืม suppressHydrationWarning ที่ <html> เพราะ class ถูกใส่ก่อน hydration

ตั้งค่า provider

ครอบทั้ง app ใน root layout ครั้งเดียว

import { ThemeProvider } from "@/components/theme-provider"export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="th" suppressHydrationWarning>      <body>        {/* attribute="class" · defaultTheme="system" · enableSystem */}        <ThemeProvider>{children}</ThemeProvider>      </body>    </html>  )}

ปุ่มสลับโหมด

source จริงของปุ่มที่เว็บเอกสารนี้ใช้อยู่ (ไอคอนสลับตามโหมดผ่าน dark: variant)

components/docs/theme-toggle.tsx

"use client"import { useTheme } from "next-themes"import { MoonIcon, SunIcon } from "lucide-react"import { Button } from "@/components/ui/button"export function ThemeToggle() {  const { resolvedTheme, setTheme } = useTheme()  return (    <Button      variant="outline"      size="icon"      aria-label="สลับโหมดสว่าง/มืด (กด D ก็ได้)"      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}    >      <SunIcon className="dark:hidden" />      <MoonIcon className="hidden dark:block" />    </Button>  )}

คีย์ลัด

D — สลับโหมดสว่าง/มืด (มาพร้อม ThemeProvider ของ repo นี้ ใช้ได้ทุกหน้าที่ไม่ได้พิมพ์อยู่)
⌘K / Ctrl+K — เปิดช่องค้นหา component ของเว็บเอกสารนี้

เขียนโหมดมืดเอง

ถ้าเขียน component เอง ให้ใช้ prefix dark: ของ Tailwind เมื่อต้องปรับแค่บางจุด เช่น dark:bg-muted/50 — ส่วนสีหลักให้ใช้ token (เช่น bg-card) แล้วโหมดมืดจะทำงานเอง ไม่ต้องเขียนเงื่อนไขใด ๆ