Membangun Toggle Switch Light/Dark Mode di Bootstrap 5.3 Secara Profesional

2 months ago

Dark mode telah menjadi standar baru dalam desain antarmuka modern. Hampir semua aplikasi besar—mulai dari sistem operasi, browser, hingga website—menyediakan opsi light mode dan dark mode. Alasan utamanya bukan hanya estetika, tetapi juga kenyamanan mata, efisiensi energi, dan preferensi pengguna yang semakin beragam.

Bootstrap, sebagai salah satu framework CSS paling populer di dunia, merespons tren ini dengan memperkenalkan color modes secara resmi sejak versi Bootstrap 5.3. Fitur ini memungkinkan developer mengaktifkan light mode, dark mode, atau bahkan mode warna kustom dengan cara yang jauh lebih bersih dan terstandarisasi.

Namun, meskipun Bootstrap sudah menyediakan dukungan dark mode bawaan, framework ini belum menyediakan komponen toggle switch siap pakai untuk mengganti mode warna tersebut. Dokumentasi resmi hanya menampilkan contoh dropdown sederhana sebagai referensi.

Di artikel ini, kita akan membahas secara mendalam dan praktis bagaimana cara:

  • Memahami sistem color mode di Bootstrap 5.3

  • Membangun toggle switch light/dark mode custom

  • Menggunakan atribut data-bs-theme dengan benar

  • Menyimpan preferensi user menggunakan localStorage

  • Menyesuaikan dark mode Bootstrap melalui Sass

  • Menerapkan praktik terbaik agar toggle switch kompatibel, scalable, dan SEO-friendly

Artikel ini cocok untuk frontend developer pemula hingga menengah, serta developer profesional yang ingin membangun UI modern berbasis Bootstrap.

Apa Itu Color Mode di Bootstrap 5.3?

Sebelum Bootstrap 5.3, implementasi dark mode biasanya dilakukan dengan cara:

  • Menambahkan class khusus seperti .dark-theme

  • Mengatur CSS variables sendiri

  • Mengelola banyak kondisi CSS secara manual

Pendekatan tersebut sering menimbulkan masalah maintainability, konflik style, dan kompleksitas berlebih.

Bootstrap 5.3 memperkenalkan solusi yang jauh lebih rapi melalui color modes, yang bekerja menggunakan atribut HTML:

<html data-bs-theme="dark">

Jika atribut ini diterapkan, maka seluruh komponen Bootstrap otomatis akan menggunakan style dark mode bawaan.

Bootstrap secara default menyediakan:

  • Light mode (default)

  • Dark mode

  • Dukungan untuk custom color mode melalui Sass

Keuntungan pendekatan ini antara lain:

  • Konsisten di seluruh komponen

  • Tidak perlu menulis ulang CSS

  • Mudah dikustomisasi

  • Mendukung preferensi sistem (OS-level dark mode)

Kenapa Perlu Toggle Switch Custom?

Bootstrap memang menyediakan contoh dropdown color mode toggle di dokumentasinya. Namun, dalam praktik nyata:

  • Banyak website membutuhkan toggle switch yang lebih intuitif

  • Toggle switch lebih familiar bagi pengguna

  • Lebih cocok untuk header, navbar, atau settings panel

  • Memberikan UX yang lebih cepat dan visual

Karena Bootstrap belum menyediakan komponen ini secara resmi, maka kita perlu membangunnya sendiri—tetapi tetap mengikuti standar Bootstrap agar tidak bertabrakan dengan sistem internalnya.

Konsep Dasar Toggle Light/Dark Mode

Sebelum masuk ke kode, kita perlu memahami alur kerjanya:

  1. User memilih mode (Light / Dark / Auto)

  2. JavaScript mendeteksi pilihan user

  3. Atribut data-bs-theme ditambahkan atau dihapus

  4. Preferensi user disimpan di localStorage

  5. Saat halaman dimuat ulang, mode yang sama diterapkan kembali

  6. Jika mode Auto dipilih, sistem mengikuti preferensi OS

Dengan alur ini, pengalaman pengguna menjadi konsisten dan profesional.

Struktur HTML Toggle Switch

Kita akan menggunakan radio button karena:

  • Mudah di-handle dengan JavaScript

  • Mendukung lebih dari dua opsi (Light, Dark, Auto)

  • Lebih accessible dibanding checkbox

Contoh struktur HTML:

<div class="switches"> <label> <input type="radio" name="theme" id="light" /> Light </label> <label> <input type="radio" name="theme" id="dark" /> Dark </label> <label> <input type="radio" name="theme" id="auto" /> Auto </label> </div>

Struktur ini sederhana, mudah dikustomisasi, dan tidak bergantung pada JavaScript framework tambahan.

Menggunakan data-bs-theme untuk Dark Mode

