--> Skip to main content

Cara Membuat Dark Mode dan Light Mode di HTML Menggunakan CSS dan Javascript

Dark mode merupakan sebuah fitur dimana keadaan tampilan menjadi gelap. Belakangan ini fitur dark mode atau night mode menjadi sangat hits. Fitur ini biasa kita jumpai di perangkat mobile dan memiliki manfaat penggunaan hemat baterai. Adapun fungsi lain dari dark mode ini juga dapat difungsikan sebagai media fokus terhadap kontent di website, dan memang si tampilan yang terlihat juga jadi sangat elegan dan enak dipandang.

Maka dari itu disini saya akan berbagi artikel tentang Cara Membuat Dark Mode dan Light Mode di HTML Menggunakan CSS dan Javascript. Penggunaannya juga sangat mudah tidak terlalu banyak source code asal penempatannya baik dan rapih jika Kamu belum mengetahui bagaimana cara menulis source code yang baik maka Saya sarankan untuk membaca artikel tentang bagaimana cara menulis kode yang baik dengan mengklik judul tersebut.

Baca Juga :  Cara Mengatur Ukuran, Warna, dan Jenis Font di HTML

Cara Membuat Dark Mode dan Light Mode di HTML Menggunakan CSS dan Javascript

Cara Membuat Dark Mode dan Light Mode di HTML Menggunakan CSS dan Javascript

1. Tentu saja karena ini menggunakan HTML harap dibuka terlebih dahulu text editor.

2. Buatlah file dengan nama index.html lalu copy dan pastekan code dibawah ini:

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Dark Mode - KeyzeX</title>
</head>
<body>
</body>
</html>

3. Pada bagian <body>, masukan kode berikut:

<button onclick="toggleDarkMode()">Change</button>
<p id="themeInfo">Light!</p>

4. Kemudian buat file baru dan beri nama main.js, atau jika Kamu sudah belajar bagaimana cara menulis kode yang baik bisa dibuat terlebih dahulu folder assets kemudian folder javascript agar lebih rapih lagi. Copy dan pastekan kode dibawah ini ke file main.js tadi

$darkMode = false

if (localStorage.getItem('defaultTheme') == 'dark') {
 toggleDarkMode()
}

function toggleDarkMode(){
 if ($darkMode == false){
  document.body.style.backgroundColor = "rgb(85, 87, 86)"
  document.body.style.color = "White"
  document.getElementById("themeInfo").innerHTML = "Dark!"
  localStorage.setItems('defaultTheme', 'dark');
  $darkMode = true
 } else {
  document.body.style.backgroundColor = "White"
  document.body.style.color = "Black"
  document.getElementById("themeInfo").innerHTML = "Light!"
  localStorage.setItems('defaultTheme');
  $darkMode = false
 }
}
5. Jangan lupa tambahkan kode pemanggilan file agar kode javascript tadi bisa ikut bergabung di html. Atau Kamu dapat mencopy kode dibawah ini kemudian simpan di antara kode <head>...</head>.

<script src="assets/js/main.js"></script> // Untuk Kamu yang menyimpan file main.js di folder assets/js.

<Script src="main.js"></script> // Untuk Kamu yang menyimpan file langsung di dalam satu folder
6. Save dan coba jalankan di browser kalian. Jika berhasil nantinya akan ada opsi button yang berfungsi untuk merubah light/dark mode dengan website yang telah dibuat.

Cara Membuat Dark Mode dan Light Mode di HTML Menggunakan CSS dan Javascript

Baca Juga : Cara Membuat Kutipan Blockquote Menarik Dengan HTML dan CSS di Blog

Demikian tutorial Cara Membuat Dark Mode dan Light Mode di HTML Menggunakan CSS dan Javascript. semoga bermanfaat, jika ada masukan silahkan gunakan kolom komentar dengan bijak.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar