Wednesday, June 24, 2026

Menghidupkan Website Anda: Tutorial Membuat Fitur 'Dark Mode' dengan Vanilla JavaScript

Jika HTML adalah kerangka dan CSS adalah kosmetik penyolek wajah, maka JavaScript (JS) adalah otak dan otot yang membuat sebuah website bisa bergerak dan berinteraksi dengan penggunanya. Tanpa JavaScript, halaman web Anda hanyalah sebuah brosur digital yang statis.

Salah satu fitur paling populer dan wajib ada di website modern saat ini adalah tombol pengganti tema (Dark Mode Toggle). Kabar baiknya, Anda tidak membutuhkan library berat untuk membuatnya. Mari kita ciptakan keajaiban interaktif ini hanya dengan beberapa baris kode Vanilla JavaScript!

1. Siapkan Tombol (HTML) dan Tema Gelap (CSS)

Sebelum JavaScript bisa bekerja, kita perlu menyediakan elemen yang akan ditekan oleh pengguna, serta gaya visual yang akan diaktifkan. Cukup tambahkan sebuah tombol di HTML dan kelas CSS khusus untuk mode gelap.

HTML: Buat tombol sederhana, misalnya <button id="toggle-btn">Ubah Tema</button>. Perhatikan penggunaan id, ini akan menjadi "target" bagi JavaScript kita nanti.
CSS: Buat sebuah class baru, misalnya .dark-theme { background-color: #121212; color: #ffffff; }. Kelas inilah yang akan dipasang dan dilepas (toggle) secara dinamis oleh JavaScript.

2. Memberikan Nyawa dengan JavaScript

Sekarang saatnya menggunakan sihir JavaScript. Kita akan memerintahkan browser untuk "mendengarkan" kapan tombol tersebut diklik, dan kemudian menambahkan atau menghapus kelas CSS pada elemen <body>.

Inilah logika kodenya yang bisa Anda letakkan di dalam tag <script>:

const
tombol = document.getElementById('toggle-btn');

tombol.addEventListener('click', function() {
document.body.classList.toggle('dark-theme');

    });
  

Mengapa Cara Ini Sangat Efektif?

Kode di atas mendemonstrasikan kekuatan manipulasi DOM (Document Object Model). Metode classList.toggle() sangat cerdas; ia akan secara otomatis mengecek apakah halaman web sudah menggunakan mode gelap atau belum. Jika belum, ia akan menambahkannya. Jika sudah, ia akan melepaskannya. Simpel, ringan, dan tidak membebani pemuatan halaman (loading speed) sama sekali!

JavaScript membuka gerbang kreativitas tanpa batas bagi seorang pengembang web. Setelah berhasil membuat tombol ini, Anda bisa mencoba bereksperimen dengan membuat animasi klik, kalkulator sederhana, atau popup notifikasi. Selamat mengoding!