Auto Dark Mode Html

MUAZHAN

6 min read

·

Jun 28, 2024

19

Share

Auto Dark Mode di HTML

Dark mode adalah fitur yang memungkinkan pengguna untuk mengubah tampilan website ke warna yang lebih gelap. Fitur ini semakin populer karena dapat mengurangi ketegangan mata, terutama saat menggunakan website di malam hari.

Berikut adalah beberapa metode untuk membuat auto dark mode pada website HTML:

1. Menggunakan Media Query

Metode ini memanfaatkan media query CSS untuk mendeteksi sistem operasi pengguna dan secara otomatis mengaktifkan dark mode jika sistem operasi pengguna telah mengaktifkan dark mode.

HTML:

    
    
    
    


    
Selamat datang!

CSS (style.css):

/* Default Style */
body {
    background-color: #fff;
    color: #000;
}

/* Dark Mode Style */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #fff;
    }
}

Penjelasan:

• Kode CSS ini mendefinisikan dua style: satu untuk tampilan default dan satu lagi untuk tampilan dark mode.
• @media (prefers-color-scheme: dark) adalah media query yang mendeteksi apakah sistem operasi pengguna telah mengaktifkan dark mode.
• Jika sistem operasi pengguna telah mengaktifkan dark mode, style dalam media query tersebut akan diterapkan.

2. Menggunakan JavaScript

Metode ini menggunakan JavaScript untuk mendeteksi preferensi dark mode pengguna dan secara otomatis menerapkan style yang sesuai.

HTML:

    
    
    
    


    
Selamat datang!
    

CSS (style.css):

/* Default Style */
body {
    background-color: #fff;
    color: #000;
}

/* Dark Mode Style */
.dark-mode {
    background-color: #000;
    color: #fff;
}

JavaScript (script.js):

const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

if (prefersDarkMode) {
    document.body.classList.add('dark-mode');
}

Penjelasan:

• Kode JavaScript ini menggunakan window.matchMedia untuk mendeteksi preferensi dark mode pengguna.
• Jika preferensi dark mode diaktifkan, class dark-mode akan ditambahkan ke elemen body.
• Style untuk class dark-mode telah didefinisikan di file CSS.

3. Menggunakan Local Storage

Metode ini menggunakan local storage browser untuk menyimpan preferensi dark mode pengguna. Dengan cara ini, preferensi pengguna akan disimpan bahkan setelah mereka menutup browser.

HTML:

    
    
    
    


    
Selamat datang!
    Toggle Dark Mode
    

CSS (style.css):

/* Default Style */
body {
    background-color: #fff;
    color: #000;
}

/* Dark Mode Style */
.dark-mode {
    background-color: #000;
    color: #fff;
}

JavaScript (script.js):

const toggleDarkModeButton = document.getElementById('toggle-dark-mode');
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

// Check if dark mode is already enabled in local storage
const isDarkModeEnabled = localStorage.getItem('darkMode') === 'true';

// Initialize dark mode
if (prefersDarkMode || isDarkModeEnabled) {
    document.body.classList.add('dark-mode');
}

// Toggle dark mode
toggleDarkModeButton.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');

    // Save dark mode preference in local storage
    localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
});

Penjelasan:

• Kode JavaScript ini menggunakan local storage untuk menyimpan status dark mode pengguna.
• Saat halaman dimuat, kode akan memeriksa apakah dark mode telah diaktifkan sebelumnya di local storage.
• Tombol "Toggle Dark Mode" memungkinkan pengguna untuk mengganti tampilan website secara manual.
• Saat pengguna mengklik tombol tersebut, status dark mode akan diperbarui di local storage.

Kesimpulan

Auto dark mode adalah fitur yang berguna untuk meningkatkan pengalaman pengguna website. Dengan menggunakan metode di atas, Anda dapat dengan mudah menambahkan fitur ini ke website HTML Anda.

Pilih metode yang sesuai dengan kebutuhan dan preferensi Anda.