Dark mode — foydalanuvchining 70%+ tanlaydi. Lekin uni qo'shish faqat rangni o'zgartirish emas — kontrast va batafsillikni saqlash kerak.
Asosiy rang qoidasi
Sof qora (#000) emas — yumshoq qora (#0f172a, #1e293b). Sof oq (#fff) ham emas — pasaytirilgan oq (#f1f5f9). Ko'zlarga yumshoq.
Kontrast WCAG
Matn va fon o'rtasida 4.5:1 minimal kontrast. Dark mode'da bu — ko'pchilik dizaynlarda buziladi. Ranglarni har joyda WebAIM Contrast Checker bilan tekshiring.
Tugmalar va aksentlar
Light mode'dagi tugma rangi — dark mode'da juda yorqin ko'rinishi mumkin. Toymingrachni biroz pasaytiring (10-15%).
Rasm va illyustratsiyalar
Yorqin rasmlar dark fon'da ko'zni og'ritadi. Filtr (brightness:0.8) yoki dark variantlarini tayyorlang.
Yorug' joylar
Tooltip, dropdown, modal — fon biroz yorqinroq (#1e293b o'rniga #334155) — chuqurlik tasoviri.
Implementatsiya
CSS prefers-color-scheme media query yoki JS toggle. localStorage'da foydalanuvchi tanlovini saqlang. Sistema preferensi default sifatida.
Test
Har bir sahifa va component'ni ikkala rejimda ko'ring. Eng ko'p xato — light mode-only ranglar dark'da chizish.