Membuat Toggle Dark/Light Mode Interaktif dengan CSS Variables & JavaScript

Selamat Datang!

Ini adalah contoh website dengan toggle dark/light mode.

```

Penjelasan:

• ``: Mendeklarasikan dokumen sebagai HTML5.
• ``: Menentukan bahasa dokumen sebagai Bahasa Indonesia.
• ``: Berisi meta informasi tentang dokumen, seperti charset, viewport, title, dan link ke stylesheet.
• ``: Menghubungkan dokumen HTML dengan file CSS eksternal bernama `style.css`.
• ``: Berisi konten utama dari website.
• ``: Tombol yang akan digunakan untuk beralih antara dark mode dan light mode. Tombol ini memiliki ID `toggle-button` yang akan kita gunakan dalam JavaScript.
• `
  `: Kontainer untuk konten utama website.
• `

  Selamat Datang!

  ` dan `

  Ini adalah contoh website dengan toggle dark/light mode.

  `: Contoh konten yang akan kita sesuaikan tampilannya.
• ``: Menghubungkan dokumen HTML dengan file JavaScript eksternal bernama `script.js`.

Mendefinisikan CSS Variables (Custom Properties)

CSS Variables, atau Custom Properties, adalah kunci untuk membuat toggle dark/light mode yang dinamis. Dengan menggunakan CSS Variables, kita dapat mendefinisikan nilai-nilai warna dan properti lainnya yang akan berubah saat kita beralih antara dark mode dan light mode.

Berikut adalah contoh penggunaan CSS Variables dalam file `style.css`:

```css :root { --bg-color: #ffffff; / Warna latar belakang default (light mode) / --text-color: #000000; / Warna teks default (light mode) / --accent-color: #007bff; / Warna aksen default (light mode) / }

body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; / Efek transisi yang halus / }

.content { padding: 20px; border: 1px solid var(--accent-color); }

#toggle-button { background-color: var(--accent-color); color: #ffffff; border: none; padding: 10px 20px; cursor: pointer; }

/ Dark Mode / body.dark-mode { --bg-color: #121212; / Warna latar belakang dark mode / --text-color: #ffffff; / Warna teks dark mode / --accent-color: #bb86fc; / Warna aksen dark mode / } ```

Penjelasan:

• `:root`: Selector yang menargetkan elemen root HTML (yaitu, elemen ``). Kita mendefinisikan CSS Variables di sini agar dapat diakses secara global.
• `--bg-color`, `--text-color`, `--accent-color`: Ini adalah contoh CSS Variables. Nama variabel selalu diawali dengan dua tanda hubung (`--`).
• `var(--bg-color)`: Fungsi CSS `var()` digunakan untuk menggunakan nilai dari CSS Variable.
• `transition`: Properti CSS `transition` digunakan untuk membuat efek transisi yang halus saat nilai CSS berubah.
• `body.dark-mode`: Selector yang menargetkan elemen `` yang memiliki class `dark-mode`. Kita akan menambahkan class ini ke elemen `` menggunakan JavaScript saat pengguna beralih ke dark mode.

Dengan mendefinisikan CSS Variables, kita dapat dengan mudah mengubah tampilan website hanya dengan mengubah nilai variabel-variabel tersebut. Ini membuat kode kita lebih terstruktur dan mudah dipelihara.

JavaScript: Mengaktifkan dan Menonaktifkan Dark Mode

Sekarang, kita akan menggunakan JavaScript untuk menambahkan fungsionalitas toggle ke tombol kita. JavaScript akan mendeteksi klik pada tombol, memeriksa apakah dark mode aktif atau tidak, dan kemudian menambahkan atau menghapus class `dark-mode` dari elemen ``.

Berikut adalah contoh kode JavaScript dalam file `script.js`:

```javascript const toggleButton = document.getElementById('toggle-button'); const body = document.body;

toggleButton.addEventListener('click', () => { body.classList.toggle('dark-mode');

// Menyimpan preferensi pengguna ke localStorage if (body.classList.contains('dark-mode')) { localStorage.setItem('theme', 'dark'); } else { localStorage.setItem('theme', 'light'); } });

// Memeriksa preferensi pengguna saat halaman dimuat const theme = localStorage.getItem('theme'); if (theme === 'dark') { body.classList.add('dark-mode'); } ```

Penjelasan:

1. `const toggleButton = document.getElementById('toggle-button');`: Mendapatkan referensi ke elemen tombol dengan ID `toggle-button`.
2. `const body = document.body;`: Mendapatkan referensi ke elemen ``.
3. `toggleButton.addEventListener('click', () => { ... });`: Menambahkan event listener ke tombol yang akan dijalankan setiap kali tombol diklik.
4. `body.classList.toggle('dark-mode');`: Menambahkan atau menghapus class `dark-mode` dari elemen ``. Jika class `dark-mode` belum ada, maka akan ditambahkan. Jika sudah ada, maka akan dihapus.
5. `localStorage.setItem('theme', 'dark');` dan `localStorage.setItem('theme', 'light');`: Menyimpan preferensi pengguna ke `localStorage`. `localStorage` adalah cara untuk menyimpan data di browser secara lokal sehingga data tersebut tetap ada meskipun browser ditutup dan dibuka kembali.
6. `localStorage.getItem('theme');`: Mengambil preferensi pengguna dari `localStorage`.
7. `if (theme === 'dark') { body.classList.add('dark-mode'); }`: Memeriksa apakah preferensi pengguna adalah dark mode. Jika ya, maka class `dark-mode` ditambahkan ke elemen ``.

Dengan kode JavaScript ini, website kita akan secara otomatis mengingat preferensi dark mode pengguna meskipun mereka menutup dan membuka kembali browser.

Peningkatan Lebih Lanjut: Menggunakan Icon yang Dinamis

Kita dapat meningkatkan pengalaman pengguna dengan menggunakan icon yang dinamis pada tombol toggle. Icon ini akan berubah sesuai dengan mode yang aktif.

Pertama, kita perlu menambahkan icon ke tombol kita. Kita dapat menggunakan icon dari library seperti Font Awesome atau Material Icons.

Contoh menggunakan Font Awesome:

```html