Cara - Beralih Mode Gelap
Beralih antara mode gelap dan terang dengan CSS dan JavaScript.
Beralih Kelas
Langkah 1) Tambahkan HTML:
Gunakan elemen apa pun yang seharusnya menyimpan konten yang ingin Anda ubah desainnya. Dalam contoh kami, kami akan menggunakan <body>
demi kesederhanaan:
Contoh
<body>
Langkah 2) Tambahkan CSS:
Gaya <body>
elemen dan buat .dark-mode
kelas untuk beralih:
Contoh
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
Langkah 3) Tambahkan JavaScript:
Dapatkan <body>
elemen dan beralih di antara .dark-mode
kelas:
Contoh
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
Tip: Lihat juga Cara Menambahkan Kelas .
Tip: Pelajari lebih lanjut tentang properti classList di Referensi JavaScript kami.