-->
Home
code
css

Membuat Dark Mode Dengan Toggle Switch Button Menggunakan HTML, CSS DAN JAVASCRIPT

toggle switch button dark mode
Dark mode toggle switch button

Cara membuat tampilan website menjadi dark dan light mode dengan toggle switch button -  Pada tulisan ini saya membuat tombol switch untuk mengaktifkan dark mode dan light mode, dalam code ini saya menggunakan html, css dan javascript.  Pastinya sudah banyak sekali website yang menggunakan fitur ini, ya fitur dark mode, bahkan aplikasi-aplikasi besar seperti twitter, instagram dan sebagainya. Oke langsung saja masuk ke inti topik.

Membuat Halaman Index

Diahalam index ini saya membuat beberapa tag elemen dan didalam tag elemen tersebut terdapat juga beberapa atributnya.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Dark Mode | Switch Button</title>
</head>
<body>
    <div class="bg" id="dark"></div>
    <div class="switch">
        <input type="checkbox" id="checkbox" class="switch-dark">
        <label for="checkbox"></label>
    </div>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>
Sebelumnya saya telah membuat file style.css dan script.js yang sudah saya panggil menggunakan perintah <link rel="stylesheet" href="style.css"> dan <script src="script.js"></script>

Membuat Style CSS

html,body{
    margin: 0;
    padding: 0;
}
.bg{
    background-color: rgb(233, 233, 233);
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all .30s ease-in;
}
.bg.active{
    background-color: rgb(59, 59, 59);
}

.switch{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.switch label{
    background-color: black;
    width: 55px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50px;
    cursor: pointer;
    transition: all .30s ease-in;
}
.switch label::after{
    content: "";
    background-color: white;
    width: 25px;
    height: 25px;
    position: absolute;
    border-radius: 50px;
    top: 2px;
    left: 2px;
    transition: all .30s ease-in;
}

.switch .switch-dark:checked + label{
    background-color: rgb(190, 184, 184);
}
.switch .switch-dark:checked + label::after{
    left: 27px;
    background-color: rgb(46, 46, 46);
}

Membuat JavaScript

$('#checkbox').on('click', function () {
    var dark = document.getElementById('dark');
    dark.classList.toggle('active');
})
Pada file javascript, code diatas berarti ketika elemen yang memiliki id checkbox di klik akan menjalankan perintah didalamnya, di dalam fungsi tersebut saya membuat variabel yang namanya dark yang berisikan elemen yang memiliki id dark.

Post a Comment