Cara Membuat Dark Mode Bootstrap Mudah & Keren

Daftar Isi [Tampil]

Artikel ini akan membahas langkah-langkah lengkap untuk membuat fitur dark mode pada website menggunakan framework Bootstrap.

Anda akan belajar cara mengaktifkan mode gelap pada beberapa komponen seperti navbar, card, dan tombol, serta bagaimana menyesuaikan warna dan gaya yang sesuai dengan preferensi tampilan Anda.

Tutorial ini sangat berguna bagi pengembang web yang ingin memberikan pengalaman pengguna yang lebih nyaman dan modern dengan fitur dark mode pada website mereka.

Dengan panduan yang jelas dan mudah diikuti, Anda akan dapat membuat fitur dark mode pada website Anda dengan mudah.

Apa Itu Dark Mode Pada Website?

Dark mode adalah fitur pada website yang mengubah tampilan latar belakang dan elemen-elemen pada halaman website menjadi gelap atau lebih gelap dari tampilan biasanya yang menggunakan latar belakang putih atau terang. Fitur ini memungkinkan pengguna untuk memilih tampilan yang lebih nyaman bagi mata mereka saat mengakses website pada kondisi cahaya yang minim atau gelap.

Manfaat Dari Dark Mode

Dark mode dapat memberikan beberapa manfaat, antara lain:

Mengurangi kelelahan mata: Dengan menggunakan warna gelap, terutama pada malam hari, maka kontras yang terlalu tinggi antara layar dan ruang yang gelap dapat diredakan, sehingga membuat pengalaman pengguna lebih nyaman dan kurang membuat mata cepat lelah.
Hemat baterai: Tampilan gelap pada layar dapat menghemat daya baterai perangkat mobile pada kondisi pencahayaan rendah atau gelap.
Estetika yang menarik: Dark mode menjadi tren desain web dan aplikasi di banyak platform dan terlihat lebih modern, elegan dan memberikan kesan kekinian.
Beberapa website populer telah mengadopsi fitur dark mode untuk memberikan pengalaman pengguna yang lebih baik. Pengguna juga dapat memilih untuk menyesuaikan preferensi tampilan di halaman situs dengan memilih mode gelap atau terang pada sistem atau pada browser yang digunakan.

Cara Membuat Dark Mode Bootstrap Sederhana

Cara Membuat Dark Mode Dengan Framework Bootstrap

Agar Anda lebih cepat memahami source code dark mode website maka analisislah contoh source code berikut:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<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>
* {
transition: background-color 1s;
}

body {
height: 100vh;
background-color: #0060ff14;
}

body.dark-theme {
background-color: #202945;
}

.card.dark-theme {
background-color: #374368;
color: #d4d4d4;
}

nav {
background-color: #00000014;
}

.navbar-light .navbar-nav .nav-link {
color: #000;
}

.navbar-light .navbar-brand {
color: #000;
}

.navbar-light .navbar-toggler {
border-color: #000;
}

.dark-theme .navbar-light .navbar-nav .nav-link {
color: #d4d4d4;
}

.dark-theme .navbar-light .navbar-brand {
color: #d4d4d4;
}

.dark-theme .navbar-light .navbar-toggler {
border-color: #d4d4d4;
}
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>

<button role="button" class="btn ml-auto btn-dark" id="theme_toggle">Light Mode</button>
</div>
</nav>
<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">
<a class="btn btn-block btn-lg btn-dark" href="https://www.panduancode.com/">Baca Tutorial Cara Membuat Dark Mode</a>
</p>
</div>
</div>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<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");
$('#theme_toggle').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");
$('#theme_toggle').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>
</body>
</html>

Silahkan Anda coba untuk membuat file HTML baru di text editor, lalu copy source code dark mode bootstrap contoh diatas dan paste pada file HTML yang telah Anda buat.

Kemudian save dan coba jalankan pada browser Anda dengan cara buka file manager lalu klik open with dan pilih browser yang sering Anda gunakan.

Langkah-langkah Membuat Dark Mode Bootstrap

Ikuti panduan langkah demi langkah untuk membuat dark mode seperti contoh source code diatas dan berikut tutorial nya:

1. Buatlah Kerangka HTML

Buka text editor Anda dan buat file HTML baru dengan nama bebas sesuai keinginan Anda, berikut kerangka HTML nya:

<!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">
<title>Document</title>
</head>
<body>

</body>
</html>

2. Tambahkan CSS Bootstrap

Tambahkan CSS Bootstrap diatas kode titlte pada kerangka HTML tadi, dan berikut CSS external yang perlu ditambahkan:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

3. Tambahkan JS Bootstrap Dan Jquery

Tambahkan JS dari Bootstrap dan JS Jquery pada kerangka HTML tadi tepat diatas kode penutup </body>, dan berikut JS external yang perlu ditambahkan:

4. Buat Kode Navbar Dan Toggle Dark Mode

Buat kode navbar dan toggle nya tepat dibawah kode <body> pada kerangka HTML tadi. Berikut adalah kode navbar dan toggle sederhana untuk dark mode website nya:

<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>

<button role="button" class="btn ml-auto btn-dark" id="theme_toggle">Light Mode</button>
</div>
</nav>

5. Buat Sebuah Card Contoh Untuk Bagian Konten

Buatlah sebuah card sebagai contoh bagian konten website Anda, simpan kode card tersebut tepat dibawah kode navbar tadi. Dan berikut contoh kode card nya:

<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">
<a class="btn btn-block btn-lg btn-dark" href="https://www.panduancode.com/">Baca Tutorial Cara Membuat Dark Mode</a>
</p>
</div>
</div>
</div>
</div>
</div>

