Қараңғы режим және көрнекі жайлылық

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 (AMOLED режимін қоспағанда) болдырмай, сұр реңкті (4-5 қадам) пайдаланыңыз.

4) Мәтін және оқылушылық

Негізгі мәтін: ашық сұр '#E6E8EB' #0E1116 '(12:1 ~ қарама-қарсылық).
Қайталама мәтін: '#A6AEB8'; кеңестер - тағы бір қадам қараңғы/мөлдір.
Ұзақ оқу: сәл жылы реңктер («гало» кішірейтеді).
Сілтемелер - екпін + әдепкі астын сызу; түсі ≠ мағынаның жалғыз тасымалдаушысы.

5) Беті, тереңдігі және шыны

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) Қараңғы тақырыптағы дата-визуализация

Қатарлардың түсі - орташа қанық; кемінде 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 (ірі).
Күйді тек түспен кодтамаңыз: белгішені/үлгіні/қолтаңбаны пайдаланыңыз.
Фокус-стильдер мен пернетақталық навигация - міндетті.
VoiceOver/TalkBack: рөлдер, лейблдер, табақ кезегі.

13) Қарсы үлгілер

Үлкен алаңдарда мүлдем ақ түсті мәтін - «жылтырау» және шаршау.
Қараңғы түстегі неондық екпін - «жарық шуы».
Жоғары қарама-қарсы көлеңкелер (қатты шекарасы бар «қара түсті сұр»).
Бетпердесіз фотосуреттегі мөлдір мәтін.
Жоғалып бара жатқан placeholder (тым төмен альфа).

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, мобильді/десктоп, әртүрлі тығыздықтар.
A11y: контраст-чекер, пернетақталық өту, placeholder's оқылымдылығы.
Қабылдау: аб-тест «көздің шаршауы» және түнде енгізу қателіктері.
Перфоманс: қараңғы тақырып қосылғаннан кейін RUM-метрика (INP/CLS); GPU жүктемесі (blur/көлеңке әсерлері).

16) Сапа өлшемдері

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)
• Логотиптер/иконалар/фотосуреттер бейімделген, суреттегі маскалар қосылған
• Графиктер - сөндірілген торлар, оқылатын қолтаңбалар, «улы» емес қатарлар
• 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) Шағын FAQ

Таза қара фон жасау керек пе?
UI үшін - терең қою сұр; # 000 таза күйін «AMOLED» параметрімен қалдырыңыз.

Акценттердің молығуын арттыру керек пе?
Қараңғыда - әдетте керісінше, аздап жарықтандырады және «жарқырамауы» үшін қанығуын азайтады.

Баннерлердің суреттерімен не істеу керек?
Қара субстрат/маска қосыңыз, мәтін мен логотиптің қарама-қайшылығын тексеріңіз.

Жиынтығы

Қараңғы тақырып - түстердің инверсиясы емес, жеке дизайн-режим: ойластырылған палитра, бет деңгейі, оқылушылық, дұрыс жай-күй, бейімделген графика мен медиа, сондай-ақ жүйелік баптауларды құрметтеу. Токендерге сүйеніп, қарама-қарсылық пен өнерді бақылаңыз - Dark Mode түнгі және күндізгі пайдаланушылар үшін ыңғайлы, тұрақты және әдемі құралға айналады.