Toggle Dark Mode: เปลี่ยนธีมสีทั้งหน้าด้วย Class บน Body
วิธีมาตรฐานคือ toggle class .dark-mode บน <body> แล้วกำหนดสีพื้นหลัง/ข้อความใน CSS ตาม class นั้น ใช้ JavaScript เพียงฟังก์ชัน toggle class
โค้ดตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
padding: 25px;
background-color: white; color: black;
font-size: 25px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
transition: background-color 0.3s, color 0.3s; /* เพิ่ม transition ให้นุ่ม */
}
.dark-mode {
background-color: black; color: white;
}
.toggleButton {
padding: 12px; font-size: 18px; border: 2px solid green; cursor: pointer;
}
</style>
</head>
<body>
<h1>ตัวอย่าง Toggle Dark/Light Mode</h1>
<button class="toggleButton">สลับโหมดมืด</button>
<h2>คลิกปุ่มข้างบนเพื่อสลับโหมด</h2>
<script>
document.querySelector(".toggleButton").addEventListener("click", toggleDarkMode);
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
}
</script>
</body>
</html>ขยายความสามารถ
- บันทึก preference: ใช้
localStorageจำสถานะ โหลดตอน refresh - ตรวจสอบ system preference:
window.matchMedia('(prefers-color-scheme: dark)')ตั้งค่าเริ่มต้นตาม OS - CSS Custom Properties: กำหนดสีใน
:rootแล้วเปลี่ยนค่าตัวแปร – จัดการสีหลายค่าได้ง่าย
ตัวอย่าง CSS Variables
:root {
--bg: white; --text: black; --accent: #445deb;
}
.dark-mode {
--bg: black; --text: white; --accent: #8b9cff;
}
body { background: var(--bg); color: var(--text); }
button { background: var(--accent); }วิธีนี้ scalable ที่สุด สำหรับโปรเจกต์จริง ควรใช้ CSS Variables + localStorage + system preference detection
