light-dark()
CSS light-dark() funksiyasi ikkita rang qiymatini sozlash imkonini beradi: foydalanuvchi yorug‘ rang mavzusini tanlagan bo‘lsa, birinchi qiymatni, qorong‘i rang mavzusini tanlagan bo‘lsa, ikkinchi qiymatni qaytaradi.
light-dark() funksiyasidan foydalanish uchun CSS color-scheme xususiyati light dark qiymatiga ega bo‘lishi kerak.
Maslahat: Foydalanuvchilar o‘zlari afzal ko‘rgan rang sxemasini (color-scheme) operatsion tizim sozlamalari (yorug‘ yoki qorong‘i rejim) yoki brauzer sozlamalari orqali o‘rnatishlari mumkin.
Misol
light-dark() funksiyasi yordamida ikkita rang qiymatini sozlang:
:root {
color-scheme: light dark;
--light-bg: snow;
--light-color: black;
--dark-bg: black;
--dark-color: snow;
}
* {
background-color: light-dark(var(--light-bg), var(--dark-bg));
color: light-dark(var(--light-color), var(--dark-color));
}
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| light-dark() | 123 | 123 | 120 | 17.5 | 109 |
CSS sintaksisi
light-dark(lightcolor, darkcolor)
| Qiymat | Tavsif |
|---|---|
| lightcolor | Majburiy. Yorug‘ rang sxemasi uchun ishlatiladigan rang qiymatini belgilaydi |
| darkcolor | Majburiy. Qorong‘i rang sxemasi uchun ishlatiladigan rang qiymatini belgilaydi |
| Versiya: | CSS Color moduli, 5-daraja |
|---|
Tegishli sahifalar
CSS ma’lumotnomasi: CSS color-scheme xususiyati.
CSS ma’lumotnomasi: CSS var() funksiyasi.
CSS darsligi: CSS o‘zgaruvchilari.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!