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/[email protected]/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/[email protected]/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 cssaddClass= menambahkan nama class cssremoveClass= menghapus nama class csshtml= untuk merubah konten di dalam tag htmllocalStorage.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 : Profesi Content Creator Sedang Naik Daun Nih, Berikut Cara Menguasainya