หกระดับของดาร์กโหมด (2024)

 (cssence.com)
10 คะแนน โดย GN⁺ 2026-04-20 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • สรุปการแบ่งเป็น 8 ระดับ ที่ค่อย ๆ ขยายขอบเขตการทำดาร์กโหมด ตั้งแต่ความสามารถพื้นฐานของเบราว์เซอร์ไปจนถึง JavaScript media queries
  • วิธีที่ง่ายที่สุดคือประกาศ <meta name="color-scheme" content="light dark"> หรือ color-scheme: light dark เท่านั้น ก็สามารถตั้งค่าให้ทำงานตาม ความชอบด้านชุดสีของผู้ใช้ ได้
  • ในระดับที่สูงขึ้น สามารถใช้ฟังก์ชัน light-dark(), @media (prefers-color-scheme: dark), และ สไตล์ชีตแยกตามสคีม เพื่อปรับได้กว้าง ไม่ใช่แค่สี แต่รวมถึงรูปภาพและเงาด้วย
  • สามารถทำตัวสลับที่ไม่ได้ตามแค่ค่าระบบของผู้ใช้ โดยให้ตัวเลือก Automatic·light·dark ได้ 3 แบบ และใช้ :has() ร่วมกับ meta element จริงในการตรวจธีมได้
  • ครอบคลุมทั้ง ข้อจำกัดด้านการเข้าถึงของ Safari และข้อสังเกตเกี่ยวกับการทำงานของ prefers-color-scheme ตอนสั่งพิมพ์ ซึ่งชี้ให้เห็นว่าปัจจุบันแค่ฟีเจอร์ CSS รุ่นใหม่ก็ทำให้รองรับโหมดสว่าง/มืดได้ง่ายขึ้นมาก

การทำดาร์กโหมดแบบแบ่งเป็นระดับ

  • Level 1: Barebone

    • แม้ไม่มี CSS เลยก็เปิดใช้งานการแยก light/dark ได้ โดยเพียงเพิ่ม <meta name="color-scheme" content="light dark"> ใน head ของเอกสาร เบราว์เซอร์ก็จะเริ่มทำตาม ความชอบด้านชุดสี ของผู้ใช้
    • ตามทฤษฎีแล้ว ลำดับของรายการในแอตทริบิวต์ content มีความหมาย และผู้ใช้ที่ไม่ได้ระบุความชอบด้านชุดสีจะได้รับค่าตัวแรกในรายการที่คั่นด้วยช่องว่าง
    • แต่เนื่องจากการตั้งค่าของระบบปฏิบัติการในปัจจุบันไม่มีตัวเลือกไม่เลือกชุดสี สุดท้ายแล้วในทางปฏิบัติจึงมักลงเอยด้วยสคีมที่ตรงกับการตั้งค่าของระบบปฏิบัติการ
    • สามารถระบุค่าเดียวใน content ได้เช่นกัน ซึ่งในกรณีนั้นจะบังคับใช้สคีมนั้นโดยไม่คำนึงถึงความชอบของผู้ใช้
    • meta tag นี้ทำหน้าที่เป็น วิธีฝั่ง HTML ที่สอดคล้องกับวิธีแบบ CSS ในระดับถัดไปพอสมควร

  • Level 2: Basic

    • ใน CSS สามารถใช้ html { color-scheme: light dark; } เพื่อเปิดใช้การแยก โหมดสว่าง/มืด ได้
    • หากมี meta tag อยู่ใน DOM แล้ว ก็ไม่จำเป็นต้องใช้ประกาศนี้ และหากควบคุม HTML ได้ แนะนำให้ใช้ meta tag เพราะเบราว์เซอร์จะรับรู้คำสั่งได้ตั้งแต่ก่อน parse CSS
    • ทั้งสองวิธีช่วยให้ใช้ user agent default styles และ โหมดสว่าง/มืด ที่รวมอยู่ในนั้นได้
    • หากเพิ่ม CSS เข้าไปอีก แต่จำกัดการใช้งานไว้กับ CSS system colors เป็นหลัก ก็ยังทำดีไซน์ที่ค่อนข้างเป็นระเบียบได้
    • ต่างจาก meta tag ที่มีผลกับทั้งเอกสารเสมอ การประกาศ color-scheme ใน CSS สามารถกำหนดที่ตำแหน่งอื่นนอกจาก root element ได้ด้วย จึงมีช่องให้ประยุกต์ใช้งานเพิ่ม

  • Level 3: Benign

    • ใช้ ฟังก์ชันสี light-dark() ของ CSS ซึ่งถูกเพิ่มเข้ามาไม่นานนัก เพื่อปรับโหมดสว่าง/มืดแบบง่าย ๆ ได้
    • ตัวอย่างเช่น background-color: light-dark(black, white); และ color: light-dark(white, black); โดยอาร์กิวเมนต์ตัวแรกใช้กับโหมดสว่าง และตัวที่สองใช้กับโหมดมืด
    • จะใส่ค่าสีจริงโดยตรงก็ได้ หรือใส่ custom properties ที่ตีความเป็นสีก็ได้
    • ตลอดทั้งบทความ ระดับนี้เป็นระดับเดียวที่ ณ เวลาที่เขียนยังมี การรองรับของเบราว์เซอร์ ไม่เพียงพอ

  • Level 4: Bold

    • สามารถทำการสลับดาร์กโหมดด้วย media query แบบดั้งเดิม @media (prefers-color-scheme: dark) ได้
    • ไม่ว่าจะ query ฝั่ง light หรือ dark ก็สามารถทำ การปรับแต่งได้เต็มที่ที่สุด และไม่ได้จำกัดแค่การเปลี่ยนสีอย่างเดียว
    • สามารถปรับอย่างการลดความสดของภาพด้วยฟิลเตอร์ในดาร์กโหมด หรือเปลี่ยน box shadow เป็นเส้นขอบได้ทั้งหมด
    โฆษณา

  • Level 5: Bisectional

    • media query ใช้ใน HTML ได้เช่นกัน โดยใส่ในแอตทริบิวต์ media ของ link element เพื่อแยก สไตล์ชีตตามสคีม ได้
    • มีตัวอย่างการเชื่อม light.css และ dark.css เข้ากับ prefers-color-scheme: light และ prefers-color-scheme: dark ตามลำดับ
    • หากขอบเขตการปรับแต่งกว้าง การแยกเป็นไฟล์เฉพาะทางจะเหมาะกว่า และเบราว์เซอร์สามารถละเลยไฟล์ CSS ที่ไม่ตรงกับ query ได้ จึงอาจลดจำนวนไฟล์ที่ต้องดาวน์โหลดลงหนึ่งไฟล์

  • Level 6: Ballistic

    • ใน JavaScript สามารถใช้ media query สำหรับชุดสี ผ่าน window.matchMedia('(prefers-color-scheme:dark)') ได้
    • สามารถ query ได้ว่ากำลังเป็นสคีมสว่างหรือมืดแบบเดียวกับ media query อื่น ๆ แล้วนำผลลัพธ์ไปทำงานตามต้องการ
    • ในการใช้งานจริง ไม่จำเป็นต้องยึดวิธีจากระดับก่อนหน้าเพียงแบบเดียว แต่สามารถ ผสมหลายเทคนิค เข้าด้วยกันได้

ตัวสลับของผู้ใช้และแพตเทิร์นขั้นสูง

  • Level 7: Beyond

    • ไม่จำเป็นต้องพึ่งแต่ค่าความชอบของระบบผู้ใช้เท่านั้น แต่สามารถสร้าง color scheme switcher ได้
    • ตัวสลับนี้ไม่ใช่ค่าแบบบูลีนธรรมดา และควรมีโหมด Automatic ที่ใช้ prefers-color-scheme เป็นค่าเริ่มต้น
    • เมื่อวางตัวสลับทับลงไป ผู้ใช้จะเลือกได้หนึ่งใน สามโหมด คือ Automatic, light, dark

  • Level 8: Beguiling

    • เวลาทำตัวสลับแบบ Level 7 โดยทั่วไปมักใช้วิธีเพิ่มคลาส .dark หรือแอตทริบิวต์อย่าง data-theme="dark" ให้กับ HTML element
    • แต่อีกทางหนึ่งสามารถใช้ :has() เพื่อ query การมีอยู่ของ <meta name="color-scheme" content="dark"> โดยตรงได้
    • ในตัวอย่าง มีการตั้งค่า ตัวแปร CSS อย่าง --color-bg, --color-text ให้เป็นค่าของดาร์กโหมดภายใต้ selector html:has(meta[name="color-scheme"][content="dark"])
    • จึงสามารถตรวจธีมจาก meta element จริงได้โดยไม่ต้องมีคลาสหรือ data attribute แยกต่างหาก
    โฆษณา