Bootstrap 5.3 menggunakan atribut berikut:

data-bs-theme="dark"

Jika atribut ini dihapus, maka otomatis kembali ke light mode.

Contoh implementasi JavaScript:

const html = document.documentElement; html.setAttribute("data-bs-theme", "dark"); // atau html.removeAttribute("data-bs-theme");

Pendekatan ini lebih direkomendasikan dibanding menambahkan class manual karena:

  • Bootstrap memproses semua komponen internal

  • Tidak menimbulkan konflik

  • Mudah dikombinasikan dengan Sass

Mengelola Preferensi User dengan localStorage

Agar pilihan user tetap tersimpan walau halaman di-refresh, kita gunakan localStorage.

Contoh key yang aman dan terstruktur:

  • bs-dark-mode

  • bs-selected-radio

Penggunaan prefix bs- penting untuk:

  • Menghindari konflik dengan script lain

  • Menjaga namespace tetap rapi

JavaScript Toggle Switch Lengkap

Berikut versi JavaScript lengkap yang sudah dioptimalkan:

const html = document.documentElement; const switches = document.querySelector(".switches"); const inputs = switches.querySelectorAll("input"); if (localStorage.getItem("bs-dark-mode")) { html.setAttribute("data-bs-theme", "dark"); } if (localStorage.getItem("bs-selected-radio")) { switches.querySelector( `#${localStorage.getItem("bs-selected-radio")}` ).checked = true; } const setTheme = (theme) => { if (theme === "dark") { html.setAttribute("data-bs-theme", "dark"); localStorage.setItem("bs-dark-mode", "true"); } else { html.removeAttribute("data-bs-theme"); localStorage.removeItem("bs-dark-mode"); } }; const handleMediaChange = (e) => { if (switches.querySelector('[type="radio"]:checked').id === "auto") { setTheme(e.matches ? "dark" : "light"); } }; const handleInputChange = (e) => { const themeMode = e.target.id; if ( themeMode === "dark" || (themeMode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches) ) { setTheme("dark"); } else { setTheme("light"); } localStorage.setItem("bs-selected-radio", themeMode); }; window .matchMedia("(prefers-color-scheme: dark)") .addEventListener("change", handleMediaChange); inputs.forEach((input) => input.addEventListener("input", handleInputChange) );

Kode ini mendukung:

  • Light mode

  • Dark mode

  • Auto mode (mengikuti OS)

  • Persistensi preferensi user

Menghapus CSS Dark Mode Lama

Jika sebelumnya Anda menggunakan CSS seperti ini:

.theme-dark { background: black; color: white; }

Maka CSS tersebut tidak lagi dibutuhkan.

Bootstrap sudah menyediakan variabel warna dark mode secara default. Menggunakan CSS manual justru berisiko:

  • Duplikasi style

  • Konflik warna

  • Sulit di-maintain

Customisasi Dark Mode Bootstrap dengan Sass

Bootstrap menyimpan semua variabel dark mode di file:

_variables-dark.scss

Untuk melakukan override, Anda cukup mendefinisikan ulang variabel tersebut di file main.scss sebelum Bootstrap dikompilasi.

Contoh:

$body-bg-dark: #0f172a; $body-color-dark: #e5e7eb;

Hasilnya:

  • Background lebih soft

  • Teks lebih nyaman dibaca

  • Tetap konsisten dengan sistem Bootstrap

Menggunakan Mixin color-mode

Bootstrap menyediakan mixin khusus:

@include color-mode(dark) { body { border: 1px solid red; } }

Output CSS:

[data-bs-theme=dark] body { border: 1px solid red; }

Mixin ini sangat berguna untuk:

  • Styling khusus dark mode

  • Debugging

  • Penyesuaian komponen tertentu

Praktik Terbaik Implementasi Toggle Mode

Beberapa best practice yang wajib diterapkan:

  1. Jangan hardcode warna

  2. Gunakan variabel Bootstrap

  3. Simpan preferensi user

  4. Dukung prefers-color-scheme

  5. Gunakan prefix localStorage

  6. Jangan override CSS berlebihan

  7. Uji di berbagai browser

Dampak UX dan SEO

Dark mode yang baik berdampak pada:

  • Waktu kunjungan lebih lama

  • Bounce rate lebih rendah

  • Aksesibilitas lebih baik

  • Pengalaman mobile yang lebih nyaman

Secara tidak langsung, ini berdampak positif pada SEO.

Membangun toggle switch light/dark mode di Bootstrap 5.3 bukan hanya soal estetika, tetapi juga tentang pengalaman pengguna, konsistensi desain, dan maintainability kode.

Dengan memanfaatkan data-bs-theme, localStorage, dan sistem Sass Bootstrap, Anda bisa membangun solusi yang:

  • Modern

  • Profesional

  • Mudah dikembangkan

  • Siap untuk kebutuhan masa depan

