การใช้งานโหมดมืด: คู่มือฉบับสมบูรณ์ด้วย CSS และ JavaScript

โหมดมืดได้รับความนิยมเพิ่มขึ้นอย่างต่อเนื่อง มอบประสบการณ์การรับชมที่สบายตายิ่งขึ้น โดยเฉพาะอย่างยิ่งในสภาพแวดล้อมที่มีแสงน้อย คู่มือนี้ให้ภาพรวมที่ครอบคลุมเกี่ยวกับวิธีการใช้งานโหมดมืดบนเว็บไซต์ของคุณโดยใช้ CSS และ JavaScript เพื่อให้มั่นใจถึงประสบการณ์การใช้งานที่ราบรื่นและเข้าถึงได้สำหรับผู้ชมทั่วโลก

เหตุใดจึงต้องใช้งานโหมดมืด

มีเหตุผลที่น่าสนใจหลายประการในการพิจารณาใช้งานโหมดมืด:

• ประสบการณ์ผู้ใช้ที่ดีขึ้น: ผู้ใช้หลายคนพบว่าโหมดมืดสบายตากว่า ลดอาการเมื่อยล้าของดวงตา โดยเฉพาะอย่างยิ่งเมื่อเรียกดูในเวลากลางคืนหรือในสภาพแวดล้อมที่มีแสงสลัว สิ่งนี้ตอบสนองต่อผู้ชมทั่วโลกที่มีพฤติกรรมการใช้หน้าจอและสภาพแสงที่แตกต่างกัน
• การเข้าถึง: โหมดมืดสามารถปรับปรุงการเข้าถึงสำหรับผู้ที่มีความบกพร่องทางสายตาหรือความไวต่อแสง การจัดหาตัวเลือกที่มีคอนทราสต์สูงทำให้เว็บไซต์ของคุณครอบคลุมมากยิ่งขึ้น
• อายุการใช้งานแบตเตอรี่: บนอุปกรณ์ที่มีหน้าจอ OLED หรือ AMOLED โหมดมืดสามารถลดการใช้พลังงาน ซึ่งจะช่วยยืดอายุการใช้งานแบตเตอรี่ สิ่งนี้เกี่ยวข้องอย่างยิ่งกับผู้ใช้มือถือในพื้นที่ที่มีข้อจำกัดในการเข้าถึงโครงสร้างพื้นฐานการชาร์จ
• เทรนด์การออกแบบที่ทันสมัย: โหมดมืดเป็นเทรนด์การออกแบบที่ได้รับความนิยม และการนำไปใช้อาจทำให้เว็บไซต์ของคุณดูทันสมัยและน่าสนใจยิ่งขึ้น สิ่งนี้ช่วยเพิ่มการรับรู้ถึงแบรนด์และการมีส่วนร่วมของผู้ใช้

วิธีการใช้งานโหมดมืด

มีหลายแนวทางในการใช้งานโหมดมืด แต่ละวิธีมีข้อดีและข้อเสียของตัวเอง เราจะสำรวจวิธีการที่พบบ่อยที่สุด:

• CSS Media Queries (prefers-color-scheme): วิธีนี้จะตรวจจับรูปแบบสีที่ผู้ใช้ต้องการโดยอัตโนมัติตามการตั้งค่าระบบปฏิบัติการ
• JavaScript Toggle: วิธีนี้มีสวิตช์แบบแมนนวล (เช่น สวิตช์หรือปุ่ม) ที่ช่วยให้ผู้ใช้สลับระหว่างโหมดสว่างและโหมดมืดได้
• การรวม Media Queries และ JavaScript: แนวทางนี้รวมข้อดีของทั้งสองวิธี โดยให้การตรวจจับอัตโนมัติในขณะที่ยังอนุญาตให้ผู้ใช้แทนที่การตั้งค่าระบบได้

1. การใช้งานโหมดมืดด้วย CSS Media Queries

CSS media query prefers-color-scheme ช่วยให้คุณตรวจจับรูปแบบสีที่ผู้ใช้ต้องการและใช้สไตล์ที่แตกต่างกันตามนั้น นี่เป็นวิธีที่ตรงไปตรงมาและมีประสิทธิภาพมากที่สุดในการใช้งานโหมดมืดสำหรับผู้ใช้ที่ได้ตั้งค่าการตั้งค่าระบบไว้แล้ว

ตัวอย่างโค้ด

เพิ่ม CSS ต่อไปนี้ลงในสไตล์ชีตของคุณ:

/* ธีมเริ่มต้น (สว่าง) */
body {
  background-color: #fff;
  color: #000;
}

