Contoh Sederhana Membuat Dark Mode di Website

Berikut adalah contoh coding JavaScript yang dapat digunakan untuk membuat mode gelap(Dark Mode) pada website:

1. Tambahkan tombol untuk mengaktifkan/menonaktifkan mode gelap:

bash

<button id="dark-mode-btn">Toggle Dark Mode</button>

2. Tambahkan CSS untuk mempercantik tampilan mode gelap:

php

<style>
  body {
    background-color: white;
    color: black;
  }

  #dark-mode-btn {
    background-color: white;
    color: black;
    padding: 10px 20px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
  }

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

  .dark-mode #dark-mode-btn {
    background-color: black;
    color: white;
    border: 1px solid white;
  }
</style>

3. Tambahkan JavaScript untuk mengatur mode gelap:

php

<script>
  const darkModeBtn = document.querySelector('#dark-mode-btn');
  darkModeBtn.addEventListener('click', function() {
    document.body.classList.toggle('dark-mode');
  });
</script>

Sekarang, saat tombol Toggle Dark Mode diklik, mode gelap akan diaktifkan/dinonaktifkan. Anda juga dapat menyesuaikan CSS dan JavaScript ini sesuai kebutuhan.

Share this post