Panduan Pemula: Toggle Mode Terang/Gelap Menggunakan JavaScript (Tanpa Framework)
Selamat datang! Dalam panduan ini, kita akan menjelajahi cara membuat toggle mode terang/gelap sederhana namun efektif menggunakan JavaScript murni. Tanpa menggunakan framework atau pustaka eksternal apa pun, kita akan membangun toggle yang dapat digunakan kembali yang meningkatkan pengalaman pengguna situs web Anda. Mode terang/gelap bukan hanya tentang estetika; ini tentang aksesibilitas dan memberi pengguna pilihan. Mari kita mulai!
Daftar Isi
- Pendahuluan
- Mengapa Mode Terang/Gelap Penting?
- Apa yang Akan Kita Bangun?
- Prasyarat
- Persiapan HTML
- Struktur HTML Dasar
- Menambahkan Tombol Toggle
- Menata dengan CSS
- Variabel CSS untuk Tema
- Gaya Mode Terang Default
- Gaya Mode Gelap
- Transisi Halus
- Logika JavaScript
- Memilih Elemen
- Memeriksa Preferensi Pengguna Tersimpan
- Fungsi untuk Mengaktifkan/Menonaktifkan Mode
- Menyimpan Preferensi Pengguna
- Menambahkan Event Listener ke Tombol
- Peningkatan Aksesibilitas
- Kontras Warna
- Atribut ARIA
- Praktik Terbaik dan Pertimbangan
- Performa
- Kode yang Dapat Dipelihara
- Kompatibilitas Browser
- Penyelesaian Masalah Umum
- Toggle Tidak Berfungsi
- Gaya Tidak Berubah
- Masalah Penyimpanan Lokal
- Kesimpulan
- Ringkasan
- Langkah Selanjutnya
1. Pendahuluan
1.1 Mengapa Mode Terang/Gelap Penting?
Mode terang/gelap telah menjadi fitur yang banyak diminati di situs web modern dan aplikasi web. Berikut adalah beberapa alasan mengapa mode terang/gelap penting:
- Pengalaman Pengguna: Mode gelap mengurangi ketegangan mata, terutama dalam kondisi minim cahaya. Ini menawarkan pengalaman visual yang lebih nyaman bagi pengguna, yang mengarah pada kepuasan dan keterlibatan yang lebih tinggi.
- Aksesibilitas: Bagi individu dengan sensitivitas cahaya atau gangguan penglihatan, mode gelap dapat meningkatkan kemampuan membaca dan mengurangi kelelahan visual secara signifikan. Ini membuat konten Anda lebih mudah diakses oleh audiens yang lebih luas.
- Hemat Daya: Pada perangkat dengan layar OLED atau AMOLED, mode gelap dapat menghemat daya karena piksel yang lebih sedikit menyala, sehingga memperpanjang masa pakai baterai.
- Estetika: Banyak pengguna lebih menyukai tampilan mode gelap karena alasan estetika. Ini dapat memberikan tampilan yang ramping dan modern ke situs web Anda.
1.2 Apa yang Akan Kita Bangun?
Dalam tutorial ini, kita akan membuat toggle mode terang/gelap menggunakan JavaScript murni, tanpa dependensi eksternal. Kita akan membangun:
- Struktur HTML dasar untuk tombol toggle dan konten situs web.
- Gaya CSS menggunakan variabel untuk tema terang dan gelap.
- Kode JavaScript untuk mengaktifkan/menonaktifkan mode dan menyimpan preferensi pengguna menggunakan penyimpanan lokal.
- Peningkatan aksesibilitas untuk memastikan bahwa toggle ramah pengguna bagi semua orang.
1.3 Prasyarat
Sebelum kita mulai, pastikan Anda memiliki yang berikut ini:
- Pengetahuan dasar HTML, CSS, dan JavaScript.
- Editor kode (misalnya, VS Code, Sublime Text, Atom).
- Browser web (misalnya, Chrome, Firefox, Safari).
2. Persiapan HTML
2.1 Struktur HTML Dasar
Pertama, buat file HTML (misalnya, index.html) dan tambahkan struktur dasar berikut:
“`html
Selamat Datang di Situs Web Saya
Ini adalah beberapa konten di situs web Anda. Tambahkan lebih banyak sesuai kebutuhan.
“`
Pastikan untuk membuat file style.css dan script.js di direktori yang sama dengan file HTML Anda. Kita akan menambahkan gaya dan JavaScript kita ke file-file ini masing-masing.
2.2 Menambahkan Tombol Toggle
Selanjutnya, kita perlu menambahkan tombol toggle ke HTML kita. Tombol ini akan memungkinkan pengguna untuk beralih di antara mode terang dan gelap. Tambahkan kode berikut di dalam tag <header>:
“`html
“`
Ini adalah tombol sederhana dengan ID “toggle-mode”. Kita akan menggunakan ID ini untuk memilih tombol ini di JavaScript kita.
3. Menata dengan CSS
3.1 Variabel CSS untuk Tema
Variabel CSS (juga dikenal sebagai properti kustom) memungkinkan kita untuk mendefinisikan nilai yang dapat digunakan kembali di seluruh stylesheet kita. Ini sangat berguna untuk mengelola tema. Buka file style.css Anda dan tambahkan variabel berikut di dalam pseudo-kelas :root:
“`css
:root {
–bg-color: #f9f9f9;
–text-color: #333;
–header-bg-color: #eee;
–footer-bg-color: #eee;
}
body {
background-color: var(–bg-color);
color: var(–text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
header {
background-color: var(–header-bg-color);
padding: 1rem;
text-align: center;
}
footer {
background-color: var(–footer-bg-color);
padding: 1rem;
text-align: center;
}
“`
Di sini, kita mendefinisikan variabel untuk warna latar belakang, warna teks, warna latar belakang header, dan warna latar belakang footer. Kita kemudian menggunakan variabel-variabel ini untuk gaya badan, header, dan footer.
3.2 Gaya Mode Terang Default
Gaya yang kita tambahkan di atas adalah gaya mode terang default. Ini akan diterapkan saat situs web pertama kali dimuat.
3.3 Gaya Mode Gelap
Sekarang, mari kita tambahkan gaya untuk mode gelap. Kita akan menggunakan kueri media untuk mendeteksi kapan pengguna lebih suka mode gelap dan menerapkan gaya yang sesuai. Tambahkan kode berikut ke file style.css Anda:
“`css
body.dark-mode {
–bg-color: #333;
–text-color: #f9f9f9;
–header-bg-color: #444;
–footer-bg-color: #444;
}
“`
Di sini, kita mendefinisikan variabel baru untuk mode gelap. Kita juga menerapkan gaya-gaya ini ke badan saat kelas .dark-mode ditambahkan. Ini memungkinkan kita untuk beralih di antara tema terang dan gelap dengan menambahkan atau menghapus kelas ini.
3.4 Transisi Halus
Untuk membuat peralihan di antara mode terang dan gelap lebih halus, kita dapat menambahkan transisi ke properti CSS yang berubah. Kita telah melakukan ini di bagian badan CSS:
“`css
body {
background-color: var(–bg-color);
color: var(–text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
“`
Ini akan membuat perubahan warna latar belakang dan warna teks berlangsung selama 0,3 detik dengan fungsi waktu ease, menciptakan transisi yang lebih menyenangkan secara visual.
4. Logika JavaScript
4.1 Memilih Elemen
Sekarang, mari kita tambahkan logika JavaScript untuk mengaktifkan/menonaktifkan mode terang/gelap. Buka file script.js Anda dan tambahkan kode berikut:
“`javascript
const toggleModeButton = document.getElementById(‘toggle-mode’);
const body = document.body;
“`
Di sini, kita memilih tombol toggle dan elemen badan menggunakan ID masing-masing. Kita akan menggunakan elemen-elemen ini untuk mengaktifkan/menonaktifkan mode gelap dan mengubah gaya halaman.
4.2 Memeriksa Preferensi Pengguna Tersimpan
Sebelum kita menambahkan logika untuk mengaktifkan/menonaktifkan mode, kita harus memeriksa apakah pengguna telah menyimpan preferensi. Kita dapat melakukan ini menggunakan penyimpanan lokal. Tambahkan kode berikut ke file script.js Anda:
“`javascript
const darkMode = localStorage.getItem(‘darkMode’);
if (darkMode === ‘enabled’) {
body.classList.add(‘dark-mode’);
}
“`
Di sini, kita mengambil nilai darkMode dari penyimpanan lokal. Jika nilainya adalah 'enabled', kita menambahkan kelas .dark-mode ke badan, menerapkan gaya mode gelap. Ini memastikan bahwa preferensi pengguna dipertahankan di seluruh sesi.
4.3 Fungsi untuk Mengaktifkan/Menonaktifkan Mode
Selanjutnya, kita akan membuat fungsi untuk mengaktifkan/menonaktifkan mode gelap. Tambahkan kode berikut ke file script.js Anda:
“`javascript
function toggleDarkMode() {
body.classList.toggle(‘dark-mode’);
}
“`
Fungsi ini mengaktifkan/menonaktifkan kelas .dark-mode pada badan. Ini berarti bahwa jika kelas ada, itu akan dihapus, dan jika tidak ada, itu akan ditambahkan. Ini memberi kita fungsionalitas toggle.
4.4 Menyimpan Preferensi Pengguna
Kita juga perlu menyimpan preferensi pengguna ke penyimpanan lokal. Tambahkan kode berikut ke file script.js Anda:
“`javascript
function toggleDarkMode() {
body.classList.toggle(‘dark-mode’);
if (body.classList.contains(‘dark-mode’)) {
localStorage.setItem(‘darkMode’, ‘enabled’);
} else {
localStorage.setItem(‘darkMode’, ‘disabled’);
}
}
“`
Di sini, kita memeriksa apakah badan memiliki kelas .dark-mode. Jika iya, kita menyimpan 'enabled' ke penyimpanan lokal. Jika tidak, kita menyimpan 'disabled'. Ini memastikan bahwa preferensi pengguna disimpan dan dimuat pada kunjungan selanjutnya.
4.5 Menambahkan Event Listener ke Tombol
Terakhir, kita perlu menambahkan event listener ke tombol toggle. Tambahkan kode berikut ke file script.js Anda:
“`javascript
toggleModeButton.addEventListener(‘click’, toggleDarkMode);
“`
Ini menambahkan event listener klik ke tombol toggle. Saat tombol diklik, fungsi toggleDarkMode akan dipanggil, mengaktifkan/menonaktifkan mode gelap dan menyimpan preferensi pengguna.
Kode JavaScript lengkap harus terlihat seperti ini:
“`javascript
const toggleModeButton = document.getElementById(‘toggle-mode’);
const body = document.body;
const darkMode = localStorage.getItem(‘darkMode’);
if (darkMode === ‘enabled’) {
body.classList.add(‘dark-mode’);
}
function toggleDarkMode() {
body.classList.toggle(‘dark-mode’);
if (body.classList.contains(‘dark-mode’)) {
localStorage.setItem(‘darkMode’, ‘enabled’);
} else {
localStorage.setItem(‘darkMode’, ‘disabled’);
}
}
toggleModeButton.addEventListener(‘click’, toggleDarkMode);
“`
5. Peningkatan Aksesibilitas
5.1 Kontras Warna
Saat menerapkan mode terang/gelap, penting untuk memastikan bahwa kontras warna memadai untuk semua pengguna. Kontras yang buruk dapat membuat teks sulit dibaca, terutama bagi individu dengan gangguan penglihatan.
Gunakan penganalisis kontras warna untuk memeriksa apakah kontras warna Anda memenuhi standar aksesibilitas. Situs web seperti WebAIM Contrast Checker dapat membantu Anda mengevaluasi kontras warna Anda dan membuat penyesuaian yang diperlukan.
5.2 Atribut ARIA
Atribut Accessible Rich Internet Applications (ARIA) meningkatkan aksesibilitas dengan memberikan informasi tambahan tentang elemen HTML ke teknologi bantu, seperti pembaca layar. Untuk tombol toggle kita, kita dapat menambahkan atribut ARIA untuk menunjukkan status saat ini dari mode terang/gelap.
Modifikasi tombol HTML Anda seperti berikut:
“`html
“`
Atribut aria-pressed menunjukkan apakah tombol ditekan atau tidak. Kita akan memperbarui atribut ini menggunakan JavaScript saat mode diaktifkan/dinonaktifkan. Modifikasi fungsi toggleDarkMode Anda seperti berikut:
“`javascript
function toggleDarkMode() {
body.classList.toggle(‘dark-mode’);
if (body.classList.contains(‘dark-mode’)) {
localStorage.setItem(‘darkMode’, ‘enabled’);
toggleModeButton.setAttribute(‘aria-pressed’, ‘true’);
toggleModeButton.textContent = ‘Aktifkan Mode Terang’; // Update button text
} else {
localStorage.setItem(‘darkMode’, ‘disabled’);
toggleModeButton.setAttribute(‘aria-pressed’, ‘false’);
toggleModeButton.textContent = ‘Aktifkan Mode Gelap’; // Update button text
}
}
“`
Kita juga menambahkan logika untuk memperbarui teks tombol berdasarkan mode saat ini.
6. Praktik Terbaik dan Pertimbangan
6.1 Performa
Kode yang kita tulis relatif ringan dan seharusnya tidak berdampak signifikan pada performa. Namun, jika Anda bekerja dengan situs web yang besar dan kompleks, penting untuk mempertimbangkan implikasi kinerja dari mengaktifkan/menonaktifkan gaya.
Berikut adalah beberapa tips untuk mengoptimalkan kinerja:
- Minimalkan Reflow: Mengubah gaya dapat memicu reflow, yang dapat mahal. Batasi jumlah perubahan gaya yang Anda buat saat mengaktifkan/menonaktifkan mode.
- Gunakan Transisi CSS: Transisi CSS lebih efisien daripada animasi JavaScript. Gunakan transisi untuk animasi halus jika memungkinkan.
- Muat Aset dengan Malas: Jika Anda memiliki gambar atau aset lain yang hanya digunakan dalam mode tertentu, muat dengan malas untuk meningkatkan waktu pemuatan awal.
6.2 Kode yang Dapat Dipelihara
Untuk memastikan bahwa kode Anda dapat dipelihara dan mudah dipahami, ikuti praktik terbaik berikut:
- Gunakan Variabel yang Bermakna: Gunakan nama variabel yang deskriptif untuk membuat kode Anda lebih mudah dibaca.
- Tambahkan Komentar: Jelaskan kode Anda dengan komentar untuk menjelaskan mengapa Anda melakukan hal-hal tertentu.
- Modularisasi Kode: Pecah kode Anda menjadi fungsi yang lebih kecil dan dapat digunakan kembali untuk membuatnya lebih mudah untuk diuji dan dipelihara.
- Konsisten: Ikuti gaya pengkodean yang konsisten di seluruh proyek Anda.
6.3 Kompatibilitas Browser
Kode yang kita tulis kompatibel dengan sebagian besar browser modern. Namun, penting untuk menguji kode Anda di browser yang berbeda untuk memastikan bahwa ia berfungsi seperti yang diharapkan.
Pertimbangkan untuk menggunakan alat seperti BrowserStack atau Saucelabs untuk menguji kode Anda di berbagai browser dan perangkat.
7. Penyelesaian Masalah Umum
7.1 Toggle Tidak Berfungsi
Jika toggle tidak berfungsi, periksa hal-hal berikut:
- Pastikan bahwa Anda telah menautkan file
script.jske file HTML Anda dengan benar. - Pastikan bahwa Anda telah memilih elemen yang benar di JavaScript Anda.
- Periksa konsol browser Anda untuk kesalahan JavaScript.
7.2 Gaya Tidak Berubah
Jika gaya tidak berubah saat Anda mengaktifkan/menonaktifkan mode, periksa hal-hal berikut:
- Pastikan bahwa Anda telah menautkan file
style.csske file HTML Anda dengan benar. - Pastikan bahwa Anda telah mendefinisikan variabel CSS yang benar.
- Pastikan bahwa Anda telah menambahkan kelas
.dark-modeke badan saat mode gelap diaktifkan.
7.3 Masalah Penyimpanan Lokal
Jika Anda mengalami masalah dengan penyimpanan lokal, periksa hal-hal berikut:
- Pastikan bahwa Anda menggunakan sintaks yang benar untuk mengakses penyimpanan lokal.
- Pastikan bahwa penyimpanan lokal diaktifkan di browser Anda.
- Periksa apakah Anda telah mencapai batasan penyimpanan lokal.
8. Kesimpulan
8.1 Ringkasan
Dalam tutorial ini, kita telah mempelajari cara membuat toggle mode terang/gelap menggunakan JavaScript murni, tanpa dependensi eksternal. Kita telah membahas langkah-langkah berikut:
- Menyiapkan struktur HTML.
- Menata halaman dengan CSS menggunakan variabel untuk tema.
- Menambahkan logika JavaScript untuk mengaktifkan/menonaktifkan mode dan menyimpan preferensi pengguna.
- Meningkatkan aksesibilitas dengan kontras warna dan atribut ARIA.
- Membahas praktik terbaik dan pertimbangan untuk performa, pemeliharaan, dan kompatibilitas browser.
8.2 Langkah Selanjutnya
Sekarang setelah Anda memiliki toggle mode terang/gelap dasar, Anda dapat mengembangkannya lebih lanjut dengan fitur-fitur berikut:
- Menambahkan lebih banyak opsi tema (misalnya, tema biru).
- Memungkinkan pengguna untuk menyesuaikan warna.
- Mendeteksi preferensi tema sistem pengguna dan menerapkan tema yang sesuai secara otomatis.
Terima kasih telah membaca! Saya harap Anda menemukan tutorial ini bermanfaat. Jangan ragu untuk bereksperimen dengan kode dan membuat toggle mode terang/gelap Anda sendiri.
Selamat coding!
“`
