Cara Membuat Fitur Dark Mode Sederhana dengan JavaScript

Fitur Dark Mode kini menjadi standar kenyamanan pengguna pada sebuah website. Dengan memanfaatkan localStorage dan manipulasi classList, kita bisa menyimpan preferensi tema pengguna sehingga saat halaman di-refresh, tema gelap tidak akan kembali ke terang secara otomatis. Ini adalah teknik dasar yang sangat penting untuk User Experience (UX).

const tombolTogle = document.querySelector('.btn-theme');

tombolTogle.addEventListener('click', () => {
    document.body.classList.toggle('dark-theme');
    
    // Simpan pilihan di browser
    const isDark = document.body.classList.contains('dark-theme');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

// Cek saat halaman dimuat
if (localStorage.getItem('theme') === 'dark') {
    document.body.classList.add('dark-theme');
}