Web Tasarım

Bootstrap 5 ile Dark Mode Nasıl Yapılır?

Bootstrap 5.3 ile gelen yeni color mode sistemi ile sitenize kolayca dark/light mod ekleyin.

FB
Fikir Bulutu Ekibi
Web Geliştirme
30 Mar 2026 4 dk okuma 158 görüntülenme

Bootstrap 5.3, data-bs-theme attribute'u ile native dark mode desteği sunuyor. Bu yazıda sıfırdan bir dark mode toggle nasıl yapılır anlatıyoruz.

Temel Kullanım

HTML elementine data-bs-theme="dark" eklemek yeterlidir.

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

JavaScript ile Toggle

Kullanıcının tercihini localStorage'da saklayarak sayfa yenilemelerinde de hatırlayabilirsiniz.

Bu yaklaşım ile siteniz Google'ın Core Web Vitals kriterlerini de karşılar.

Bu yazıyı paylaş:
FB
Fikir Bulutu Ekibi
Web Geliştirme & Tasarım

Fikir Bulutu olarak, web tasarımından yazılıma, e-ticaretten dijital pazarlamaya kadar geniş bir alanda müşterilerimize değer katmaya devam ediyoruz.

Aklınıza takılan tüm sorular için yanınızdayız.
0 553 822 28 50
7/24 mail atabilirsiniz, en kısa sürede dönüş yaparız.
enis@fikirbulutu.com
Fiziksel adresimize uğrayın bir fincan kahvemizi için.
Yol Tarifi Alın