Selama Bootstrap belum menyediakan komponen resmi, solusi custom seperti ini adalah pilihan terbaik.

Frequently Asked Questions (FAQ)

1. Apa itu light mode dan dark mode di Bootstrap 5.3?

Light mode dan dark mode di Bootstrap 5.3 adalah sistem color mode bawaan yang memungkinkan tampilan website berubah antara tema terang dan gelap menggunakan atribut data-bs-theme. Dengan fitur ini, developer tidak perlu lagi membuat dark mode secara manual dari nol.

2. Sejak versi berapa Bootstrap mendukung dark mode secara resmi?

Bootstrap mulai mendukung dark mode secara resmi sejak Bootstrap versi 5.3. Pada versi ini, Bootstrap memperkenalkan color modes yang terintegrasi langsung dengan seluruh komponen bawaan.

3. Apakah Bootstrap sudah menyediakan komponen toggle light/dark mode?

Saat ini, Bootstrap belum menyediakan komponen toggle switch khusus untuk light dan dark mode. Bootstrap hanya memberikan contoh dropdown color mode, demonstrating cara kerja sistem tema, sehingga developer perlu membuat toggle switch custom sendiri.

4. Mengapa menggunakan data-bs-theme lebih disarankan daripada class CSS biasa?

Menggunakan atribut data-bs-theme lebih disarankan karena:

  • Mengikuti standar resmi Bootstrap

  • Semua komponen otomatis menyesuaikan tema

  • Tidak menimbulkan konflik CSS

  • Mudah dikombinasikan dengan Sass dan custom theme

5. Bagaimana cara mengaktifkan dark mode di Bootstrap 5.3?

Dark mode dapat diaktifkan dengan menambahkan atribut berikut pada elemen <html>:

<html data-bs-theme="dark">

Untuk kembali ke light mode, atribut tersebut cukup dihapus.

6. Apa fungsi localStorage pada toggle light/dark mode?

localStorage digunakan untuk menyimpan preferensi tema pengguna, sehingga pilihan light atau dark mode tetap aktif meskipun halaman di-refresh atau browser ditutup.

7. Apakah toggle switch bisa mengikuti preferensi dark mode sistem operasi?

Ya, toggle switch dapat mengikuti preferensi sistem operasi dengan memanfaatkan media query:

prefers-color-scheme: dark

Fitur ini biasanya diimplementasikan melalui JavaScript untuk mode Auto.

8. Apakah aman menggunakan JavaScript untuk mengelola color mode?

Aman, selama:

  • Kode ditulis dengan efisien

  • Tidak memanipulasi DOM berlebihan

  • Menggunakan namespace yang jelas pada localStorage

JavaScript justru diperlukan untuk menciptakan pengalaman pengguna yang dinamis dan konsisten.

9. Apakah dark mode Bootstrap bisa dikustomisasi?

Bisa. Bootstrap menyediakan file Sass khusus _variables-dark.scss yang memungkinkan developer mengubah warna background, teks, dan komponen lain di dark mode sesuai kebutuhan desain.

10. Apa itu mixin color-mode di Bootstrap?

Mixin color-mode adalah fitur Sass Bootstrap yang memungkinkan developer menambahkan style khusus berdasarkan mode warna tertentu, misalnya hanya untuk dark mode atau light mode.

11. Apakah toggle light/dark mode memengaruhi performa website?

Tidak signifikan. Toggle light/dark mode hanya mengubah atribut HTML dan variabel CSS, sehingga tidak membebani performa selama implementasinya efisien.

12. Apakah toggle light/dark mode berpengaruh pada SEO?

Secara langsung tidak, namun secara tidak langsung dark mode meningkatkan UX, menurunkan bounce rate, dan meningkatkan waktu kunjungan, yang semuanya berdampak positif terhadap SEO.

13. Apakah toggle switch ini kompatibel dengan semua browser modern?

Ya, toggle light/dark mode Bootstrap 5.3 kompatibel dengan:

  • Google Chrome

  • Mozilla Firefox

  • Microsoft Edge

  • Safari versi modern

Namun, untuk browser lama, fitur auto mode mungkin tidak sepenuhnya didukung.

14. Apakah bisa membuat lebih dari dua mode warna di Bootstrap?

Bisa. Selain light dan dark mode, Bootstrap mendukung custom color mode dengan mendefinisikan variabel Sass baru dan mengaktifkannya melalui data-bs-theme.

15. Apakah toggle light/dark mode cocok untuk website skala besar?

Sangat cocok. Sistem color mode Bootstrap dirancang agar:

  • Mudah di-maintain

  • Konsisten di seluruh halaman

  • Scalable untuk aplikasi besar

Leave a Reply

Your email address will not be published. Required fields are marked *

Go up