BERITA PROGRAMMING Membuat Website Dark Mode Sederhana Menggunakan Boostrap dan jQuery

Membuat Website Dark Mode Sederhana Menggunakan Boostrap dan jQuery

Oleh Kholifatul Ardliyan | Selasa, 10 Agustus 2021

Membuat Website Dark Mode Sederhana Menggunakan Boostrap dan jQuery

Disini mari kita belajar bersama cara membuat website sederhana dimana ada dua tema didalamnya yaitu tema terang dan tema gelap menggunakan Boostrap sebagai tampilannya dan jQuery sebagai logikanya.

Ciptakan lingkungan belajar yang lebih MENYENANGKAN dengan GAME-BASED LEARNING!

Aktivitas di kantor membosankan?
Karyawan engangement kurang?
GAMIFIKASI-IN aja!

Daftar Isi Artikel

Sebelum membahas cara membuatnya, mari kita bahas sedikit apa itu dark mode.

Apa itu Dark Mode?

Dark Mode biasa kita artikan dengan mode hitam, mode gelap, atau mode malam adalah skema warna yang menggunakan teks berwarna terang, ikon, dan elemen antarmuka pengguna grafis pada latar belakang gelap. 

Manfaat dari Dark Mode

  • Menciptakan kontras yang lebih baik pada layar
  • Mengurangi kelelahan mata
  • Mengurangi cahaya biru pada layar
  • Tulisan lebih mudah dibaca disaat mode gelap
  • Menghemat baterai hp atau laptop
  • Membuat tampilan lebih keren atau kekinian

Pembuatan Tampilan Dark Mode

Langkah 1

Mari kita siapkan kebutuhan untuk membuat website dark mode sederhana dengan menambah atau memanggil bootstrap dan jquery di file html kita buat seperti code HTML dibawah:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- CSS Bootstrap 4 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <title>Belajar Dark Mode</title>
    <style></style>
  </head>
  <body>

    <!-- JQuery-->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <!-- JS Bootstrap 4 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <script></script>
  </body>
</html>

Setelah itu mari kita buat konten sederhana di dalam <body></body>

<div class="container d-flex h-100 justify-content-center">
    <div class="row align-self-center w-100">
        <div class="col col-lg-7 mx-auto">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                   <h1 class="display-4 font-weight-bold">Light Mode</h1>
                    <p class="lead">Belajar Membuat Website Dark Mode Sederhana</p>
                    <p class="lead">
                        <button role="button" class="btn btn-block btn-lg btn-dark" id="theme_toggle">Toggle</button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Kemudian mari kita tambah styling untuk dark modenya di dalam tag <style></style>

<style>
    * {
        transition: background-color 1s;
    }
    body {
        height: 100vh;
        background-color: #d4d4d4;
    }
    body.dark-theme {
        background-color: #202945;
    }
    .card.dark-theme {
        background-color: #374368;
        color: #d4d4d4;
    }
</style>

Maka hasil untuk saat ini akan tampak seperti dibawah:

Langkah 2

Mari kita lanjutkan untuk bagian toggle. Untuk merubah dari light mode ke dark mode menggunakan jQuery, pertama buat tag <script></script> sebelum </body> lalu buat kode seperti dibawah:

<script>
    $(document).ready(function () {
        $('#theme_toggle').on('click', function () {
            if ($('body').hasClass('dark-theme')) {
                $(this).toggleClass('btn-light');
                $(this).addClass('btn-dark');
                $('h1').html("Light Mode");
                $('body').toggleClass('dark-theme');
                $('.card').toggleClass('dark-theme');
                localStorage.setItem("mode", "light-theme");
            } else {
                $(this).toggleClass('btn-light');
                $(this).removeClass('btn-dark');
                $('h1').html("Dark Mode");
                $('body').toggleClass('dark-theme');
                $('.card').toggleClass('dark-theme');
                localStorage.setItem("mode", "dark-theme");
            }
        })
        //check for localStorage, add as browser preference if missing
        if (!localStorage.getItem("mode")) {
            if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
                localStorage.setItem("mode", "dark-theme");
            } else {
                localStorage.setItem("mode", "light-theme");
            }
        }
        //set interface to match localStorage
        if (localStorage.getItem("mode") == "dark-theme") {
            $('#theme_toggle').removeClass('btn-dark');
            $('#theme_toggle').addClass('btn-light');
            $('body').addClass('dark-theme');
            $('.card').addClass('dark-theme');
            $('h1').html("Dark Mode");
            document.getElementById("theme_toggle").checked = true;
        } else {
            $('#theme_toggle').addClass('btn-dark');
            $('#theme_toggle').removeClass('btn-light');
            $('body').removeClass('dark-theme');
            $('.card').removeClass('dark-theme');
            $('h1').html("Light Mode");
            document.getElementById("theme_toggle").checked = false;
        };
    });
