เรียนรู้สร้างเว็บไซต์แบบ Dark Mode ด้วย CSS ง่าย ๆ
Dark Mode หรือโหมดมืด เป็นหนึ่งในเทรนด์ที่กำลังได้รับความนิยมในโลกของการสอนทำเว็บไซต์ นอกจากช่วยลดความล้าของสายตาสำหรับผู้ใช้งานในที่แสงน้อยแล้ว ยังเพิ่มความสวยงามและทันสมัยให้กับเว็บไซต์อีกด้วย หากคุณอยากเรียนรู้วิธีสร้างเว็บไซต์ที่รองรับ Dark Mode บทความนี้จะแนะนำขั้นตอนง่าย ๆ ด้วย CSS
Dark Mode คืออะไร?
Dark Mode คือโหมดการแสดงผลที่ใช้สีพื้นหลังเข้ม เช่น สีดำหรือสีเทาเข้ม โดยมีข้อความหรือองค์ประกอบที่เป็นสีอ่อน เช่น สีขาวหรือสีเหลือง เพื่อให้ตัดกันอย่างชัดเจน เป้าหมายหลักของ Dark Mode คือ:
- ลดแสงที่รบกวนสายตาในที่มืด
- ประหยัดพลังงาน โดยเฉพาะบนหน้าจอ OLED และ AMOLED
- มอบประสบการณ์ที่ดูหรูหราและทันสมัย
วิธีการสร้างเว็บไซต์ที่รองรับ Dark Mode ด้วย 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>Dark Mode Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to Dark Mode</h1>
<button id="toggle-mode">Toggle Dark Mode</button>
</header>
<main>
<p>This is an example of a website with Dark Mode functionality.</p>
</main>
</body>
</html>
2. สร้างไฟล์ CSS สำหรับ Light Mode และ Dark Mode
ในไฟล์ styles.css ให้เริ่มต้นด้วยการกำหนดสไตล์พื้นฐานสำหรับ Light Mode:
css
คัดลอกโค้ด
/* Light Mode Styles */
body {
background-color: #ffffff;
color: #000000;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
transition: background-color 0.3s, color 0.3s;
}
header {
padding: 20px;
text-align: center;
background-color: #f4f4f4;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
background-color: #000000;
color: #ffffff;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
button:hover {
background-color: #333333;
}
จากนั้นสร้างสไตล์สำหรับ Dark Mode โดยใช้ CSS Variables:
css
คัดลอกโค้ด
/* Dark Mode Styles */
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
header.dark-mode {
background-color: #1f1f1f;
}
button.dark-mode {
background-color: #ffffff;
color: #000000;
}
3. เพิ่ม JavaScript สำหรับสลับโหมด
สร้างไฟล์ JavaScript (script.js) เพื่อเพิ่มฟังก์ชันสำหรับการสลับระหว่าง Light Mode และ Dark Mode:
javascript
คัดลอกโค้ด
const toggleButton = document.getElementById('toggle-mode');
const body = document.body;
toggleButton.addEventListener(‘click’, () => {
body.classList.toggle(‘dark-mode’);
});
อย่าลืมเชื่อมต่อไฟล์ JavaScript นี้ใน HTML:
html
คัดลอกโค้ด
<script src="script.js"></script>
4. ใช้ Media Query เพื่อตรวจสอบ Dark Mode ของระบบ
เพื่อให้เว็บไซต์สามารถปรับเข้ากับ Dark Mode ที่ตั้งค่าจากระบบปฏิบัติการของผู้ใช้งานได้อัตโนมัติ คุณสามารถใช้ CSS Media Query:
css
คัดลอกโค้ด
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
header {
background-color: #1f1f1f;
}
button {
background-color: #ffffff;
color: #000000;
}
}
ตัวอย่างผลลัพธ์
เมื่อคุณเปิดเว็บไซต์ จะมีโหมด Light Mode เป็นค่าเริ่มต้น และผู้ใช้งานสามารถกดปุ่ม Toggle Dark Mode เพื่อเปลี่ยนเป็นโหมดมืดได้ทันที นอกจากนี้ หากระบบของผู้ใช้งานตั้งค่า Dark Mode ไว้ เว็บไซต์จะปรับโหมดโดยอัตโนมัติด้วย Media Query
เคล็ดลับเพิ่มเติม
- ใช้ CSS Variables
ใช้ตัวแปรใน CSS เพื่อการจัดการสีที่ง่ายขึ้น เช่น:cssคัดลอกโค้ด:root {body {
--bg-color: #ffffff;
--text-color: #000000;
}
background-color: var(–bg-color);
color: var(–text-color);
}body.dark-mode {
–bg-color: #121212;
–text-color: #ffffff;
} - บันทึกโหมดที่ผู้ใช้งานเลือก
ใช้localStorageเพื่อจดจำโหมดที่ผู้ใช้งานเลือกไว้:javascriptคัดลอกโค้ดconst toggleButton = document.getElementById('toggle-mode');// ตรวจสอบโหมดที่เคยบันทึกไว้
const body = document.body;
if (localStorage.getItem(‘dark-mode’) === ‘enabled’) {
body.classList.add(‘dark-mode’);
}toggleButton.addEventListener(‘click’, () => {
body.classList.toggle(‘dark-mode’);
localStorage.setItem(‘dark-mode’, body.classList.contains(‘dark-mode’) ? ‘enabled’ : ‘disabled’);
});
บทสรุป
การเพิ่ม Dark Mode ให้กับการสอนทำเว็บไซต์ไม่เพียงแต่ช่วยปรับปรุงประสบการณ์ผู้ใช้งาน แต่ยังทำให้เว็บไซต์ของคุณทันสมัยและตอบสนองต่อความต้องการของผู้ใช้ในยุคปัจจุบัน ด้วยขั้นตอนง่าย ๆ ข้างต้น คุณสามารถสร้าง Dark Mode ให้กับเว็บไซต์ได้ในเวลาไม่นาน ลองนำไปปรับใช้และพัฒนาเพิ่มเติมตามความต้องการของคุณ!