Cara Membuat Toggle Dark Mode

Lagi bingung gimana cara bikin toggle dark mode? Nah, kali ini aku kasih tutorial cara bikin toggle-nya dengan menggunakan Jquery, karena penggunaannya cukup mudah. Nantinya jquery akan mengganti class html ke dark mode atau sebaliknya. Di bawah ini adalah output dari toggle yang akan kita buat :

1. Kita buat komponen-komponen-nya dahulu. Sumber icon yang akan kita gunakan berasal dari fontawsome.com. Gunakan embed code ini untuk menggunakan icon-nya dan jquery :

<script src="https://kit.fontawesome.com/d6e78495c8.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Setelah itu kita buat struktur toggle-nya dengan code :

<div class="toggle"> <!--Untuk latar belakang-->
    <div class="circle"></div> <!--Icon lingkaran-->
    <div class="toggle-moon"><i class="fas fa-moon"></i></div> <!--Icon bulan-->
    <div class="toggle-sun"><i class="fas fa-sun"></i></div> <!--Icon matahari-->
</div>

3. Langkah ketiga yaitu memberikan style pada toggle agar terlihat menarik dan menambahkan 1 class bernama "dark-mode" untuk style dark mode yang akan digunakan :

html {  
    transition: 0.4s;       /*Agar transisi pergantian dark mode smooth*/
}

.dark-mode {                /*Style dark mode*/
    background: #2a2a39;
    color: white;
}

.toggle {
    width: 45px;
    height: 25px;
    border-radius: 30px;
    font-size: 16px;
    display: flex;
    text-align: center;
    align-items: center;
    cursor: pointer;
    background: black;
    color: white;
}

.circle {
    width: 20px;
    height: 20px;
    transform: translateX(2px);
    border-radius: 30px;
    transition: 0.4s;
    position: absolute;
    background: white;
}

.dark-mode .circle {
    transform: translateX(23px)
}

.toggle-moon, .toggle-sun {
    width: 50%;
}

Untuk mengganti element lainnya saat class "dark-mode" aktif gunakan contoh code ini :

.dark-mode (selector) {
	property: value;
}

/*Contohnya*/

.dark-mode .circle {
    transform: translateX(23px)
}

4. Karena style dan struktur element-nya sudah kita buat, sekarang saatnya menggunakan jquery untuk mengganti class html ke dark mode atau sebaliknya. Selain itu kita akan menggunakan local storage. Agar saat kita meninggalkan situs dalam keadaan dark mode, ketika kita kembali tetap dalam keadaan dark mode. Selama cookies tidak di block/hapus.

var html = $("html")

$(function darkmode() {
    $(".toggle").click(function() {
        if (html.hasClass("dark-mode")) {
            html.removeClass("dark-mode");
            // mengatur local storage dengan value "false" :
            localStorage.setItem("dark-mode", false);
        }

        else {
            html.addClass("dark-mode");
            // mengatur local storage dengan value "true" :
            localSotrage.setItem("dark-mode", true);
        }
    })
})
        
// Fungsi jika local storage memiliki key "dark-mode" dengan value "true" :
if (localStorage.getItem("dark-mode") == "true") {
	$(" html").addClass("dark-mode");
}

Selesai! Kamu telah membuat toggle dark mode dengan jquery🎉. Selamat mencoba! Temukan  hal menarik lainnya di sirilius.com