Bootstrap 5 TutorialLesson 32Preview gratis
BS5 Dark Mode
Lesson ini bagian dari Bootstrap · Semua level
Ringkasan
Bootstrap 5.3 mendukung mode gelap secara bawaan melalui atribut data-bs-theme="dark" yang ditempatkan pada <html> atau bagian tertentu halaman. Cukup tambahkan atribut itu dan komponen, warna, serta utilitas akan menyesuaikan tema gelap otomatis. Anda juga dapat mengikuti preferensi sistem pengguna lewat prefers-color-scheme.
Poin kunci
- data-bs-theme="dark" pada <html> mengaktifkan mode gelap seluruh halaman.
- Atribut yang sama bisa diberikan pada elemen tertentu untuk bagian gelap parsial.
- Kelas seperti .bg-body-tertiary menyesuaikan warna dengan tema otomatis.
- Preferensi sistem operasi dapat diikuti dengan media query prefers-color-scheme.
- CSS kustom dapat dibuat mengikuti tema lewat variabel warna Bootstrap.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.