</script>

Dari kumpulan kode diatas akan saya jelaskan satu persatu. Untuk kode pertama yang kita buat yaitu:

$(document).ready(function () { ... });

Kode diatas merupakan fungsi suatu halaman tidak dapat dimanipulasi dengan aman sampai dokumen "siap" dijalankan, jQuery mendeteksi kondisi kesiapan ini untuk pengguna. Kode yang disertakan di dalam hanya akan berjalan setelah halaman Document Object Model (DOM) siap untuk dijalankan kode JavaScript.

$('#theme_toggle').on('click', function () { ... });

Kode diatas merupakan fungsi bila id bernama theme_toggle ditekan maka akan menjalankan fungsi yang ada didalamnya.

if ($('body').hasClass('dark-theme')) {
    $(this).toggleClass('btn-light');
    $(this).addClass('btn-dark');
    $('h1').html("Light Mode");
    $('body').toggleClass('dark-theme');
    $('.card').toggleClass('dark-theme');
    localStorage.setItem("mode", "light-theme");
} else {
    $(this).toggleClass('btn-light');
    $(this).removeClass('btn-dark');
    $('h1').html("Dark Mode");
    $('body').toggleClass('dark-theme');
    $('.card').toggleClass('dark-theme');
    localStorage.setItem("mode", "dark-theme");
}

Kode diatas merupakan logika percabangan yaitu if else, jika tag <body> terdapat class bernama dark-theme maka akan menjalan kode dibawahnya bila tidak ada class dark-theme di tag <body> maka akan menjalankan kode yang ada di dalam else. Berikut sedikit penjelasan beberapa perintah yang ada pada kode di atas:

  • toggleClass = untuk memunculkan nama class css saat ditekan, bila ditekan kembali akan menghilangkan nama class css
  • addClass = menambahkan nama class css
  • removeClass = menghapus nama class css
  • html = untuk merubah konten di dalam tag html
  • localStorage.setItem = untuk menyimpan suatu nilai di localStorage
//check for localStorage, add as browser preference if missing
if (!localStorage.getItem("mode")) {
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        localStorage.setItem("mode", "dark-theme");
    } else {
        localStorage.setItem("mode", "light-theme");
    }
}

Kode diatas untuk memeriksa Penyimpanan lokal, akan ditambahkan sebagai preferensi browser jika tidak ada.

//set interface to match localStorage
if (localStorage.getItem("mode") == "dark-theme") {
    $('#theme_toggle').removeClass('btn-dark');
    $('#theme_toggle').addClass('btn-light');
    $('body').addClass('dark-theme');
    $('.card').addClass('dark-theme');
    $('h1').html("Dark Mode");
    document.getElementById("theme_toggle").checked = true;
} else {
    $('#theme_toggle').addClass('btn-dark');
    $('#theme_toggle').removeClass('btn-light');
    $('body').removeClass('dark-theme');
    $('.card').removeClass('dark-theme');
    $('h1').html("Light Mode");
    document.getElementById("theme_toggle").checked = false;
}

Kode diatas untuk mengatur tampilan agar dapat disimpan sesuai dengan yang diinginkan, apabila berpindah halaman atau disegarkan kembali halamannya maka akan tampil tema terakhir yang dipilih.

Hasil akhir tampilan dari keseluruhan kode akan tampak seperti dibawah:

Sekian dan terima kasih telah membaca artikel ini, semoga bermanfaat.

Demo Website

Berikut Demo dari keseluruhan kode diatas, bisa dicek secara langsung dibawah:
Belajar Membuat Website Dark Mode (codepen.io)

Baca Juga : Mau Bisnis Laku? Analisis SWOT Dulu, Baru Deh Buka Gerai!

Referensi


Kholifatul Ardliyan

Kholifatul Ardliyan

Selasa, 10 Agustus 2021

ARTIKEL TERKAIT

Magang lebih mudah dan bisa dilakukan dari mana saja dengan Program Magang Online Gamelab. Magang Bersertifikat, plus Pelatihan!

DAFTAR MAGANG

ARTIKEL POPULER

KATEGORI