บทที่ 15: การสร้าง Dark Mode ใน Tailwind CSS

Dark Mode คืออะไร?

Dark Mode หรือโหมดมืด เป็นหนึ่งในเทรนด์การออกแบบเว็บไซต์ที่ได้รับความนิยม เนื่องจากช่วยลดแสงสว่างที่อาจรบกวนสายตา และให้ประสบการณ์การใช้งานที่ดียิ่งขึ้นในสภาพแวดล้อมที่มีแสงน้อย Tailwind CSS รองรับการสร้าง Dark Mode ได้อย่างสะดวกและง่ายดาย

1. การเปิดใช้งาน Dark Mode ใน Tailwind CSS

เริ่มต้นด้วยการเปิดใช้งาน Dark Mode ในไฟล์ tailwind.config.js:

ตัวอย่าง:

module.exports = {
  darkMode: 'class', // หรือ 'media'
  theme: {
    extend: {},
  },
  plugins: [],
};

Tailwind CSS รองรับ Dark Mode สองรูปแบบ:

class: ใช้คลาส dark เพื่อกำหนดโหมดมืด
media: ใช้การตั้งค่าของระบบปฏิบัติการ (OS) โดยอัตโนมัติ (prefers-color-scheme)

2. การใช้งาน Dark Mode แบบคลาส

เมื่อเปิดใช้งาน Dark Mode แบบ class คุณสามารถเพิ่มคลาส dark ที่ <html> หรือ <body> เพื่อเปลี่ยนโหมดของเว็บไซต์:

ตัวอย่าง HTML:

<html class="dark">
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <h1>โหมดมืดกำลังทำงาน</h1>
</body>
</html>

bg-gray-900: ใช้พื้นหลังสีเทาเข้มในโหมดมืด
text-gray-200: ใช้ข้อความสีเทาอ่อนในโหมดมืด

3. การใช้งาน Dark Mode แบบ Media Query

หากต้องการให้ Dark Mode ทำงานตามค่าที่ผู้ใช้ตั้งค่าในระบบปฏิบัติการ ให้กำหนดเป็น darkMode: 'media' ใน tailwind.config.js:

ตัวอย่าง:

module.exports = {
  darkMode: 'media', // ใช้ค่าจาก OS
  theme: {
    extend: {},
  },
};

ในกรณีนี้ คุณไม่ต้องเพิ่มคลาส dark ระบบจะสลับโหมดโดยอัตโนมัติตามการตั้งค่าของผู้ใช้

4. การกำหนดสไตล์สำหรับ Dark Mode

ใน Tailwind CSS คุณสามารถกำหนดสไตล์เฉพาะสำหรับโหมดมืดโดยใช้คลาส dark::

ตัวอย่าง:

<div class="bg-white dark:bg-gray-800 text-black dark:text-white p-4">
  องค์ประกอบที่ปรับเปลี่ยนตามโหมดมืด
</div>

ในตัวอย่างนี้:

โหมดปกติ: พื้นหลังเป็นสีขาว (bg-white), ข้อความสีดำ (text-black)
โหมดมืด: พื้นหลังเป็นสีเทาเข้ม (dark:bg-gray-800), ข้อความสีขาว (dark:text-white)

5. การสร้าง Toggle สำหรับ Dark Mode

คุณสามารถเพิ่มปุ่มเพื่อสลับโหมดได้ด้วย JavaScript:

ตัวอย่าง:

<button id="theme-toggle" class="bg-blue-500 text-white px-4 py-2 rounded">
  สลับโหมด
</button>

<script>
  const toggle = document.getElementById('theme-toggle');
  const html = document.documentElement;

  toggle.addEventListener('click', () => {
    if (html.classList.contains('dark')) {
      html.classList.remove('dark');
    } else {
      html.classList.add('dark');
    }
  });
</script>

6. ตัวอย่างการใช้งานจริง

การออกแบบหน้าเว็บที่รองรับ Dark Mode:

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-8">
  <header class="mb-6">
    <h1 class="text-2xl font-bold">หน้าเว็บรองรับ Dark Mode</h1>
  </header>
  <main class="space-y-4">
    <p>นี่คือข้อความในโหมดปกติหรือโหมดมืด</p>
    <button class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-2 rounded">
      ปุ่มตัวอย่าง
    </button>
  </main>
</div>

7. การปรับแต่งเพิ่มเติมสำหรับ Dark Mode

คุณสามารถเพิ่มสีหรือค่ากำหนดใหม่สำหรับโหมดมืดใน tailwind.config.js:

ตัวอย่าง:

module.exports = {
  theme: {
    extend: {
      colors: {
        dark: {
          bg: '#1a202c',
          text: '#e2e8f0',
        },
      },
    },
  },
};

การใช้งานใน HTML:

<div class="bg-gray-100 dark:bg-dark-bg text-gray-800 dark:text-dark-text p-4">
  ใช้สีที่กำหนดเองในโหมดมืด
</div>

8. เคล็ดลับการออกแบบ Dark Mode

เลือกสีที่เหมาะสม: ใช้สีที่มีคอนทราสต์สูงสำหรับข้อความและพื้นหลัง
ทดสอบทุกองค์ประกอบ: ตรวจสอบให้แน่ใจว่าองค์ประกอบทั้งหมดแสดงผลได้ดีในทั้งสองโหมด
ให้ผู้ใช้ควบคุมได้: เพิ่มปุ่มสลับโหมด เพื่อให้ผู้ใช้สามารถเลือกโหมดที่ต้องการ

สรุป

Dark Mode ใน Tailwind CSS ช่วยให้คุณสร้างหน้าเว็บที่รองรับโหมดมืดได้ง่ายและรวดเร็ว ด้วยการใช้ Utility Classes และการตั้งค่าใน tailwind.config.js คุณสามารถออกแบบหน้าเว็บที่สวยงามและตอบสนองต่อผู้ใช้ได้อย่างสมบูรณ์แบบ ในบทถัดไป เราจะพูดถึง การจัดการฟอร์มด้วย Tailwind CSS เพื่อเพิ่มความสวยงามและประสิทธิภาพให้กับส่วนติดต่อผู้ใช้!