Kotchasan PHP Framework

การสร้างปุ่มสลับโหมด Dark และ Light Mode ด้วย JavaScript และ CSS

ในปัจจุบัน การรองรับ Dark Mode กลายเป็นมาตรฐานของเว็บไซต์สมัยใหม่ ทำให้ผู้ใช้งานสามารถเลือกโหมดสีที่เหมาะสมกับการใช้งานของตนเองได้ และเราสามารถเพิ่มปุ่มเพื่อให้ผู้ใช้สลับโหมดระหว่าง Light Mode และ Dark Mode ด้วย JavaScript และ CSS ได้อย่างง่ายดาย

ขั้นตอนที่ 1. เขียน HTML โครงสร้างหลัก

เราจะเริ่มต้นด้วยการสร้าง HTML สำหรับหน้าเว็บพร้อมปุ่มที่ใช้ในการสลับโหมด โดยโครงสร้าง HTML จะประกอบไปด้วยเนื้อหาและปุ่มสำหรับการเปลี่ยนโหมดสี

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Dark Mode Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This page allows users to toggle between light and dark modes.</p>
    
    <!-- ปุ่มสำหรับสลับโหมด -->
    <button id="toggle-theme">Toggle Dark Mode</button>

    <script src="script.js"></script>
</body>
</html>

ขั้นตอนที่ 2. เขียน CSS สำหรับ Light Mode และ Dark Mode

เราจะสร้างไฟล์ styles.css เพื่อกำหนดสไตล์ของ Light Mode และ Dark Mode โดยใช้ class .light-mode และ .dark-mode ตามที่เราจะกำหนดด้วย JavaScript

/* สไตล์พื้นฐาน */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, color 0.3s;
    text-align: center;
    padding: 20px;
}

h1 {
    font-size: 2em;
    margin: 0.5em 0;
}

p {
    font-size: 1.2em;
    margin: 0.5em 0;
}

/* สไตล์สำหรับ Light Mode */
.light-mode {
    background-color: #ffffff;
    color: #000000;
}

.light-mode button {
    background-color: #000000;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

/* สไตล์สำหรับ Dark Mode */
.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

.dark-mode button {
    background-color: #ffffff;
    color: #000000;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

/* สไตล์ปุ่มเมื่อ hover */
button:hover {
    opacity: 0.8;
}

ขั้นตอนที่ 3. เขียน JavaScript สำหรับการสลับโหมด

สร้างไฟล์ script.js สำหรับเขียน JavaScript ที่จะทำการตรวจสอบโหมดสีของระบบและจัดการการสลับโหมดตามที่ผู้ใช้เลือก

// ตรวจสอบว่าผู้ใช้เคยเลือกโหมดสีไว้หรือไม่
 const theme = localStorage.getItem('theme');
if (theme) {
    document.documentElement.classList.add(theme);
} else {
    // กำหนดโหมดเริ่มต้นตามการตั้งค่าระบบ
     if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.classList.add('dark-mode');
        localStorage.setItem('theme', 'dark-mode');
    }
}

// ฟังก์ชันสำหรับสลับโหมดสี
 const toggleTheme = () => {
    if (document.documentElement.classList.contains('dark-mode')) {
        document.documentElement.classList.remove('dark-mode');
        document.documentElement.classList.add('light-mode');
        localStorage.setItem('theme', 'light-mode'); // บันทึกโหมดที่เลือก
     } else {
        document.documentElement.classList.remove('light-mode');
        document.documentElement.classList.add('dark-mode');
        localStorage.setItem('theme', 'dark-mode'); // บันทึกโหมดที่เลือก
     }
};

// ผูกฟังก์ชันกับปุ่ม toggle
 document.getElementById('toggle-theme').addEventListener('click', toggleTheme);

อธิบายการทำงานของโค้ด

  1. การตรวจสอบโหมดสีของระบบ

    • เมื่อหน้าเว็บโหลดขึ้นมา JavaScript จะตรวจสอบ localStorage เพื่อดูว่าผู้ใช้เคยเลือกโหมดสีหรือไม่ ถ้ามีการบันทึกโหมดไว้ ระบบจะตั้งค่าโหมดตามที่บันทึกไว้
    • ถ้าไม่มีการบันทึกไว้ JavaScript จะตรวจสอบการตั้งค่าระบบของผู้ใช้ว่าตั้งเป็น Dark Mode หรือ Light Mode แล้วตั้งค่าให้ตรงกับระบบของผู้ใช้

  2. ฟังก์ชัน toggleTheme

    • ฟังก์ชันนี้จะตรวจสอบว่า ขณะนี้เป็นโหมด dark-mode หรือไม่ ถ้าใช่ จะเปลี่ยนเป็น light-mode และบันทึกโหมดสีใน localStorage
    • ในทางกลับกัน ถ้าเป็น light-mode จะเปลี่ยนเป็น dark-mode และบันทึกโหมดสีไว้ใน localStorage

  3. การผูกฟังก์ชันกับปุ่ม

    • เมื่อผู้ใช้กดปุ่มสลับโหมด (#toggle-theme) ฟังก์ชัน toggleTheme จะทำงานและทำการเปลี่ยนโหมดสีให้ทันที

สรุป

บทความนี้ได้แนะนำวิธีการสร้างปุ่มสลับโหมด Dark Mode และ Light Mode โดยใช้ JavaScript และ CSS ซึ่งสามารถตรวจสอบโหมดสีของระบบ และยังช่วยให้ผู้ใช้สามารถเลือกโหมดสีตามที่ต้องการได้อย่างง่ายดาย นอกจากนี้เรายังบันทึกการเลือกโหมดของผู้ใช้ลงใน localStorage ทำให้หน้าเว็บจำค่าการเลือกโหมดได้ในครั้งต่อไปที่ผู้ใช้เข้าชม