เทคนิคทำระบบ Dynamic Dark/Light Theme ด้วย Tailwind CSS และ CSS Custom Properties

/* globals.css */
@layer base {
  :root {
    /* ---------------- Light Theme ---------------- */
    /* Surfaces */
    --color-surface-base: 255 255 255;       /* #ffffff */
    --color-surface-subtle: 248 250 252;     /* slate-50 */
    --color-surface-card: 255 255 255;       /* #ffffff */
    --color-surface-border: 226 232 240;     /* slate-200 */

    /* Typography (รับประกัน Contrast Ratio บน Base >= 4.5:1) */
    --color-content-main: 15 23 42;          /* slate-900 (Contrast ~19:1) */
    --color-content-muted: 71 85 105;        /* slate-600 (Contrast ~5.8:1 - ผ่าน AA) */

    /* Brand / Action */
    --color-primary-base: 37 99 235;         /* blue-600 */
    --color-primary-fg: 255 255 255;         /* white */
  }

  .dark {
    /* ---------------- Dark Theme ---------------- */
    /* Surfaces */
    --color-surface-base: 15 23 42;          /* slate-900 */
    --color-surface-subtle: 2 6 23;          /* slate-950 */
    --color-surface-card: 30 41 59;          /* slate-800 */
    --color-surface-border: 51 65 85;        /* slate-700 */

    /* Typography (ปรับคู่สีป้องกัน Halation และผ่าน AA) */
    --color-content-main: 248 250 252;       /* slate-50 (Contrast ~15:1) */
    --color-content-muted: 203 213 225;      /* slate-300 (Contrast ~6.3:1 - ผ่าน AA บน card 800) */

    /* Brand / Action */
    --color-primary-base: 59 130 246;        /* blue-500 */
    --color-primary-fg: 15 23 42;            /* slate-900 */
  }
}

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
function withOpacity(variableName) {
  return ({ opacityValue }) => {
    if (opacityValue !== undefined) {
      return `rgb(var(${variableName}) / ${opacityValue})`;
    }
    return `rgb(var(${variableName}))`;
  };
}

module.exports = {
  darkMode: 'class', // ใช้คลาส .dark เป็นตัว Trigger
  content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        surface: {
          DEFAULT: withOpacity('--color-surface-base'),
          subtle: withOpacity('--color-surface-subtle'),
          card: withOpacity('--color-surface-card'),
          border: withOpacity('--color-surface-border'),
        },
        content: {
          main: withOpacity('--color-content-main'),
          muted: withOpacity('--color-content-muted'),
        },
        primary: {
          DEFAULT: withOpacity('--color-primary-base'),
          fg: withOpacity('--color-primary-fg'),
        },
      },
    },
  },
  plugins: [],
};

<!-- วางใน <head> ของ root layout.tsx หรือ _document.tsx -->
<script>
  (function() {
    try {
      const storedTheme = localStorage.getItem('theme');
      const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
      
      if (storedTheme === 'dark' || (!storedTheme && supportDarkMode)) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    } catch (_) {}
  })();
</script>

'use client';

import React, { useState, useEffect } from 'react';

export const ThemeToggle = () => {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    setIsDark(document.documentElement.classList.contains('dark'));
  }, []);

  const toggleTheme = () => {
    const nextDark = !isDark;
    setIsDark(nextDark);

    if (nextDark) {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    }
  };

  return (
    <button
      type="button"
      onClick={toggleTheme}
      aria-label={isDark ? 'เปลี่ยนเป็นธีมสว่าง' : 'เปลี่ยนเป็นธีมมืด'}
      className="p-2.5 rounded-lg border border-surface-border bg-surface text-content-main 
                 hover:bg-surface-subtle focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
    >
      {isDark ? '☀️️ โหมดสว่าง' : '🌙 โหมดมืด'}
    </button>
  );
};

/* โหมดคอนทราสต์เข้มข้นพิเศษ */
.high-contrast {
  --color-surface-base: 0 0 0;             /* ดำสนิท */
  --color-surface-card: 0 0 0;
  --color-surface-border: 255 255 255;     /* ขอบขาวชัดเจน */
  --color-content-main: 255 255 255;       /* ตัวหนังสือขาวสนิท (Contrast 21:1) */
  --color-content-muted: 255 255 0;        /* สีเหลืองนีออนสำหรับคำอธิบายรอง */
  --color-primary-base: 0 255 255;         /* ฟ้า Cyan สด */
  --color-primary-fg: 0 0 0;
}