Dark Mode жана көрүү сооронуч

1) Эмне үчүн караңгы тема

төмөн жарык, аз жаркыраган жана "жарык жаркыраган" көздүн сооронуч.
Энергия: OLED/AMOLED кара экрандар батареяны аз сарптайт.
Берилиштерге басым жасоо: фонго эмес, мазмунга басым жасоо.
Колдонуучунун күтүүлөрү: система желеги 'prefers-color-scheme' - де-факто стандарты.

2) Принциптер

1. Кара боз фон> UI беттери үчүн таза кара (жакшы окуу жана градация).
2. Контенттеги контраст: "ак кара" эмес, узун тексттер үчүн жумшак көлөкөлөр.
3. Этият "жаркыраган": жарык/басым угулбай, бирок айырмаланат.
4. көлөкө ≠ тереңдик: Биз ачык/бүдөмүк көлөкө эмес, кескин карама-каршы иш.
5. Жеткиликтүүлүк: WCAG AA (минималдуу), көрүнгөн фокус жана түшүнүктүү шарттар.
6. Системалык орнотуулар биринчилик болуп саналат: авто-которуу жана "кыскартылган кыймыл".

3) палитра жана токендер (мисал)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• караңгы режимде басым + 8-12% жарык караганда жарык.
• Чоң аянттар үчүн абсолюттук # 000 качуу менен боз (4-5 кадам) градацияларын колдонуңуз (AMOLED режимин кошпогондо).

4) Текст жана окуу жөндөмдүүлүгү

Негизги текст: ачык боз '#E6E8EB' на '#0E1116' (контраст ~ 12:1).
Экинчилик текст: '#A6AEB8'; - дагы бир кадам караңгы/тунук.
Узак окуу: бир аз жылуу көлөкөлөр ("гало" кыскартуу).
Шилтемелер - басым + демейки баса; түс ≠ маанинин жалгыз алып жүрүүчүсү.

5) Surface, тереңдик жана айнек

Elevations: `base` → `elev1` → `elev2`; ар бир катмар 2-4% жарык/жылуу.
Көлөкө - жумшак, кенен, төмөн тунук менен; "жаркыраган" контурлардан качуу.
Транслуценттик панелдер (blur) орточо ылайыктуу; субстрат менен тексттин карама-каршылыгын камсыз кылуу.
Бөлгүчтөр - жарым жука чек '-bd-soft' же эптеп көрүнгөн "жек".

6) Шарттар жана басым

Hover: + 2-3% жарык алкагында; Active: − 2-3% (кара).
Focus: так шакек (мисалы, 'outline: 2px solid #6EA0FF; outline-offset: 2px; '), басым баскычтарында да көрүнүп турат.
Disabled: кылдаттык менен карама-каршылыкты азайтуу; текст үчүн окуу деңгээлинен төмөн түшпөңүз.

7) Баскычтар, формалар жана таблицалар

Primary: фон '--accent', текст '#0E1116'.
Secondary: фон '--bg-elev1', бордер '--bd-strong', текст '--fg-primary'.
Киргизүү талаалары: фон '--bg-elev1', фокуста - акценттүү бордер; placeholder туңгуюктуу, бирок окуу.
Таблицалар: зебра-фон араң байкалат, hover менен сызыктын өзгөчөлүгү - + 2-3% жарык.

8) Иллюстрациялар, логотиптер жана сүрөттөр

Логотиптер жана пиктограммалар - караңгыда инверсиялык версиялар; бай фонунда ичке жарык сызыктардан алыс болуңуз.
Сүрөт: үстүнө карама-каршы аталыштары үчүн кара маска (40-60%) кошуу.
Сөлөкөттөр: бир калыңдыгы, контур + толтуруу - абалы боюнча, эмес, "уулуу" түстөр.

9) Караңгы темада Data-Visualize

Катар түстөрү - орточо толгон; минималдуу 5 айырмалануучу тон.
Торлор жана октор - үнсүз (альфа 20-30%), кол тамгалар - '--fg-muted'.
Аннотациялар/окуялар - жаркын, бирок окулуучу; түс менен гана эмес, форма/маркер менен баса белгилөө.
Бош маалыматтар/лаг - ак талаалар эмес, жумшак "туман".

10) аткаруу жана батарея

OLED чын эле таза кара үнөмдөйт (# 000) - колдонуучунун тандоосу боюнча AMOLED режиминде колдонуңуз.
алсыз GPU боюнча катуу чоң жарык/blur алыс.
'prefers-reduced-motion' урматтаңыз: анимацияларды/өтүүлөрдү жөнөкөйлөштүрүңүз.

11) Жүрүм-турум жана которуу

