ลองเปลี่ยน Theme ให้เว็บไซต์แบบ Dark/Light Mode กันดีกว่า

ลองเปลี่ยน Theme ให้เว็บไซต์แบบ Dark/Light Mode กันดีกว่า Cover Image

สวัสดีครับ พอดีวันนี้ผมนึกอยากจะเปลี่ยน Style ของบล็อคซะหน่อย แต่ก็ยังชอบแบบเดิมๆอยู่ แต่ใจนึงก็อยากลองอะไรใหม่ๆ บ้าง ก็เลยลองใส่ Dark Mode และ Light Mode เอาไว้ให้สลับ Mode ได้ เผื่อบางคนชอบ Clean ขาวๆ บางคนชอบ Dark ทึบๆ

หลังจากใส่ Feature นี้ก็เลยเอามาแชร์ดีกว่าว่าวิธีการทำ Toggle Dark/Light Mode ให้กับเว็บไซต์ด้วย CSS + JavaScript ทำยังไงบ้าง?

1. Getting Started

เริ่มต้น เราต้องมาดูก่อนว่า Content ไหนที่เราจะให้มันสามารถ Switch View ได้ ตัวอย่างผมมี 2 ที่ที่จะเปลี่ยน เช่น

<body>

</body>

และ

<div class="post">

</div>

ซึ่งส่วน CSS ก็จะใช้ selector แบบนี้

body, .post {
  background: #fff;
  color: #222;
}

2. ใส่คลาส is-dark-mode

ต่อมา เตรียมแผนไว้เพื่อใส่คลาส is-dark-mode ก็เลยกำหนด css แบบนี้ (จริงๆมี element อื่นๆ อีก เช่น p, a แต่ยกตัวอย่าง เอาแค่คอนเซปนะครับ)

body, .post {
  background: #fff;
  color: #222;
}

body.is-dark-mode,
.post.is-dark-mode {
  background: #222;
  color: #fff;
}

3. Toggle class

เพิ่มปุ่มสำหรับ Toggle Dark/Light Mode เมื่อกดปุ่ม จะให้ไปเรียก function toggleViewMode ที่จะ implement ผ่าน event click ใน jQuery

<button id="toggle-view">Switch Mode</button>

จากนั้นไฟล์ JavaScript (jQuery) ทำการเพิ่ม function สำหรับ switch view แบบนี้

$(function() {
  function toggleViewMode() {
    var viewMode = localStorage.getItem('viewMode');
    $('body .post').toggleClass('is-dark-mode');

    localStorage.setItem('viewMode', viewMode && viewMode === 'dark' ? 'light' : 'dark');
  }
})

จะเห็นว่า เมื่อ toggle เสร็จ (ผู้ใช้กดปุ่ม Switch Mode) ก็ทำการ save ค่าลง localStorage เอาไว้

4. ทำการ Set theme จาก localStorage

ต่อมา ไฟล์ JavaScript ของเรา ทำการเพิ่ม function สำหรับ initialViewMode เวลา User เข้าหน้าเว็บมาใหม่ ถ้าเคยเลือก toggle ไว้แล้ว ก็จะโหลดจาก localStorage แต่ถ้าไม่เคยเลือก หรือเป็น light ก็ไม่ต้องทำอะไร แบบนี้

$(function() {
  initialViewMode()

  function initialViewMode() {
    var viewMode = localStorage.getItem('viewMode');
    if (viewMode && viewMode === 'dark') {
      $('body .post').addClass('is-dark-mode');
    }
  }
})

สุดท้าย ใส่ event on click ของ #toggle-view ทำผ่าน jQuery

$('#toggle-view').on('click', function() {
  toggleViewMode();
});

เป็นอันเรียบร้อย สุดท้ายไฟล์ main.js เราก็จะได้หน้าตาประมาณนี้

$(function() {
  initialViewMode()

  function initialViewMode() {
    var viewMode = localStorage.getItem('viewMode');
    if (viewMode && viewMode === 'dark') {
      $('body .post').addClass('is-dark-mode');
    }
  }

  function toggleViewMode() {
    var viewMode = localStorage.getItem('viewMode');
    $('body .post').toggleClass('is-dark-mode');

    localStorage.setItem('viewMode', viewMode && viewMode === 'dark' ? 'light' : 'dark');
  }

  $('#toggle-view').on('click', function() {
    toggleViewMode();
  });
})

สุดท้ายหวังว่าผู้อ่านจะชื่นชอบการ Switch Mode นะครับ

Happy Coding ❤️

Chai

Chai Phonbopit : Developer แห่งหนึ่ง • ผู้ชายธรรมดาๆ ที่ชื่นชอบ Node.js, JavaScript และ Open Source มีงานอดิเรกเป็น Acoustic Guitar และ Football

บทความล่าสุด