6. Tambahkan Style CSS Dark Mode

Agar fitur dark mode nya berfungsi dengan baik maka kita harus membuat style css tambahan nya, dan Simpan kode style CSS Web tersebut tepat berada diatas kode </head>, berikut contoh kode CSS nya:

<style>
* {
transition: background-color 1s;
}

body {
height: 100vh;
background-color: #0060ff14;
}

body.dark-theme {
background-color: #202945;
}

.card.dark-theme {
background-color: #374368;
color: #d4d4d4;
}

nav {
background-color: #00000014;
}

.navbar-light .navbar-nav .nav-link {
color: #000;
}

.navbar-light .navbar-brand {
color: #000;
}

.navbar-light .navbar-toggler {
border-color: #000;
}

.dark-theme .navbar-light .navbar-nav .nav-link {
color: #d4d4d4;
}

.dark-theme .navbar-light .navbar-brand {
color: #d4d4d4;
}

.dark-theme .navbar-light .navbar-toggler {
border-color: #d4d4d4;
}
</style>

Nah jika Anda ingin menambahkan element lain agar menjadi dark mode, Anda bisa menambahkan kode CSS element tersebut kedalam style diatas.

6. Tambahkan Kode Javascript Dark Mode

Tambahkan juga javascript untuk menjalankan fungsi dark mode pada website tersebut, kode javascript ini simpan dibawah kode javascript extenal yang telah kita buat tadi.

Berikut kode javascript dark mode yang diperlukan:

<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");
$('#theme_toggle').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");
$('#theme_toggle').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>

Setelah semua langkah-langkah tersebut Anda ikuti maka hasilnya akan seperti berikut:

Tampilan Light Mode

Tampilan Dark Mode

Penjelasan Javascript Dark Mode Dengan LocalStorage

Kode ini menggunakan library jQuery yang memudahkan dalam manipulasi elemen HTML.

Pada bagian ini:

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

digunakan untuk menjalankan kode JavaScript ketika halaman web telah selesai dimuat.

Selanjutnya pada bagian ini:

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

akan mengeksekusi kode ketika elemen HTML dengan ID "theme_toggle" di klik.

Kemudian, pada bagian ini:

if ($('body').hasClass('dark-theme')) {...}

akan memeriksa apakah elemen "body" memiliki kelas "dark-theme" atau tidak. Jika ya, maka kode dalam if statement tersebut akan dijalankan.

Selanjutnya, pada bagian ini:

$(this).toggleClass('btn-light');
$(this).addClass('btn-dark');
$('h1').html("Light Mode");
$('#theme_toggle').html("Light Mode");
$('body').toggleClass('dark-theme');
$('.card').toggleClass('dark-theme');
localStorage.setItem("mode", "light-theme");

akan mengubah tampilan elemen HTML dengan menambah atau menghapus kelas tertentu seperti "btn-light" atau "dark-theme". Selain itu, nilai teks pada elemen "h1" dan "theme_toggle" akan diubah sesuai dengan tema yang dipilih. Terakhir, menggunakan localStorage untuk menyimpan tema yang telah dipilih.

Demikian juga pada bagian ini:

$(this).toggleClass('btn-light');
$(this).removeClass('btn-dark');
$('h1').html("Dark Mode");
$('#theme_toggle').html("Dark Mode");
$('body').toggleClass('dark-theme');
$('.card').toggleClass('dark-theme');
localStorage.setItem("mode", "dark-theme");

akan mengubah tampilan elemen HTML dengan menambah atau menghapus kelas tertentu seperti "btn-dark" atau "dark-theme". Selain itu, nilai teks pada elemen "h1" dan "theme_toggle" akan diubah sesuai dengan tema yang dipilih. Terakhir, menggunakan localStorage untuk menyimpan tema yang telah dipilih.

Selanjutnya, pada bagian ini:

if (!localStorage.getItem("mode")) {...}

akan memeriksa apakah localStorage telah diatur sebelumnya, jika belum maka akan mengatur default tema yang akan ditampilkan sesuai dengan preferensi pengguna.

Lalu pada bagian ini:

if (localStorage.getItem("mode") == "dark-theme") {...}

akan mengecek tema yang disimpan dalam localStorage, jika tema yang disimpan adalah "dark-theme" maka tampilan elemen HTML akan diubah sesuai dengan tema tersebut. Jika tidak, maka tampilan elemen HTML akan diubah sesuai dengan tema "light-theme".

Terakhir, pada bagian ini:

document.getElementById("theme_toggle").checked = true/false;

akan mengubah status tombol untuk menampilkan tema yang telah dipilih sebelumnya. Jika tema yang dipilih adalah "dark-theme" maka tombol akan dicentang, jika tema yang dipilih adalah "light-theme" maka tombol tidak dicentang.

Kesimpulan

Artikel ini membahas tentang cara membuat fitur dark mode pada website menggunakan framework Bootstrap dengan langkah-langkah yang jelas dan mudah diikuti.

Fitur dark mode dapat memberikan manfaat seperti mengurangi kelelahan mata, menghemat baterai, dan memberikan estetika yang menarik pada website.

Selain itu, artikel juga menjelaskan cara menggunakan Javascript dengan LocalStorage untuk mengaktifkan fitur dark mode pada website dengan menyimpan preferensi pengguna.

Dengan adopsi fitur dark mode, pengembang web dapat memberikan pengalaman pengguna yang lebih baik pada website mereka.

Coba cari lagi apa yang ada inginkan pada kolom berikut:

Donasi

Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.