Menyediakan dark-mode pada website

Beberapa kali mungkin kamu pernah melihat website yang menyediakan 2 mode: 1. mode terang (light) 2. mode gelap (dark) saya mencoba mengimplementasikannya pada website pribadi saya di hilman.space

Kamu bisa klik tombol di pojok kanan atas untuk mengujinya. Logikanya cukup simple, kalau user menginginkan "darkmode" maka tampilkan tombol kebalikanya (seperti saklar on-off) dan ubah cssnya: background menjadi gelap, tulisan menjadi terang.

Agar tidak melakukan stylingnya full di javascript, kita berikan satu kelas nama extra untuk "body"

body.darkmode {
    background: rgb(57, 57, 57);
    color: rgb(227, 227, 227);
}

Jadi idenya, kelas "darkmode" akan ditoggle via javascript seperti ini:

<div id="theme">
      <div onclick="setDarkMode(true)" id="darkBtn" class="">  <span>Dark</span></div>
    <div onclick="setDarkMode(false)" id="lightBtn" class="is-hidden"> <span>Light</span> </div>
</div>

<script>
 function setDarkMode(isDark) {
        var darkBtn = document.getElementById('darkBtn')
        var lightBtn = document.getElementById('lightBtn')

        if(isDark) {
            lightBtn.style.display = "block"
            darkBtn.style.display = "none"
        } else {
            lightBtn.style.display = "none"
            darkBtn.style.display = "block"
        }

        document.body.classList.toggle("darkmode");
    }
</script>

Dan untuk memudahkan user, kita akan menyimpan pilihannya di LocalStorage, agar setiap berkunjung kembali, sudah automatis dengan tema yang dimau:

//check localstorage
if(localStorage.getItem('preferredTheme') == 'dark') {
    setDarkMode(true)
}

function setDarkMode(isDark) {
    var darkBtn = document.getElementById('darkBtn')
    var lightBtn = document.getElementById('lightBtn')

    if(isDark) {
        lightBtn.style.display = "block"
        darkBtn.style.display = "none"
    //tambahan localstorage
        localStorage.setItem('preferredTheme', 'dark');
    } else {
        lightBtn.style.display = "none"
        darkBtn.style.display = "block"
     //tambahan localstorage
        localStorage.removeItem('preferredTheme');
    }

    document.body.classList.toggle("darkmode");
}