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% მსუბუქია, ვიდრე მსუბუქი.
• გამოიყენეთ ნაცრისფერი გრადაცია (4-5 ნაბიჯი), თავიდან აიცილეთ აბსოლუტური # 000 დიდი სივრცისთვის (გამონაკლისი - AMOLED რეჟიმი).

4) ტექსტი და კითხვა

ძირითადი ტექსტი: ღია ნაცრისფერი '# E6E8EB' on '# 0E1116' (კონტრასტი 12:1).
მეორადი ტექსტი: '# A6AEB8'; მინიშნებები - კიდევ ერთი ნაბიჯი მუქი/გამჭვირვალე.
გრძელი კითხვა: ოდნავ თბილი ჩრდილები (ამცირებს „ჰალო“).
ბმულები - აქცენტი + ხაზგასმით; ფერი - მნიშვნელობის ერთადერთი გადამზიდავი.

5) ზედაპირი, სიღრმე და მინა

Elevations: `base` → `elev1` → `elev2`; თითოეული ფენა მსუბუქია/თბილია 2-4% -ით.
ჩრდილები - რბილი, ფართო, დაბალი გაუმჭვირვალე; თავიდან აიცილოთ „მანათობელი“ კონტურები.
ტრანსმისიის პანელები (ბლური) მიზანშეწონილია ზომიერად; უზრუნველყავით ტექსტის კონტრასტი სუბსტრატთან.
გამყოფები - ნახევრად ტოქსიკური საზღვრები „-bd-soft“ ან ძლივს შესამჩნევი „ქაირები“.

6) მდგომარეობა და ყურადღება

Hover: + 2-3% მსუბუქია, ვიდრე ფონი; აქტიური: − 2-3% (მუქი).
Focus: მკაფიო ბეჭედი (მაგალითად, 'outline: 2px solid # 6EA0FF; outline offset: 2px; '), ასევე ჩანს აქცენტის ღილაკებზე.
Disabled: შეამცირეთ კონტრასტი ფრთხილად; ნუ დაეცემით ტექსტის კითხვის დონეზე.

7) ღილაკები, ფორმები და ცხრილები

Primary: fon '-accent', ტექსტი '# 0E1116'.
მეორე: ფონ '-bg-elev1', ბორდერი '-bd-strong', ტექსტი '-fg-primary'.
შეყვანის ველები: ფონ '-bg-elev1', აქცენტით - აქცენტის ბორდერი; placeholder მუქი, მაგრამ წაიკითხეთ.
ცხრილები: ზებრა ფონი ძლივს შესამჩნევია, ხაზების გამოყოფა ჰოვერზე - + 2-3% მსუბუქია.

8) სურათები, ლოგოები და ფოტოები

ლოგოები და პიქტოგრამები - ინვერსიული ვერსიები ბნელზე; თავიდან აიცილეთ თხელი მსუბუქი ხაზები გაჯერებულ ფონებზე.
ფოტო: დაამატეთ მუქი ნიღაბი (40-60%) კონტრასტული სათაურებისთვის.
ხატები: ერთი სისქე, წრე + შევსება - მდგომარეობით, არა „შხამიანი“ ფერები.

9) ვიზუალიზაცია ბნელ თემაში

რიგების ფერები - ზომიერი გაჯერება; მინიმუმ 5 განსხვავებული ტონი.
ბადეები და ღერძი - გაჟღენთილი (ალფა 20-30%), ხელმოწერები - „--fg-muted“.
სურათები/ინციდენტები - ნათელი, მაგრამ წაკითხული; ხაზს უსვამს ფორმას/მარკერს, არა მხოლოდ ფერით.
ცარიელი მონაცემები/ლაგი არის რბილი „ნისლები“ და არა თეთრი ველები.

10) პროდუქტიულობა და ბატარეა

OLED ნამდვილად დაზოგავს სუფთა შავ (# 000) - გამოიყენეთ AMOLED რეჟიმში მომხმარებლის ვარიანტის მიხედვით.
მოერიდეთ უწყვეტ დიდ სანთლებს/ბლურს სუსტი GPU- ზე.
პატივისცემა 'prefers-reduced-motion': გამარტივდეს ანიმაციები/გადასვლები.

11) ქცევა და შეცვლა

ნაგულისხმევი - მიჰყევით „პრეფერერს-კოლორ-სკოლას“.
მიეცით მომხმარებელს მკაფიო შეცვლა (მსუბუქი/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- ის კითხვის ნიშანი.
აღქმა: აბი ტესტი „თვალების დაღლილობა“ და ღამით დაშვების შეცდომები.
სპექტაკლი: RUM მეტრიკა (INP/CLS) მუქი თემის ჩართვის შემდეგ; GPU დატვირთვა (ბლურ/ჩრდილის ეფექტები).

16) ხარისხის მეტრიკა

Contrast Violations/1k ელემენტები (მიზანი: 0).
კომპლექსის ფასი „ძალიან მუქი/ნათელია“.
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 გამეორება)

Iteration 1 - საძირკველი (1-2 კვირა)

პალიტრა/ნიშნები, ძირითადი ზედაპირები (base/elev1/elev2), ტექსტი/საზღვრები, ღილაკები/ველები/ცხრილი, თემის შეცვლა.

განმეორება 2 - დეტალიზაცია (3-4 კვირა)

გრაფიკა და ილუსტრაციები ბნელში, ფოტოში ნიღბები, ფოკუსი/მდგომარეობა, ანიმაცია, მხედველობითი მოძრაობის გათვალისწინებით, პერფექტორული აუდიტის გათვალისწინებით.

გამეორება 3 - ოპტიმიზაცია (მუდმივად)

AMOLED რეჟიმი, როგორც ვარიანტი, თხელი კონტრასტის კონფიგურაცია, იუზაბილიტის ტესტები ღამით, RUM შედარება Light vs Dark, რეგულარული ბრენდი/UX აუდიტები.

19) მინი-FAQ

გააკეთე წმინდა შავი ფონი?
UI- სთვის - უკეთესი ღრმა მუქი ნაცრისფერი; სუფთა # 000 დატოვეთ ვარიანტი „AMOLED რეჟიმი“.

აუცილებელია აქცენტების გაჯერების გაზრდა?
სიბნელეში, პირიქით, ისინი ოდნავ ანათებენ და ამცირებენ გაჯერებას ისე, რომ არ „ანათებენ“.

რა შეიძლება ითქვას ბანერების გამოსახულებებზე?
დაამატეთ მუქი სუბსტრატი/ნიღაბი, შეამოწმეთ ტექსტისა და ლოგოს კონტრასტი.

შედეგი

ბნელი თემა არ არის ფერების ინვერსია, არამედ ცალკეული დიზაინის რეჟიმი: გააზრებული პალიტრა, ზედაპირის დონე, კითხვა, სწორი სახელმწიფოები, ადაპტირებული გრაფიკა და მედია, აგრეთვე სისტემური პარამეტრების პატივისცემა. დაეყრდნო ნიშნებს, აკონტროლეთ კონტრასტი და სპექტაკლი - და Dark Mode გახდება მოსახერხებელი, სტაბილური და ლამაზი ინსტრუმენტი ღამის და დღის მომხმარებლებისთვის.