๐ŸŒ™
Veb-sayt

Dark mode: to'g'ri qora rejim dizayni

03.11.2024
โ† Barcha maqolalar

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.

O'xshash maqolalar

๐Ÿ˜• 404 sahifani qanday qilib foydali qilish ๐Ÿ’ช Fitness zal sayti: bron va to'lov ๐ŸŽ“ Maktab va Universitet sayti tuzilishi ๐Ÿฅ Klinika sayti: tibbiy talablar
๐ŸŒ Til
๐Ÿ‡บ๐Ÿ‡ฟ O'zbek โœ“ ๐Ÿ‡บ๐Ÿ‡ฟ ะŽะทะฑะตะบ ๐Ÿ‡ท๐Ÿ‡บ ะ ัƒััะบะธะน ๐Ÿ‡ฌ๐Ÿ‡ง English