Cara Menambahkan Dark Mode pada website

Cara Menambahkan Dark Mode pada website

Hay semua, tutorial kita kali ini adalah Cara Menambahkan Dark Mode pada website. Pada beberapa website sudah menerapkan dark mode ini, dimana agar pengunjung situs mereka dapat menganti dark mode sendiri dengan menekan button yang telah disediaka.


.

Dark Mode sangat berguna agar supaya ketika kita membaca sebuah artikel pada situs website, dengan keadaan yang sedang gelap kita dapat mengaktifkan dark mode tersebut agar mata kita tidak sakit karena cahaya website yang berwarna putih.

Langsung saja mari kita ke tutorialnya.

 Cara Menambahkan Dark Mode pada website

1. Buka template website kalian
2. Cari tag <head> kemudian letakan kode dibawah ini tepat diatasnya.
<style>
.dark-mode {
  background-color: black;
  color: white;
}
</style>
3. Kemudian cari lagi tag </body> lalu letakan kode dibawah ini tepat diatasnya.
<script>
function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}
</script>
4. Silahkan taruh kode button dibawah ini sesuai keinginan kalian. Biasanya kita taruh di header saja.
<button onclick="myFunction()">Toggle dark mode</button>
5. Selesai.

Demikian tutorial kali ini tentang Cara Menambahkan Dark Mode pada website, semoga bermanfaat ya.