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 onclick="myFunction()">Klik Di sini</button> <script> function myFunction() { 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");
}