สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
ในยุคที่เทคโนโลยีก้าวหน้าไปอย่างรวดเร็ว ผู้คนสามารถเข้าถึงเนื้อหาออนไลน์ได้แบบ 24 ชั่วโมงต่อวัน การเรียกดูเว็บไซต์ในเวลากลางคืนอาจทำให้เกิดอาการปวดตาได้ ดังนั้น "Dark Mode" หรือโหมดแสงมืด จึงกลายมาเป็นคุณสมบัติที่ได้รับความนิยมอย่างแพร่หลายในการออกแบบเว็บไซต์ เพื่อช่วยลดแสงจ้า ลดการใช้พลังงานของหน้าจอ และเพิ่มประสบการณ์ผู้ใช้ที่ดีขึ้น
ในบทความนี้ เราจะมาพูดคุยถึงหลักการทำงานเบื้องต้นของการใช้ CSS ในการสร้าง Dark Mode ให้กับเว็บไซต์ของเรา พร้อมตัวอย่างโค้ดที่เข้าใจได้ง่ายและนำไปใช้ได้จริง
Dark Mode คือรูปแบบการแสดงผลของ UI (User Interface) ที่ใช้สีเข้มเป็นพื้นหลัง ซึ่งจะช่วยลดปริมาณแสงสีขาวที่ถูกปล่อยออกมาจากหน้าจอ ความคิดในการใช้สีเข้มนั้นเพื่อช่วยสร้างบรรยากาศที่ผ่อนคลายมากขึ้นและยังช่วยประหยัดแบตเตอรี่ในหน้าจอ OLED และ AMOLED ที่จำเป็นต้องใช้พลังงานน้อยลงเมื่อแสดงสีดำ
การใช้ CSS ในการสร้าง Dark Mode สามารถทำได้หลายวิธี แต่หนึ่งในวิธีที่นิยมใช้คือการใช้ CSS Custom Properties (หรือที่เรียกว่า CSS Variables) และการใช้ Media Queries เพื่อให้เว็บไซต์สามารถปรับเปลี่ยนไปยังโหมด Dark Mode ได้แบบอัตโนมัติ
CSS Custom Properties
CSS Custom Properties ช่วยให้เราประกาศค่าของสไตล์ต่าง ๆ ไว้ในรูปแบบตัวแปร ทำให้ง่ายต่อการเปลี่ยนแปลงและจัดการสไตล์ของหลายๆ ธีมพร้อมกัน
ตัวอย่างการใช้ CSS Variables:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
จากตัวอย่างข้างต้น เราประกาศตัวแปรสองตัวคือ `--bg-color` และ `--text-color` เพื่อใช้แทนค่า `background-color` และ `color` ตามลำดับ
การใช้ Media Queries เพื่อรองรับ Dark Mode
CSS Media Queries สามารถใช้ร่วมกับฟีเจอร์ใหม่ ๆ ของเบราเซอร์สมัยใหม่อย่าง `prefers-color-scheme` เพื่อตรวจสอบว่าอุปกรณ์ของผู้ใช้ตั้งค่าเป็น Dark Mode หรือไม่ และปรับเปลี่ยนสไตล์เว็บไซต์ตามนั้น
ตัวอย่างการใช้ Media Queries ตรวจสอบ `prefers-color-scheme`:
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #ffffff;
}
}
ในตัวอย่างนี้ เราจะเปลี่ยนค่า CSS Variables ให้เป็นค่าที่เหมาะสมสำหรับ Dark Mode ถ้าผู้ใช้เปิดใช้งาน Dark Mode ในระบบหรือเบราเซอร์
จัดเตรียม HTML เบื้องต้น:
<!DOCTYPE html>
<html lang="th">
<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>
<h1>ทดสอบ Dark Mode</h1>
<p>นี่คือบทความทดสอบเกี่ยวกับการทำ Dark Mode โดยใช้ CSS</p>
</body>
</html>
จัดเตรียม CSS ในไฟล์ `styles.css`:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #ffffff;
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: Arial, sans-serif;
padding: 20px;
}
จากตัวอย่างที่เรากล่าวถึงข้างต้น คือการนำเสนอวิธีการทำให้เว็บของเราสามารถรองรับ Dark Mode ได้อย่างง่ายดายโดยใช้ CSS ช่วยให้สามารถปรับเปลี่ยนธีมตามการตั้งค่าของระบบของผู้ใช้ได้โดยอัตโนมัติ
นอกเหนือจากการเปลี่ยนพื้นหลังและสีตัวอักษรแล้ว คุณควรพิจารณาปรับเปลี่ยนสีขององค์ประกอบต่อไปนี้ใน Dark Mode ด้วย:
- ปุ่มและลิงก์
- การ์ดและกล่องข้อความ
- เงาและเส้นขอบ
- ไอคอนและกราฟิกต่าง ๆ
การพิจารณาสีที่ใช้ใน Dark Mode เป็นเรื่องสำคัญ เพื่อให้มั่นใจได้ว่าผู้ใช้สามารถใช้งานเว็บไซต์ได้อย่างสะดวกสบายและอ่านเนื้อหาได้ชัดเจน
การทำ Dark Mode ผ่าน CSS ไม่เพียงแต่ช่วยให้ผู้ใช้เว็บไซต์ของคุณมีประสบการณ์ที่ดีขึ้น แต่ยังเป็นการตอบสนองความต้องการของผู้ใช้ที่หันมาใช้ Dark Mode กันมากขึ้น ในฐานะนักพัฒนาเว็บไซต์ การใช้ CSS Variables ร่วมกับ Media Queries จะช่วยให้การจัดการธีมเว็บไซต์ของคุณง่ายและยืดหยุ่นมากขึ้น
สำหรับผู้ที่สนใจศึกษาเพิ่มเติมเกี่ยวกับการทำเว็บไซต์แบบมืออาชีพและทฤษฎี CSS ต่าง ๆ เราขอเชิญชวนมาร่วมเรียนรู้และพัฒนาทักษะการเขียนโปรแกรมกับโรงเรียนสอนโปรแกรมมิ่ง Expert-Programming-Tutor (EPT) ที่จะช่วยเสริมสร้างความรู้และทักษะในการเขียนโปรแกรมของคุณในทุกระดับความเชี่ยวชาญด้วยหลักสูตรที่ออกแบบมาเพื่อการเรียนรู้แบบเจาะลึกและเป็นระบบ
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: java c# vb.net python c c++ machine_learning web database oop cloud aws ios android
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com