демейки - 'prefers-color-scheme'.
Колдонуучуга ачык ачкыч (Light/Dark/System) бериңиз, тандоону сактаңыз (cookie/localStorage).
Теманы алмаштырууда - жаркырабай: рендерге чейин теманын классын алдын ала кошуу.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) Жеткиликтүүлүк (A11y)

Тексттин карама-каршылыгы ≥ 4. 5:1 (кадимки), ≥ 3:1 (чоң).
бир гана түс менен абалын коддоо эмес,: сөлөкөт/үлгү/кол менен.
Focus стили жана клавиатура багыттоо - милдеттүү.
VoiceOver/TalkBack: ролдору, лейблдер, табак кезек.

13) Анти-үлгүлөрү

Чоң аянттарда таптакыр кара фонунда абсолюттук ак текст - "жылтылдап" жана чарчоо.
кара неон басым - "жарык ызы-чуу".
Жогорку контрасттуу көлөкөлөр (катуу чек менен "кара боз").
Маскасы жок сүрөттөгү тунук текст.
Жок болгон placeholder (өтө төмөн alfa).

14) Компоненттердин мисалдары

Баскычы

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

Карта

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) Тест-план

Жарык: караңгы бөлмө/күндүзгү жарык/көчө кечинде.
Түзмөктөр: OLED жана IPS, мобилдик/desktop, ар кандай тыгыздыгы.
A11y: контраст текшерүүчү, клавиатура өтүү, placeholder's окуу жөндөмдүүлүгү.
кабылдоо: ab-тест "көз чарчоо" жана түн ичинде киргизүү каталар.
Аткаруу: RUM-метрика (INP/CLS) кара теманы күйгүзгөндөн кийин; GPU жүктөө (blur/көлөкө таасирлери).

16) Сапат Metrics

Contrast Violations/1k элементтери (максаты: → 0).
Complaint Rate боюнча "өтө караңгы/жарык".
Night Session Completion (22: 00-06: 00 сессиялар боюнча жүрүм-турум көрсөткүчтөрү).
INP/CLS p75 Dark Mode vs Light (базалык кем эмес).
Opt-in Dark Mode жана теманы тандаган колдонуучуларды кармап туруу.

17) Чек-тизме ишке киргизүү

• 4-5 беттик деңгээл менен караңгы теманын палитрасы
• Текст/сөлөкөт/чек карама-каршы WCAG AA ылайык
• Көрүнгөн фокус-стили жана абалы (hover/active/disabled)
• Логотип/сөлөкөттөр/сүрөттөр ылайыкташтырылган, сүрөттөгү маскалар кошулду
• Graphics - угулбаган торлор, окулуучу кол тамгалар, эмес, "уулуу" катар
• Switch Light/Dark/System, "жарк" жок тандоо сактоо
• Урмат 'prefers-color-scheme' жана 'prefers-reduced-motion'
• RUM/перф-дашборд, регрессия боюнча алерталар

18) Ишке ашыруу планы (3 итерация)

Итерация 1 - пайдубалы (1-2 жума)

Палитра/токендер, базалык беттер (base/elev1/elev2), текст/чектер, баскычтар/талаалар/таблицалар, теманы которуу.

Итерация 2 - Детализация (3-4 жума)

Караңгыда графика жана иллюстрациялар, сүрөттөгү маскалар, фокус/статус, reduced-motion менен анимация, перф-аудит.

Итерация 3 - Оптималдаштыруу (үзгүлтүксүз)

AMOLED режими параметр катары, ичке карама-каршылыктарды орнотуу, түнкү колдонуучулук тесттер, RUM салыштыруу Light vs Dark, үзгүлтүксүз бренд/UX аудиттер.

19) Mini-FAQ

Таза кара фон жасайбы?
UI үчүн - жакшы терең кара боз; таза # 000 параметр "AMOLED режими" калтыруу.

Мен басым каныккандыгын жогорулатуу керекпи?
караңгы - Адатта, тескерисинче, бир аз жарык жана "жарык" эмес, каныккан азайтат.

Баннерлердин сүрөттөрү жөнүндө эмне айтууга болот?
кара субстрат/маска кошуу, текст жана логотип карама-каршылыгын текшерүү.

Жыйынтык

Караңгы тема түстөрдүн инверсиясы эмес, өзүнчө дизайн режими: ойлонулган палитра, беттин деңгээли, окулуучулук, туура шарттар, ылайыкташтырылган графика жана медиа, ошондой эле системалык жөндөөлөргө урмат көрсөтүү. Токендерге таянуу, контрастты жана аткарууну көзөмөлдөө - жана Dark Mode түнкү жана күндүзгү колдонуучулар үчүн ыңгайлуу, туруктуу жана кооз курал болуп калат.