/* ธีมมืด */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* ปรับองค์ประกอบอื่นๆ ตามต้องการ */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

คำอธิบาย:

• บล็อก CSS แรกกำหนดสไตล์ธีมเริ่มต้น (สว่าง)
• บล็อก @media (prefers-color-scheme: dark) ใช้สไตล์เฉพาะเมื่อระบบของผู้ใช้ตั้งค่าเป็นโหมดมืด
• ภายในบล็อก @media คุณสามารถกำหนดสไตล์โหมดมืดสำหรับองค์ประกอบต่างๆ ได้ เช่น พื้นหลังของ body และสีข้อความ หัวข้อ และลิงก์

ข้อดี

• การตรวจจับอัตโนมัติ: เบราว์เซอร์จะตรวจจับการตั้งค่าของผู้ใช้โดยอัตโนมัติ มอบประสบการณ์ที่ราบรื่น
• การใช้งานที่เรียบง่าย: วิธีนี้ต้องใช้โค้ดน้อยที่สุดและใช้งานง่าย
• ประสิทธิภาพ: CSS media queries ได้รับการจัดการอย่างมีประสิทธิภาพโดยเบราว์เซอร์

ข้อเสีย

• การควบคุมที่จำกัด: ผู้ใช้ไม่สามารถสลับระหว่างโหมดสว่างและโหมดมืดด้วยตนเองภายในเว็บไซต์ของคุณได้
• การพึ่งพาการตั้งค่าระบบ: ลักษณะที่ปรากฏขึ้นอยู่กับการตั้งค่าระบบของผู้ใช้ทั้งหมด ซึ่งพวกเขาอาจไม่ทราบหรือไม่สามารถเปลี่ยนแปลงได้

2. การใช้งานโหมดมืดด้วย JavaScript Toggle

การใช้ JavaScript toggle ช่วยให้ผู้ใช้มีสวิตช์แบบแมนนวลเพื่อควบคุมธีมของเว็บไซต์ สิ่งนี้ช่วยให้ผู้ใช้มีการควบคุมมากขึ้นและช่วยให้พวกเขาสามารถแทนที่การตั้งค่าระบบได้ แนวทางนี้มีความสำคัญอย่างยิ่งสำหรับการรองรับผู้ใช้ในอุปกรณ์และแพลตฟอร์มต่างๆ ที่อาจไม่รองรับหรือเปิดเผยการตั้งค่าโหมดมืดทั่วทั้งระบบอย่างสม่ำเสมอ

โครงสร้าง HTML

ขั้นแรก เพิ่มองค์ประกอบ toggle ลงใน HTML ของคุณ:

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

สิ่งนี้จะสร้างสวิตช์ toggle อย่างง่ายโดยใช้ช่องทำเครื่องหมายและการจัดรูปแบบ CSS ที่กำหนดเอง

การจัดรูปแบบ CSS (ไม่บังคับ)

คุณสามารถจัดรูปแบบสวิตช์ toggle โดยใช้ CSS นี่คือตัวอย่าง:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

โค้ด JavaScript

ตอนนี้ เพิ่มโค้ด JavaScript ต่อไปนี้เพื่อจัดการฟังก์ชัน toggle:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// ฟังก์ชันสำหรับสลับโหมดมืด
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // จัดเก็บการตั้งค่าของผู้ใช้ใน localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// ตรวจสอบ localStorage สำหรับการตั้งค่าที่บันทึกไว้
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// เพิ่มตัวฟังเหตุการณ์ให้กับ toggle
darkModeToggle.addEventListener('change', toggleDarkMode);

คำอธิบาย:

• โค้ดดึงองค์ประกอบ toggle และองค์ประกอบ body
• ฟังก์ชัน toggleDarkMode สลับคลาส dark-mode บนองค์ประกอบ body
• โค้ดใช้ localStorage เพื่อจัดเก็บการตั้งค่าของผู้ใช้ ดังนั้นจึงคงอยู่ระหว่างเซสชัน
• โค้ดตรวจสอบ localStorage เมื่อโหลดหน้าเว็บเพื่อใช้การตั้งค่าที่บันทึกไว้
• ตัวฟังเหตุการณ์จะถูกเพิ่มไปยัง toggle ดังนั้นฟังก์ชัน toggleDarkMode จะถูกเรียกเมื่อมีการคลิก toggle

การจัดรูปแบบ CSS สำหรับโหมดมืด (โดยใช้คลาส)

อัปเดต CSS ของคุณเพื่อใช้คลาส dark-mode เพื่อใช้สไตล์ธีมมืด:

