Skodev
Belajar coding dalam bahasa Indonesia
DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Website yang interaktif dengan pengalaman visual yang baik akan memberikan nilai tambah bagi user atau pengguna. Salah satu fitur populer saat ini yakni Dark Mode yang memberikan kenyaman visual bagi user, terutama saat malam hari. Pada artikel kali ini, kita akan belajar cara membuat dark mode pada website menggunakan HTML, CSS dan JavaScript. Simak langkah-langkah berikut ini, terutama jika kamu pemula!
Langkah awal yang perlu dilakukan dengan membuat struktur dasar HTML. Di sini, kita akan membuat sebuah tombol untuk mengubah mode dari terang (light mode) ke gelap (dark mode) atau sebaliknya di file HTML:
Berikut adalah struktur HTML yang perlu dibuat:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Website</title>
</head>
<body>
<h1>Skodev | Sekolah Koding</h1>
<button onclick="setDarkMode()">Change Mode</button>
</body>
</html>Penjelasan Jika kamu ingin membuat file JS dan CSS terpisah dari file HTML, Kamu bisa menambahkannya seperti berikut ini:
Sekarang, kita akan menambahkan JavaScript untuk mengatur atau mengontol logika perubahan mode dari terang (light) ke gelap (dark). Kali ini kita akan menuliskan kelas dark-mode pada tag untuk mengubah nilai saat tombol di tekan.
Kodenya seperti berikut:
let isDarkMode = false; // variabel untuk melacak status mode pada website
function setDarkMode() {
if (isDarkMode) {
// Matikan dark mode
document.body.classList.remove('dark-mode');
isDarkMode = false;
} else {
// Mengaktifkan dark mode
document.body.classList.add('dark-mode');
isDarkMode = true;
}
}Penjelasan
Variabel let isDarkMode = false; digunakan untuk menyimpan mode saat website pertama kali dibuka, dengan nilai false sebagai default (mode terang). Kita menggunakan function setDarkMode untuk memeriksa nilai isDarkMode. Jadi, saat mode dark aktif, maka nilainya akan true, dan jika mode dark dimatikan, nilainya akan false.
Saatnya mengatur tampilan untuk halaman website agar kode JavaScriptnya berjalan dengan baik.
Berikut adalah kode CSS yang diperlukan:
/*gaya default website (light mode)*/
body {
background: white;
color: black;
transition: background 0.3s, color 0.3s;
}
/*Gaya untuk dark mode*/
.dark-mode {
background: black;
color: white;
}Penjelasan Pada tampilan default website (light mode), kita gunakan background putih dan teks hitam. Sedangkan pada kelas dark-mode, kita menggunakan background hitam dan teks putih. Properti transition ditambahkan agar saat mengubah mode dari light ke dark atau sebaliknya terjadi efek transisi yang smooth atau halus.
localStorageLangkah ini memungkinkan agar saat user mengunjungi website kembali, mode yang sudah dipilih (dark mode atau light mode) akan tetap tersimpan di browser, sehingga user tidak perlu mengatur ulang tampilannya. Caranya dengan menambahkan localStorage untuk menyimpan status mode gelap yang dipilih user pada file JavaScript.
Dalam hal ini, kita modifikasi sedikit file JavaScript atau tag
// Mengecek status mode yang disimpan di localStorage
let isDarkMode = localStorage.getItem('darkMode') === 'true';
// Untuk menerapkan mode yang tersimpan saat halaman pertama kali dimuat
if (isDarkMode) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
// Fungsi mengubah mode dan menyimpan pilihan di localStorage
function setDarkMode() {
if (isDarkMode) {
document.body.classList.remove('dark-mode');
isDarkMode = false;
localStorage.setItem('darkMode', 'false');
} else {
document.body.classList.add('dark-mode');
isDarkMode = true;
localStorage.setItem('darkMode', 'true');
}
}Penjelasan
Variabel let isDarkMode = localStorage.getItem('darkMode') === 'true'; digunakan untuk memeriksa status yang disimpan pada localStorage. Jika yang disimpan bernilai true, maka halaman akan menerapkan mode gelap atau dark-mode.
Fungsi dari setDarkMode() digunakan untuk mengubah mode dan menyimpan status terbadu di localStorage. Jika mode gelap (dark mode) aktif, maka status disimpan sebagai true; jika tidak, disimpan sebagai false untuk mode terang.
Tutorial di atas membantu kamu dalam membuat website yang lebih interaktif lagi. Penggunaan dark mode difungsikan akan menambahkan pengalaman penggunan saat mengunjungi website kamu lebih baik lagi, apalagi saat mereka mengunjungi di malam hari. Selain itu, memungkinkan mereka dalam menyesuaikan antarmuka sesuai preferensinya. Tentunya fitur dark mode di atas dapat dikembangkan kembali. So, gimana? Mudah bukan dengan menerapkan pengetahuan dasar HTML, CSS dan JavaScript kamu dalam mengimplementasikan dark mode pada website?
Jika kamu merasa kesulitan, kamu bisa mengikuti tutorial video di bawah ini:
Selamat mencoba sobat Skodev!
I am a Bachelor of Indonesian Literature at Diponegoro University who has experience as a Content Creator, Copy Writer and Copy Writer