Dark Mode ช่วยลดแสงจ้า เพิ่มโฟกัส และประหยัดพลังงานบนจอ OLED แต่เสี่ยงอ่านยาวล้า ติดปัญหาคอนทราสต์ และกราฟ/ตารางดูยาก หากเป็นเว็บไซต์บริษัท แนะนำ “ให้ผู้ใช้เลือกได้” เคารพระบบ (prefers-color-scheme) ตั้งคอนทราสต์ตาม WCAG และทดสอบคอนเทนต์จริง

ผลกระทบของ Dark Mode ต่อ UX ในเว็บไซต์องค์กร

Executive view Dark Mode ไม่ใช่เพียงแฟชั่น—มันมีผลต่อการอ่าน ความน่าเชื่อถือ และอัตราการแปลงของเว็บไซต์ธุรกิจ คำสำคัญคือ ตัวเลือกของผู้ใช้, คอนทราสต์ตาม WCAG, ประสิทธิภาพ (CWV) และ ความสอดคล้องกับแบรนด์

เลือก Light หรือ Dark ตามบริบทการใช้งาน

อาการ UX พังใน Dark Mode: สัญญาณและวิธีแก้ไข

โค้ดตัวอย่าง: รองรับระบบ + ปุ่มสลับธีม + ติดตาม GA4

<!-- HTML ปุ่มสลับ -->
<button id="themeToggle" aria-label="Toggle theme">Toggle Theme</button>

<!-- CSS: เคารพระบบ -->
<style>
  :root { color-scheme: light dark; }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#0b0f14; --fg:#e6e9ef; --muted:#96a0aa; --brand:#66c6ff; }
    body { background:var(--bg); color:var(--fg); }
    a { color:var(--brand); }
  }
  @media (prefers-color-scheme: light) {
    :root { --bg:#ffffff; --fg:#0b1220; --muted:#5a6672; --brand:#005bbb; }
    body { background:var(--bg); color:var(--fg); }
    a { color:var(--brand); }
  }
  .theme-light { --bg:#ffffff; --fg:#0b1220; --muted:#5a6672; --brand:#005bbb; }
  .theme-dark  { --bg:#0b0f14; --fg:#e6e9ef; --muted:#96a0aa; --brand:#66c6ff; }
  body { background:var(--bg); color:var(--fg); }
  a { color:var(--brand); }
</style>

<script>
// โหลดค่าเดิม
const saved = localStorage.getItem('theme'); // 'light' | 'dark' | null
if (saved) document.documentElement.classList.add('theme-' + saved);

// ปุ่มสลับ + GA4
document.getElementById('themeToggle')?.addEventListener('click', () => {
  const html = document.documentElement;
  const isDark = html.classList.toggle('theme-dark');
  if (isDark) html.classList.remove('theme-light'); else html.classList.add('theme-light');
  const mode = isDark ? 'dark' : 'light';
  localStorage.setItem('theme', mode);
  window.gtag?.('event','set_theme',{theme:mode});
});
</script>

บริการที่เกี่ยวข้อง