กลับไปหน้า Design
ทริคDesign

Dark Mode Color

สีสำหรับ dark mode ต้องปรับให้ใช้ได้บนพื้นมืดโดยไม่จ้าตาหรือกลืนพื้นหลัง

เริ่มอ่านตรงนี้ก่อน

อธิบายแบบง่าย

Dark Mode Color คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น

ระดับ

เหมาะกับคนที่ต้องตรวจงานหรือวางมาตรฐาน

ใช้เมื่อไหร่

ตอนคุณทำธีมที่รองรับทั้งโหมดสว่างและมืด

อ่านแล้วทำอะไรต่อ

ใช้พื้นหลัง #121212 แทน #000000 ลดความแสบตาจากความต่างของสีที่สูงเกินไป และทำให้เงาของการ์ดยังมองเห็นได้

เห็นภาพ: ทริคนี้เป็นยังไง

ดำสนิท ✗

#000000 · ตัดตาเกิน

เทาเข้ม ✓

#121212 · พื้นหลัง

Surface

#1E1E1E · การ์ด

Accent

#A8D44A · เขียวสว่างขึ้น

พื้นมืดใช้เทาเข้ม ไม่ใช่ดำสนิท — ตาไม่ล้า

ใช้ตอนไหน?

  • ตอนคุณทำธีมที่รองรับทั้งโหมดสว่างและมืด
  • ตอนคุณตรวจว่าสีแบรนด์ยังอ่านออกบนพื้นมืด
  • ตอนคุณกำหนดสีพื้นหลังและตัวอักษรของ dark mode

ความหมาย

dark mode (โหมดมืด) คือธีมที่ใช้พื้นหลังสีเข้มและตัวอักษรสีอ่อน การทำสีให้ใช้ได้ทั้งสองโหมดต้องลดความสด (saturation) ของสีบนพื้นมืด และเลี่ยงพื้นดำสนิทเพราะตัดกับตัวอักษรขาวจนแสบตา

ปรับสีสำหรับพื้นมืด

เลี่ยงดำสนิทและขาวสนิท ลดความสดของสีเน้น แล้วเช็ค contrast ใหม่

พื้นหลัง -> #121212 (ไม่ใช่ #000000)
ตัวอักษร -> #E6E6E6 (ไม่ใช่ #FFFFFF)
สีเน้น   -> ลด saturation ลง 10-20%

ตัวอย่างการใช้

พื้นหลังเทาเข้มแทนดำสนิท

ใช้พื้นหลัง #121212 แทน #000000 ลดความแสบตาจากความต่างของสีที่สูงเกินไป และทำให้เงาของการ์ดยังมองเห็นได้