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");
}

avatar hilmanski

Ditanyakan oleh @hilmanski

2204 Kontribusi 1802 Poin

Login untuk menanggapi


Jawaban

Makasih !!! ternyata ada cara yang lebih simple. selama ini saya naro nya di setting user, jadi kalo user set dark datanya disimpan di database nanti di cek dulu login. logic nya saya bikin 2 css 1 dark 1light, makasih ilmunya !!!
avatar pemudakoding

Dijawab oleh @pemudakoding

340 Kontribusi 112 Poin

Login untuk menanggapi


Membantu sekali bang, Terima kasih!!
avatar momoji

Dijawab oleh @momoji

108 Kontribusi 43 Poin

Login untuk menanggapi


Login untuk gabung berdiskusi