How To

Cara Membuat Toggle Dark Mode

Di bawah ini kita akan mempelajari cara membuat toggle yang dapat membuat mode gelap dan terang dengan CSS dan JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h2>Toggle Dark/Light Mode</h2>
<p> Klik tombol di bawah untuk beralih dari mode gelap ke terang untuk halaman ini atau sebaliknya. </p>
  
<button >var element = document.body;
   element.classList.toggle("dark-mode");
}
</script>

</body>
</html>

Toggle Class

Langkah 1) Tambahkan HTML:
Gunakan elemen apa pun yang harus menyimpan konten yang ingin dialihkan desainnya. Dalam contoh ini, kita akan menggunakan elemen <body> yang sederhana:
Contoh

<body>

Langkah 2) Tambahkan CSS:
Beri gaya elemen <body> dan buat kelas .dark-mode untuk mengalihkan:
Contoh

body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
}

Langkah 3) Tambahkan JavaScript:
Dapatkan elemen <body> dan beralih ke kelas .dark-mode:
Contoh

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

Hanifah Nurbaeti

Share
Tags: CSSHow To