ประเด็นเพิ่มเติมและข้อสังเกต

  • ข้อสังเกตจาก CSS Naked Day

    • หลังจากเอาสไตล์ออก พบว่าแทบทุกเว็บไซต์ที่เข้าไปยัง ไม่มีดาร์กโหมด ซึ่งกลายเป็นที่มาของการแบ่งระดับดาร์กโหมดนี้
    • ผู้เขียนยังกล่าวด้วยว่า เมื่อสร้างเว็บไซต์ใหม่ตั้งแต่ต้นและเขียนสไตล์ใหม่ ฟีเจอร์ CSS สมัยใหม่ทำให้ การใส่โหมดสว่าง/มืดในตัว กลายเป็นเรื่องง่ายมาก

  • ปัญหาการเข้าถึงใน Safari

    • มีการชี้ว่า จนกระทั่งไม่นานมานี้ Safari ยังไม่ให้ สีลิงก์ที่เข้าถึงได้ ในดาร์กโหมด
    • ใน CSS Naked Day ครั้งก่อน ผู้เขียนเคยพบปัญหานี้และลบ meta tag ออก จากนั้นใช้เฉพาะชุดสีสว่าง
    • ภายหลังจึงเพิ่ม meta tag กลับเข้าไป แต่ก็รับรู้ว่าผู้ใช้ Safari เวอร์ชันเก่าอาจเจอ การเข้าถึงที่แย่ลง
    • ยังพบด้วยว่าในดาร์กโหมดของ Safari กล่องข้อความ ไม่มีเส้นขอบที่มองเห็นได้
    • การพึ่งแค่ user agent styles อย่างเดียว ต่อให้ใช้ semantic HTML ถูกต้อง ก็ยังไม่อาจรับประกันการเข้าถึงได้สมบูรณ์ จึงมีการคิดต่อว่าจะคงสไตล์ไว้มากพอใน CSS Naked Day ครั้งถัดไปอย่างไร

  • การพิมพ์และเงื่อนไข screen and

    • เหตุผลที่ใช้ screen and ... ในตัวอย่างของ Bisectional คือมีเจตนา ไม่รวมอุปกรณ์พิมพ์
    • โดยตั้งสมมุติฐานว่ามี core stylesheet ที่ไม่ผูกกับธีม หรือมี stylesheet สำหรับงานพิมพ์แยกต่างหาก และมองว่าดาร์กโหมดบนเครื่องพิมพ์อาจใช้หมึกมาก จึงเลือกแยกออกอย่างปลอดภัย
    • ในการทดสอบจริง ต่อให้เปิดดาร์กโหมดของระบบแล้วสั่งพิมพ์ ก็ยังได้แค่ตัวอักษรสีดำบนกระดาษขาว จึงสังเกตได้ว่าเบราว์เซอร์ไม่ได้ใช้สไตล์ดาร์กโหมดนั้นกับงานพิมพ์
    • จากการทดสอบเพิ่ม ในหน้าตัวอย่างก่อนพิมพ์ prefers-color-scheme ถูกรายงานเป็น light เสมอ โดยยืนยันใน Firefox และ Chromium
    • ปิดท้ายด้วยมุกว่าถ้ามีเครื่องพิมพ์ที่ใช้กระดาษสีดำกับหมึกสีขาวก็คงน่าเสียดายอยู่เหมือนกัน

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2026-04-20
ความเห็นจาก Hacker News
  • ถ้าปรับแต่งเยอะ การแยกไฟล์เฉพาะก็พอฟังขึ้นอยู่หรอก แต่คำอธิบายที่ว่า CSS ที่ไม่ตรงกับ media query จะไม่ถูกดาวน์โหลดเลยนั้น ผมว่ามันไม่ตรงกับการทำงานจริงของเบราว์เซอร์ จากประสบการณ์ของผม เบราว์เซอร์สุดท้ายก็ ดาวน์โหลดทั้งหมด อยู่ดี แค่ให้ลำดับความสำคัญต่างกัน
  • ผมสงสัยว่ายังไม่มีวิธีป้องกันอาการวาบสว่างแบบ flashbang ที่เกิดขึ้นระหว่างรอคอนเทนต์เริ่มต้นจากเซิร์ฟเวอร์จริง ๆ เหรอ
    • ผมว่าการกำหนด background-color ใน userContent.css ของ Firefox ก็ใช้ได้ดีนะ
    • ผมแค่ ลดความสว่างหน้าจอ แล้วปิดดาร์กโหมด อาการ flashbang ก็หายไปเอง แถมแบตเตอรี่อยู่ได้นานขึ้นด้วย
  • ตอนแรกผมนึกว่าบทความนี้จะพูดถึงความชอบเรื่อง ความดำของพื้นหลัง ในดาร์กโหมดเสียอีก ก็เคยได้ยินว่าดำสนิทช่วยประหยัดแบตบน OLED ได้ดีกว่า และผมก็รู้จักคนที่ชอบสีเทาที่หมึกไม่เข้มเท่าดำสนิทมากกว่าเหมือนกัน แต่จะต้องถึงหกระดับเลยไหมผมก็ยังไม่แน่ใจ ที่พอรู้สึกความต่างได้จริงสำหรับผมน่าจะมากสุดแค่ราว ๆ 3~4 ระดับ
    • ผมคิดว่าทางออกที่เป็นสากลกว่าคือการทำมาตรฐานความเข้ากันได้กับ Reader Mode แทนที่จะให้แต่ละเว็บต้องมารองรับรสนิยมผู้ใช้ทุกแบบจนกลายเป็นปัญหา n x m ผมว่าถ้าเว็บรองรับแค่มุมมองคอนเทนต์แบบเรียบง่ายหนึ่งแบบ แล้วให้เบราว์เซอร์จัดการการตั้งค่ารายผู้ใช้ต่อจากนั้น จะดีกว่า
    • สำหรับ OLED ผมค่อนข้างชอบ สีดำสนิท เพราะรู้สึกว่ายิ่งพิกเซลติดน้อย ภาระเรื่องเบิร์นอินก็ยิ่งลดลง และไหน ๆ อายุการใช้งานก็มีจำกัดอยู่แล้ว ในระยะยาวผมจึงอยากใช้จอให้นานกว่า 5 ปีขึ้นไป มากกว่าจะเปลี่ยนทุก 2~3 ปี
  • สำหรับผม ระดับที่ดีที่สุดคือ 9 ไม่ก็ 0 คือแค่ ปิดคอมพิวเตอร์ แล้วไป นอนหลับ
  • ผมดีใจที่ OP ทำ สวิตช์ 3 สถานะ ได้ถูกต้อง
  • ผมคิดว่าน่าจะสนุกกว่านี้ถ้าระดับต่าง ๆ ถูก ปรับใช้แบบไดนามิก ตอนเลื่อนหน้าลง
    • หรือไม่ก็ให้ผู้อ่านเลือก ระดับ เองได้ตามตำแหน่งที่เหมาะสมของหน้าแต่ละจุดก็น่าจะโอเค
  • ผมว่ามันน่าจะเป็น 8 ระดับ มากกว่านะ
  • มันให้ความรู้สึกว่า นี่มันปี 2024 จริง ๆ
  • ในสถานการณ์แบบนี้ สิ่งที่ผมนึกถึงก็คือ xkcd 3227 นั่นแหละ