มีเดียคิวรี prefers-color-scheme
ตรวจจับการตั้งค่าโหมดมืดหรือโหมดสว่างของระบบผู้ใช้ด้วยมีเดียคิวรี prefers-color-scheme
มีเดียคิวรี prefers-color-scheme เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงใช้โหมดมืดอัตโนมัติ
ผู้ใช้จำนวนมากเปิดใช้โหมดมืดในระดับ OS เพื่อความสบายตา อายุการใช้งานแบตเตอรี่ที่ยาวนานขึ้น (บนหน้าจอ OLED) หรือการเข้าถึง มีเดียคิวรี prefers-color-scheme ตรวจจับการตั้งค่านี้และทำให้เว็บไซต์ปรับตัวโดยอัตโนมัติ
ค่าของคิวรี
มีสองค่า:
light— ผู้ใช้ต้องการชุดสีสว่าง หรือไม่ได้ตั้งค่าความต้องการdark— ผู้ใช้ต้องการโหมดมืด
<p>This page respects your OS dark mode setting.</p>
โหมดมืดโดยเน้นมือถือเป็นอันดับแรก
หากผู้ใช้ส่วนใหญ่ใช้อุปกรณ์มือถือ OLED โปรดพิจารณาใช้โหมดมืดเป็นสไตล์พื้นฐาน:
<p>Dark by default; switches to light in light mode.</p>
แนวทางใช้ตัวแปร CSS
วิธีติดตั้งที่เป็นระเบียบที่สุดคือกำหนดชุดโทเค็นสำหรับแต่ละรูปแบบ:
<div class="card">Themed card using CSS variables</div>
รูปภาพในโหมดมืด
ลดความสว่างของรูปภาพในโหมดมืดเพื่อป้องกันไม่ให้รูปภาพสว่างจ้าจนรบกวนสายตา:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />
การตรวจจับด้วย JavaScript
ตรวจสอบการตั้งค่าโหมดมืดใน JavaScript เพื่อให้ทำงานแบบไดนามิก:
<p id="theme-status">Checking...</p>
<script>
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
});
</script>
การทดสอบใน DevTools
ใน Chrome DevTools → แท็บการแสดงผล → จำลอง CSS prefers-color-scheme สลับระหว่างโหมดสว่างและมืดได้โดยไม่ต้องเปลี่ยนการตั้งค่า OS ใน Firefox: DevTools → แท็บตัวตรวจสอบ → เมนูไอคอนรูปดวงตา
หลักการใช้สีในโหมดมืด
โหมดมืดที่มีประสิทธิภาพ:
- ใช้สีเทาเข้ม (ไม่ใช่สีดำสนิท) เป็นพื้นหลัง — ช่วยลดความล้าของดวงตา
- ลดเงาแสดงระดับความสูง — ใช้โทนพื้นหลังที่สว่างขึ้นสำหรับพื้นผิวที่อยู่สูงกว่า
- ปรับสีเส้นขอบให้สว่างขึ้นเพื่อให้มองเห็นได้ชัดเจน
- ตรวจสอบอัตราส่วนคอนทราสต์ของข้อความ — อาจต้องใช้อัตราส่วนที่แตกต่างกัน
รูปแบบต่อต้านการกลับสี
ห้ามกลับสีทั้งหมดด้วย filter: invert(1) เพียงอย่างเดียวเพื่อทำโหมดมืด เพราะรูปภาพและไอคอนจะมีสีผิดเพี้ยนอย่างมาก ให้ใช้โทเค็นโหมดมืดที่เหมาะสม โดยกำหนดสีที่เหมาะกับองค์ประกอบแต่ละรายการ
ประสิทธิภาพ: การป้องกันการกะพริบ
หากใช้การสลับธีมที่ขับเคลื่อนด้วย JavaScript ให้ป้องกันการกะพริบของธีมที่ยังไม่ได้จัดรูปแบบ (FOUT) โดยใช้คลาสธีมกับ <html> แบบ同步ในแท็ก <script> ภายใน <head> ก่อนที่หน้าจะแสดงผล
สีธีมเมตา
ปรับสีส่วนติดต่อของเบราว์เซอร์ (แถบที่อยู่บนมือถือ ตัวสลับงาน) ให้ตรงกับธีมมืด:
<pre class="code-sample"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a2e"></pre>
ตรวจสอบความเข้าใจ
ควรใช้ค่าของมีเดียคิวรีใดเพื่อใช้สไตล์โหมดมืดเมื่อ OS ตั้งค่าเป็นโหมดมืด
สรุป
prefers-color-scheme: dark ตรวจจับการตั้งค่าโหมดมืดของ OS ใช้ตัวแปร CSS ที่สลับค่าโทเค็นภายในมีเดียคิวรีเพื่อใช้โหมดมืดอัตโนมัติ ลดความสว่างของรูปภาพในโหมดมืด ทดสอบใน DevTools และอัปเดตเมตาแท็ก theme-color ของเบราว์เซอร์เพื่อประสบการณ์ใช้งานบนมือถือที่สมบูรณ์
คำถามที่พบบ่อย
บทเรียน “มีเดียคิวรี prefers-color-scheme” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “มีเดียคิวรี prefers-color-scheme” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “มีเดียคิวรี prefers-color-scheme”
ตรวจจับการตั้งค่าโหมดมืดหรือโหมดสว่างของระบบผู้ใช้ด้วยมีเดียคิวรี prefers-color-scheme คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “มีเดียคิวรี prefers-color-scheme” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- มีเดียคิวรี prefers-color-scheme
- ตัวแปร CSS สำหรับธีม
- คุณสมบัติ color-scheme
- การสลับโหมดมืดอัตโนมัติและด้วยตนเอง