/* ธีมเริ่มต้น (สว่าง) */
body {
  background-color: #fff;
  color: #000;
}

/* ธีมมืด */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

ข้อดี

• การควบคุมของผู้ใช้: ผู้ใช้สามารถสลับระหว่างโหมดสว่างและโหมดมืดด้วยตนเองภายในเว็บไซต์ของคุณได้
• ความคงอยู่: การตั้งค่าของผู้ใช้จะถูกบันทึกโดยใช้ localStorage ดังนั้นจึงคงอยู่ระหว่างเซสชัน

ข้อเสีย

• การใช้งานที่ซับซ้อนกว่า: วิธีนี้ต้องใช้โค้ดมากกว่าการใช้ CSS media queries เพียงอย่างเดียว
• การพึ่งพา JavaScript: ฟังก์ชัน toggle ขึ้นอยู่กับการเปิดใช้งาน JavaScript ในเบราว์เซอร์ของผู้ใช้

3. การรวม Media Queries และ JavaScript

แนวทางที่ดีที่สุดคือการรวม CSS media queries และ JavaScript toggle สิ่งนี้ให้สิ่งที่ดีที่สุดของทั้งสองโลก: การตรวจจับอัตโนมัติของรูปแบบสีที่ผู้ใช้ต้องการ ในขณะที่ยังอนุญาตให้ผู้ใช้แทนที่การตั้งค่าระบบด้วยตนเอง สิ่งนี้รองรับผู้ชมที่กว้างขึ้น รวมถึงผู้ที่อาจไม่ทราบหรือไม่สามารถเปลี่ยนการตั้งค่าธีมทั่วทั้งระบบได้

ตัวอย่างโค้ด

ใช้ HTML และ CSS เดียวกันจากตัวอย่าง JavaScript Toggle แก้ไข JavaScript เพื่อตรวจสอบการตั้งค่าระบบ:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// ฟังก์ชันสำหรับสลับโหมดมืด
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // จัดเก็บการตั้งค่าของผู้ใช้ใน localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// ตรวจสอบ localStorage สำหรับการตั้งค่าที่บันทึกไว้ จากนั้นตรวจสอบการตั้งค่าระบบ
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// เพิ่มตัวฟังเหตุการณ์ให้กับ toggle
darkModeToggle.addEventListener('change', toggleDarkMode);

คำอธิบาย:

• โค้ดจะตรวจสอบ localStorage ก่อนสำหรับการตั้งค่าที่บันทึกไว้
• หากไม่พบการตั้งค่าใน localStorage โค้ดจะตรวจสอบว่าระบบของผู้ใช้ต้องการโหมดมืดหรือไม่โดยใช้ window.matchMedia
• ถ้าระบบต้องการโหมดมืด คลาส dark-mode จะถูกเพิ่มลงใน body และ toggle จะถูกตรวจสอบ

ข้อดี

• การตรวจจับอัตโนมัติและการควบคุมของผู้ใช้: ให้ทั้งการตรวจจับอัตโนมัติและการควบคุมด้วยตนเอง
• ความคงอยู่: การตั้งค่าของผู้ใช้จะถูกบันทึกโดยใช้ localStorage

ข้อเสีย

• ซับซ้อนกว่าเล็กน้อย: วิธีนี้ซับซ้อนกว่าเล็กน้อยเมื่อเทียบกับการใช้วิธีใดวิธีหนึ่งเพียงอย่างเดียว
• การพึ่งพา JavaScript: ขึ้นอยู่กับการเปิดใช้งาน JavaScript

ข้อควรพิจารณาด้านการเข้าถึง

เมื่อใช้งานโหมดมืด สิ่งสำคัญคือต้องพิจารณาการเข้าถึงเพื่อให้แน่ใจว่าเว็บไซต์ของคุณยังคงใช้งานได้สำหรับผู้ใช้ทุกคน โปรดจำไว้ว่าการกลับสีเพียงอย่างเดียวไม่ได้เป็นการรับประกันการเข้าถึงโดยอัตโนมัติ นี่คือข้อควรพิจารณาที่สำคัญบางประการ:

• ความคมชัดของสี: ตรวจสอบให้แน่ใจว่ามีความคมชัดของสีที่เพียงพอระหว่างข้อความและพื้นหลังทั้งในโหมดสว่างและโหมดมืด ใช้เครื่องมือเช่น WebAIM's Contrast Checker (webaim.org/resources/contrastchecker/) เพื่อตรวจสอบว่าชุดสีของคุณเป็นไปตามมาตรฐานการเข้าถึง สิ่งนี้สำคัญอย่างยิ่งสำหรับผู้ที่มีสายตาเลือนราง
• ตัวบ่งชี้โฟกัส: ตรวจสอบให้แน่ใจว่าตัวบ่งชี้โฟกัสสามารถมองเห็นได้อย่างชัดเจนทั้งในโหมดสว่างและโหมดมืด เพื่อให้ผู้ใช้ที่นำทางด้วยแป้นพิมพ์สามารถมองเห็นองค์ประกอบที่กำลังโฟกัสอยู่ได้อย่างง่ายดาย
• รูปภาพและไอคอน: พิจารณาว่ารูปภาพและไอคอนจะปรากฏในโหมดมืดอย่างไร คุณอาจต้องจัดเตรียมเวอร์ชันสำรองหรือใช้ตัวกรอง CSS เพื่อปรับสีให้เหมาะสมที่สุด
• การทดสอบผู้ใช้: ทดสอบการใช้งานโหมดมืดของคุณกับผู้ใช้ที่มีความบกพร่องทางสายตาที่แตกต่างกัน เพื่อระบุและแก้ไขปัญหาการเข้าถึง

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้งานโหมดมืด

นี่คือแนวทางปฏิบัติที่ดีที่สุดที่ควรปฏิบัติตามเมื่อใช้งานโหมดมืดบนเว็บไซต์ของคุณ:

• ใช้ตัวแปร CSS (คุณสมบัติที่กำหนดเอง): ตัวแปร CSS ช่วยให้คุณกำหนดสีและสไตล์อื่นๆ ในตำแหน่งส่วนกลาง ทำให้ง่ายต่อการจัดการและอัปเดตธีมของคุณ
• ทดสอบอย่างละเอียด: ทดสอบการใช้งานโหมดมืดของคุณบนอุปกรณ์และเบราว์เซอร์ต่างๆ เพื่อให้มั่นใจถึงความสอดคล้อง
• จัดเตรียม Toggle ที่ชัดเจน: ทำให้สวิตช์ toggle หาได้ง่ายและใช้งานง่าย ใช้ไอคอนที่ชัดเจนและใช้งานง่ายเพื่อระบุฟังก์ชันของมัน
• พิจารณาการตั้งค่าของผู้ใช้: เคารพการตั้งค่าของผู้ใช้และบันทึกโดยใช้ localStorage หรือคุกกี้
• รักษาความสอดคล้อง: ตรวจสอบให้แน่ใจว่าการใช้งานโหมดมืดของคุณสอดคล้องกันทั่วทั้งเว็บไซต์ของคุณ

ตัวอย่าง: ตัวแปร CSS สำหรับการทำธีม

ตัวแปร CSS ทำให้ง่ายต่อการสลับระหว่างธีมโหมดสว่างและโหมดมืด กำหนดตัวแปรใน pseudo-class :root:

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

ตอนนี้ เมื่อคลาส dark-mode ถูกเพิ่มลงใน body ตัวแปร CSS จะถูกอัปเดต และสไตล์จะถูกนำไปใช้อัตโนมัติ

บทสรุป

การใช้งานโหมดมืดสามารถปรับปรุงประสบการณ์ผู้ใช้ของเว็บไซต์ของคุณได้อย่างมาก ปรับปรุงการเข้าถึง และยังช่วยประหยัดแบตเตอรี่อีกด้วย การทำตามเทคนิคและแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในคู่มือนี้ คุณสามารถสร้างประสบการณ์โหมดมืดที่ราบรื่นและสนุกสนานสำหรับผู้ใช้ของคุณทั่วโลก

อย่าลืมจัดลำดับความสำคัญของการเข้าถึงและทดสอบการใช้งานของคุณอย่างละเอียดเพื่อให้แน่ใจว่าเว็บไซต์ของคุณยังคงใช้งานได้สำหรับผู้ใช้ทุกคน โดยไม่คำนึงถึงการตั้งค่าหรือความสามารถทางสายตาของพวกเขา

ด้วยการใช้งานโหมดมืดอย่างรอบคอบ คุณไม่ได้แค่ทำตามเทรนด์ แต่ยังสร้างประสบการณ์เว็บที่เป็นมิตรต่อผู้ใช้และครอบคลุมมากยิ่งขึ้นสำหรับผู้ชมทั่วโลก การอุทิศตนเพื่อประสบการณ์ผู้ใช้นี้สามารถเป็นประโยชน์อย่างมากต่อประสิทธิภาพโดยรวมและความน่าดึงดูดใจของเว็บไซต์ของคุณ