วิธีเพิ่มโหมดมืดให้เว็บไซต์หรือแอปของคุณ (โดยไม่มีอาการจอขาววาบ)
การเพิ่มโหมดมืด ให้กำหนดสีของคุณเป็น โทเคน ที่มีชื่อ (พื้นหลัง พื้นผิว ข้อความ เส้นขอบ สีหลัก) แทนการฮาร์ดโค้ดค่า ให้แต่ละโทเคนมีค่าสำหรับโหมดสว่างและโหมดมืด แล้วสลับระหว่างสองค่านี้ด้วยฟีเจอร์สื่อ prefers-color-scheme ของ CSS เพื่อให้เว็บไซต์ทำตามการตั้งค่าระบบของผู้เข้าชม หากต้องการปุ่มสลับด้วยตนเองด้วย ให้เก็บตัวเลือกไว้ในเบราว์เซอร์ และใช้สคริปต์อินไลน์เล็ก ๆ ใน head ของหน้าเพื่อไม่ให้จอขาววาบตอนโหลด จากนั้นตรวจสอบคอนทราสต์ รูปภาพ และแผนภูมิในทั้งสองธีม ในเครื่องมือสร้างแอป AI พรอมต์ที่ชัดเจนเพียงหนึ่งข้อก็ทำงานส่วนใหญ่นี้ได้ แต่คุณภาพอยู่ที่ขั้นตอนการตรวจสอบ
สองแนวทาง
| แนวทาง | วิธีทำงาน | เหมาะกับ | ข้อแลกเปลี่ยน |
|---|---|---|---|
| ทำตามระบบ | ฟีเจอร์สื่อ CSS prefers-color-scheme เลือกสว่างหรือมืด | เว็บไซต์ง่าย ๆ ไม่ต้องมี UI เพิ่ม | ผู้เข้าชมเลือกต่างจากอุปกรณ์ของตัวเองไม่ได้ |
| ปุ่มสลับ + ค่าเริ่มต้นตามระบบ | เริ่มจากการตั้งค่าของระบบ สวิตช์ สว่าง / มืด / ระบบ จะ override และถูกจดจำ | แอปที่คนใช้บ่อย | ต้องใช้ JavaScript เล็กน้อย และต้องแก้ปัญหาจอวาบตอนโหลด |
แอปส่วนใหญ่จะได้ผลดีที่สุดกับแนวทางที่สอง คือเคารพการตั้งค่าของระบบเป็นค่าเริ่มต้น และให้คนเลือก override ได้
เริ่มด้วยโทเคนสี
โหมดมืดทำได้ยากเมื่อสีกระจัดกระจายอยู่ในโค้ดในรูป white, #333 และ gray-100 แต่จะทำได้ง่ายเมื่อทุกสีมาจากชุดโทเคนที่มีชื่อเล็ก ๆ ชุดเดียว
| โทเคน | สว่าง | มืด |
|---|---|---|
background | ขาวอมเทาอ่อน ๆ | เทาเข้มมาก |
surface (การ์ด เมนู) | ขาว | เทาเข้มที่สว่างขึ้นเล็กน้อย |
text | ดำอมเทาเข้ม | ขาวนวล |
text-muted | เทาปานกลาง | เทาปานกลางที่สว่างขึ้น |
border | เทาอ่อน | เทาเข้มที่มีคอนทราสต์เล็กน้อย |
accent | สีแบรนด์ของคุณ | มักเป็นเวอร์ชันที่สว่างขึ้นหรืออิ่มตัวน้อยลง |
แต่ละคอมโพเนนต์ใช้ชื่อโทเคน การสลับธีมจึงหมายถึงการเปลี่ยนชุดค่าเพียงชุดเดียว ไม่ใช่แก้ทุกคอมโพเนนต์
เคล็ดลับสำหรับพาเลตต์โหมดมืด:
- หลีกเลี่ยงดำสนิทและขาวสนิท สำหรับพื้นที่ขนาดใหญ่ เทาเข้มมากและขาวนวลอ่านง่ายกว่า
- แสดงความลึกด้วยพื้นผิวที่สว่างกว่า ไม่ใช่เงา เพราะเงาแทบไม่เห็นบนพื้นหลังมืด
- ลดความอิ่มตัวของสีแบรนด์ที่สดใสลงเล็กน้อย เพราะสีสดอาจเรืองแสงไม่สบายตาบนพื้นหลังมืด
- รักษาคอนทราสต์ให้อ่านได้ เกณฑ์ AA ของ WCAG ต้องมีคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติ ข้อความสีเทาที่จางมักไม่ผ่านเกณฑ์นี้ในธีมมืด
กับ Tailwind CSS
Tailwind เป็นเครื่องมือสไตล์ค่าเริ่มต้นในแอปจำนวนมากที่สร้างด้วย AI ตาม เอกสารโหมดมืดของ Tailwind ตัวแปร dark: ใช้ prefers-color-scheme เป็นค่าเริ่มต้น ดังนั้นคลาสอย่าง bg-white dark:bg-gray-900 จะทำตามการตั้งค่าระบบโดยไม่ต้องทำอะไรเพิ่ม
สำหรับปุ่มสลับด้วยตนเองใน Tailwind v4 เอกสารแสดงการเปลี่ยนตัวแปรให้เป็นคลาสบนองค์ประกอบแม่:
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
จากนั้นแอปจะเพิ่มหรือลบคลาส dark บนองค์ประกอบราก เอกสารยังแนะนำสคริปต์อินไลน์ใน head ที่นำตัวเลือกที่บันทึกไว้ (หรือการตั้งค่าระบบ) ไปใช้ก่อนที่หน้าจะถูกวาด ซึ่งเป็นวิธีหลีกเลี่ยงการกะพริบ
หลีกเลี่ยงจอขาววาบ
การวาบเกิดขึ้นเพราะหน้าเว็บถูกวาดในโหมดสว่างก่อน จากนั้น JavaScript โหลด อ่านตัวเลือกที่บันทึกไว้ แล้วจึงสลับเป็นโหมดมืด วิธีแก้:
- ใส่ สคริปต์อินไลน์เล็ก ๆ ในส่วน head ของหน้า ที่อ่านธีมที่บันทึกไว้และตั้งคลาสบนองค์ประกอบรากก่อนที่อะไรจะถูกแสดงผล
- ตั้งค่า CSS
color-schemeสำหรับแต่ละธีม เพื่อให้ส่วนที่เบราว์เซอร์วาด (แถบเลื่อน ฟอร์มคอนโทรล) ตรงกัน - ตั้ง สีพื้นหลังที่ชัดเจน ให้หน้าในทั้งสองธีม
- หากแอปเป็นแบบ server-rendered ให้แน่ใจว่าเซิร์ฟเวอร์และเบราว์เซอร์เห็นตรงกันเรื่องธีมเริ่มต้น ไม่เช่นนั้นหน้าอาจเรนเดอร์ใหม่และกระพริบ
ตัวอย่างพรอมต์
การตั้งค่าครบชุด:
เพิ่มโหมดมืด ก่อนอื่นให้แทนที่สีที่ฮาร์ดโค้ดด้วยโทเคนธีม (background, surface, text, muted text, border, accent) พร้อมค่าสว่างและมืด ค่าเริ่มต้นให้ทำตามการตั้งค่าระบบของผู้เข้าชม เพิ่มสวิตช์ธีมในส่วนหัวที่มีตัวเลือก Light, Dark และ System จดจำตัวเลือกไว้ใน localStorage และนำไปใช้ด้วยสคริปต์อินไลน์ใน head เพื่อไม่ให้จอขาววาบตอนโหลด ตั้ง color-scheme สำหรับแต่ละธีม คงการออกแบบโหมดสว่างปัจจุบันไว้ทุกประการ
การแก้สิ่งที่เหลือ:
ตรวจสอบทุกหน้าในโหมดมืดและแก้ไข: ข้อความที่คอนทราสต์ต่ำ (ตั้งเป้าอย่างน้อย 4.5:1) พื้นหลังสีขาวที่ฮาร์ดโค้ด เส้นขอบที่หายไป แผนภูมิที่มีข้อความสีเข้มบนพื้นหลังมืด และโลโก้ที่มองไม่เห็น ห้ามเปลี่ยนธีมสว่าง
รูปภาพและแผนภูมิ:
ใช้โลโก้เวอร์ชันสว่างในโหมดมืด ให้แกน เส้นตาราง และป้ายของแผนภูมิใช้โทเคนธีม ใส่เส้นขอบบาง ๆ ให้ภาพหน้าจอในโหมดมืดเพื่อไม่ให้กลืนไปกับพื้นหลัง
ขั้นตอนทีละขั้น
- ตรวจสีที่ใช้อยู่ ค้นหาสีที่ฮาร์ดโค้ดและแทนที่ด้วยโทเคน นี่คืองานส่วนใหญ่
- กำหนดค่าโหมดมืด สำหรับแต่ละโทเคน
- ทำตามระบบ ด้วย
prefers-color-scheme(หรือdark:ค่าเริ่มต้นของ Tailwind) - เพิ่มปุ่มสลับ หากต้องการ: Light, Dark, System เก็บตัวเลือกในเบราว์เซอร์ สำหรับแอปที่ต้องล็อกอิน คุณอาจบันทึกลงโปรไฟล์ของผู้ใช้ด้วย
- ป้องกันการวาบ ด้วยสคริปต์ใน head และ
color-scheme - ตรวจส่วนที่ยุ่งยาก: โลโก้ ไอคอน รูปภาพที่มีพื้นหลังขาว แผนภูมิ บล็อกโค้ด แผนที่ embed และอีเมล
- ทดสอบ ทั้งสองธีมบนเดสก์ท็อปและโทรศัพท์ โดยตั้งระบบเป็นสว่างและมืด และหลังรีเฟรชแบบ hard
ข้อผิดพลาดที่พบบ่อย
- กลับสีทุกอย่าง ฟิลเตอร์ที่กลับสีทำลายรูปภาพและสีแบรนด์
- ทิ้งสีที่ฮาร์ดโค้ดไว้ การ์ดขาวใบเดียวในหน้ามืดจะเด่นขึ้นมาทันที
- ข้อความสีเทาคอนทราสต์ต่ำ ดูสวยแต่อ่านยาก
- จอขาววาบตอนโหลด เห็นได้ชัดเป็นพิเศษบนโทรศัพท์ตอนกลางคืน
- ลืม embed ของบุคคลที่สาม แผนที่ วิดีโอ และวิดเจ็ตอาจยังเป็นสีสว่าง ให้ตรวจว่ามีตัวเลือกโหมดมืดหรือไม่
- ปุ่มสลับที่มีแค่สองสถานะ เมื่อคนคลิกแล้วจะกลับไปทำตามระบบไม่ได้
- ทำลายธีมสว่าง ระบุในพรอมต์ให้ชัดว่าการออกแบบโหมดสว่างต้องคงเดิม
เช็กลิสต์
- สีทั้งหมดมาจากโทเคนธีม
- ทำตามการตั้งค่าระบบเป็นค่าเริ่มต้น
- มีปุ่มสลับแบบเลือกได้ (Light, Dark, System) และจดจำไว้
- ไม่มีจอขาววาบตอนโหลดหรือรีเฟรช
- ตั้ง
color-schemeแล้ว ฟอร์มคอนโทรลและแถบเลื่อนตรงกัน - คอนทราสต์ข้อความอย่างน้อย 4.5:1 ในทั้งสองธีม
- ตรวจโลโก้ รูปภาพ แผนภูมิ และ embed ในโหมดมืดแล้ว
- ธีมสว่างไม่เปลี่ยนแปลง
- ทดสอบบนเดสก์ท็อปและโทรศัพท์แล้ว
โหมดมืดกับ Mythex
แอปที่สร้างบน Mythex ใช้ Vite, React, TypeScript และ Tailwind เป็นค่าเริ่มต้น ดังนั้นแนวทาง Tailwind ข้างต้นใช้ได้โดยตรง: วางพรอมต์การตั้งค่าครบชุดในแชต จากนั้นตรวจ Preview ในทั้งสองธีมและที่ขนาดโทรศัพท์ คำแนะนำการสร้างพรอมต์ด้านการออกแบบของ Mythex คือระบุสิ่งที่ต้องเปลี่ยนและสิ่งที่ต้องคงไว้ ซึ่งสำคัญมากที่นี่ ให้บอกว่าธีมโหมดสว่างต้องคงเดิม ดู พรอมต์การออกแบบและ UI และย้อนกลับด้วย checkpoint หากการปรับแก้ครั้งใดทำให้ผลไม่ดี
เพื่อให้ได้รูปลักษณ์ที่ถูกต้อง ดู วิธีออกแบบแอปให้สวยด้วย AI และ วิธีเขียนพรอมต์สำหรับเครื่องมือสร้างแอป AI
คำถาม
ทำให้เว็บไซต์ทำตามการตั้งค่าโหมดมืดของอุปกรณ์ได้อย่างไร?
ใช้ฟีเจอร์สื่อ CSS prefers-color-scheme ซึ่งบอกว่าระบบของผู้เข้าชมตั้งเป็นโหมดสว่างหรือมืด ตัวแปร dark: ของ Tailwind ใช้ฟีเจอร์นี้เป็นค่าเริ่มต้น
ทำไมเว็บไซต์ของฉันกะพริบเป็นสีขาวก่อนเปลี่ยนเป็นโหมดมืด?
ธีมที่บันทึกไว้ถูกนำไปใช้ด้วย JavaScript หลังจากหน้าเว็บถูกวาดขึ้นแล้ว แก้ด้วยสคริปต์อินไลน์เล็ก ๆ ในส่วน head ของหน้าที่ตั้งคลาสของธีมก่อนที่จะมีการแสดงผลใด ๆ และตั้งสีพื้นหลังที่ชัดเจนสำหรับทั้งสองธีม
โหมดมืดควรเป็นสีดำสนิทไหม?
โดยทั่วไปไม่ควร สีเทาเข้มมาก ๆ อ่านสบายตากว่าเมื่ออ่านนาน ๆ และช่วยให้แสดงความลึกด้วยพื้นผิวที่สว่างขึ้นเล็กน้อยได้ สีดำสนิทอาจเหมาะกับการออกแบบที่เน้น OLED หรือสื่อมากเป็นพิเศษ
ถ้าทำตามการตั้งค่าของระบบแล้ว ยังต้องมีปุ่มสลับโหมดมืดไหม?
ไม่จำเป็นอย่างเคร่งครัด การทำตามระบบเป็นค่าเริ่มต้นที่ดี แต่ปุ่มสลับที่มีตัวเลือก สว่าง มืด และระบบ ช่วยคนที่ต้องการให้เว็บไซต์ต่างจากการตั้งค่าของอุปกรณ์ได้