Ինտերֆեյսի թեմայի անջատիչ

1) Սկզբունքներ

1. Համակարգը> սկին։ Թեման ոչ միայն ֆոնի հակադարձումն է, այլ հոսանքների մի շարք (գույն, ֆոն, հակադրություն, ստվեր, պայման, նկարագրություն, գրաֆիկա)։

2. System-first. Լռելյայն 'Մոսկվան («wwww.fers-color-scheme»), որը հնարավորություն ունի ձեռքով ընտրել Light/Dark/High-Drance։

3. Հակադրություն լռելյայն։ Նպատակը WCAG AA-ն է, փոքր տեքստի/կարևոր պիտակների համար AAA-ն։

4. Ոչ մի բռնկում։ Մենք օգտագործում ենք թեման մինչև ռենդեր (inron-group), իսկ անցումները ուշադիր անում են։

5. Ռուսական բրենդի։ Ստատուսների ակցենտներն ու սեմանտիկան հիշատակվում են բոլոր թեմաներում։

2) Ռեժիմներ և սցենարներ

Light - ցերեկային սցենարներ/ստացիոնար ձևեր/երկար կարդալ։

Dark - երեկո/ցածր լուսավորություն/Live-խաղեր; նվազեցնում է բլոկները։

Շվեյցարիան հետևում է OS/զննարկչին («wwww.fers-color-scheme»)։

High-Drance-ը բարձր հակադրություն է և զարդերի նվազեցում (համեղ reduce motion)։

Seasonal/Promo (opmo) - ռուսական թեմայի վերևում մրցույթի/ivent-ի տակ (չի կոտրում)։

3) Տոկենի ճարտարապետությունը

Մենք կառուցում ենք սեմանտիկ հոսանքներ, ոչ թե ուղիղ գույներ

css
:root {
/ semantics/
--bg:    hsl(0 0% 99%);
--bg-elev:  hsl(0 0% 100%);
--fg:    hsl(220 15% 15%);
--muted:   hsl(220 10% 45%);
--accent: hsl (260 95% 60%) ;/brand accent/
--success:  hsl(152 55% 40%);
--warning:  hsl(36 85% 45%);
--danger:  hsl(0 75% 50%);
--border:  hsl(220 10% 90%);
--focus:   hsl(260 95% 60% /.6);
--shadow:  0 6px 24px hsl(220 20% 10% /.08);

/ typography/radii/
--radius: 12px;
--lh: 1. 4;
}
:root[data-theme="dark"]{
--bg:   hsl(220 18% 10%);
--bg-elev: hsl(220 18% 14%);
--fg:   hsl(0 0% 96%);
--muted:  hsl(220 10% 70%);
--accent: hsl (260 95% 65%) ;/slightly lighter in the dark/
--border: hsl(220 14% 22%);
--shadow: 0 8px 28px hsl(220 50% 2% /.6);
}
:root[data-theme="hc"]{
/ high-contrast: simple pairs, high Lc/
--bg: #000; --bg-elev:#000; --fg:#fff; --muted:#fff;
--accent:#00E; --success:#0F0; --warning:#FF0; --danger:#F00;
--border:#fff; --focus:#0FF;
}

Կանոն 'բաղադրիչները օգտագործում են միայն սեմանտիկ հոսանքները։

4) Դետեկտորը և ընտրության պահպանումը

html
<script>
(function(){
const saved = localStorage. getItem('theme'); // 'light'    'dark'    'hc'    'system'    null const sys = window. matchMedia('(prefers-color-scheme: dark)'). matches? 'dark': 'light';
const theme = saved && saved!=='system'? saved: sys;
document. documentElement. setAttribute('data-theme', theme);
})();
</script>

UI-անջատիչը ՝ «Light/Dark/Moscow/High-Drance»։ «J» ընտրելիս մի պահեք հատուկ գույնը, միայն դրոշը։ Լսեք ՕՀ-ի փոփոխությունները

js matchMedia('(prefers-color-scheme: dark)'). addEventListener('change', e=>{
if(localStorage. getItem('theme')==='system'){
document. documentElement. setAttribute('data-theme', e. matches? 'dark': 'light');
}
});

5) Լողացող անցումներ առանց FOUC

Կիրառեք թեման մինչև CSS-ի բեռնումը (inault-ջութակը)։

Թեմայի անիմացիաները կարճ են և միայն «color/background/border-color» (120-200 ms), բայց ոչ առաջին ռենդերի ժամանակ

css
@media (prefers-reduced-motion: no-preference){
html. theme-ready { transition: color. 18s, background-color. 18s, border-color. 18s; }
}

Դիմումից հետո ավելացրեք "class =" theme-ready "։

6) Բաղադրիչներ և վիճակներ

Տեքստը/իկոնիկները 'AA-ի հակադրություն։ տեքստը 4-ից ցածր չէ։ 5: 1 (պարանոցում հեշտ է «ծաղկում»)։

Դաշտեր/քարտեր ՝ ֆոն '-bg-elev ", սահմանը' ---border", ստվեր '-shadow "։

CTA: ֆոն --accent ", տեքստը հակադրվում է (" # ff "կամ հաշվարկված)։

Վիճակը (hover/focus/action/www.abled) 'փոխեք պայծառությունը/ալֆան, և ոչ թե «լցրեք ծիածանը»։

Գրաֆիկները/sparkline: Առանձին պալիտրա light/dark; ցանցը/առանցքը ցածր է, բայց ընթերցված։

7) Պատկերներ/մեդիա/լոգոն

Իկոնիկները մոնոխրոմային են '«currentColor» -ի միջոցով (հարմարվում են տեքստի տակ)։

Բրենդերի լոգոները մի ասեք. պատրաստեք երկու տարբերակ (light/dark)։

Posters/scrinschots: հեշտ overlay (8-12%) տեքստերի կարդալու համար։

SVG 'խուսափեք «կոշտ» ծոցից, օգտագործեք var (--fg) '/' var (-accent)։

8) Հասանելիություն

Բարձր հակադրություն' առանձին ճնշում' 108-theme =» hc»։

Ֆոկուս օղակները 'միշտ տեսանելի են ("entine: 2px solid var (--focus); outline-offset: 2px`).

Մի ապավինեք գույնին։ Իկոնկա/տեքստ/pattern ստատուսների համար։

Տառատեսակներ ՝ «font-variant-numeric: tabular-nums;» գումարների/կոոֆների համար։

RTL 'թեման չի կոտրում հացահատիկը (օգտագործում ենք տրամաբանական հատկություններ)։

9) Պերֆորանսը

Գույները 'CSS custronics properties-ը արմատի վրա պարունակում է ակնթարթային փոխպատվաստում առանց բաղադրիչների ռենենդերի։

Խուսափեք ֆիլտրերի «փոխներարկումներից» () մեծ տարաների վրա։

Ծույլ փոխելով ծանր նկարները թեմայի համար (եթե անհրաժեշտ է)։

Մի պահեք մեծ պալիտրա JS-ում, թեման կառավարվում է դասարանի/դասարանի կողմից։

10) iGaming հատկությունները

Օմբուդսմենը գիշերը '«փափուկ» հակադրություն (AAA թվերի համար), փոփոխության լուսավորությունը ատելի է, առանց չափումների։

Պատասխանատու խաղ 'հիշեցումներ և հուշումներ երկու թեմաներում. առանց «թունավոր» գույների գիշերը։

Ձայներիզներ ՝ դաշտեր/ստորագրություններ/սխալներ առանց լուսավոր շեշտադրումների։ հաջողությունը/սխալը կայուն է թեմայի շուրջ։

Ծովահենները 'միայն որպես մակերեսային accent-override, մի կոտրեք հիմնական հոսանքները։

11) Snepets UI

Անջատիչ (HTML/JS)

html
<label class="theme-switch">
<span> Topic </span>
<select id="theme">
<option value = "system "> System </option>
<option value = "light "> Bright </option>
<option value = "dark "> Dark </option>
<option value = "hc"> High contrast </option>
</select>
</label>
<script>
const sel = document. getElementById('theme');
sel. value = localStorage. getItem('theme')          'system';
sel. addEventListener('change', e=>{
const v = e. target. value;
localStorage. setItem('theme', v);
if(v==='system'){
const sys = matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light';
document. documentElement. setAttribute('data-theme', sys);
} else {
document. documentElement. setAttribute('data-theme', v);
}
});
</script>

Դիմադրության ճնշումները

css
.btn{height:44px; padding:0 16px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px}
.btn--primary{background:var(--accent); color:#fff}
.card{background:var(--bg-elev); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius)}
.text-muted{color:var(--muted)}

tsx import { useEffect, useState } from 'react';
type Theme = 'light'    'dark'    'hc'    'system';
export function useTheme(){
const [theme, setTheme] = useState<Theme>(()=>localStorage. getItem('theme') as Theme          'system');
useEffect(()=>{
const apply = (t:Theme)=>{
const v = t==='system'? (matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light'): t;
document. documentElement. setAttribute('data-theme', v);
};
apply(theme);
const mql = matchMedia('(prefers-color-scheme: dark)');
const on = ()=> theme==='system' && apply('system');
mql. addEventListener('change', on);
return ()=> mql. removeEventListener('change', on);
},[theme]);
useEffect(()=> localStorage. setItem('theme', theme),[theme]);
return { theme, setTheme };
}

12) Մետրիկի

Theme adoption rate 'օգտագործողների մասնաբաժինը Dark/Windows/HC-ում։

FOUC rate 'տեսանելի «սպիտակ աճը» սկսելիս (<1%)։

Directs-ը 'հակաբեղմնավորման ուղիների քանակը։

Error visibility: Տեսահոլովակներ/կրկնություններ տարբեր թեմաների «անտեսանելի» սխալների պատճառով։

Energy impact (Altaile) 'համեմատել նստաշրջանի ժամանակը vs laite (անուղղակի մետրիկ)։

13) Anti-patterna

Inverter: wwww.ru (1) "- կոտրում է բրենդը և իմաստները։

Փոխեք գույները ուղղակիորեն տարրերում առանց հոսանքների։

Թաքցնել ֆոկուս օղակները մութ թեմայում։

Չափազանց մութ տեքստը մութ ֆոնի վրա (կամ լուսավոր լույսի վրա)։

Երկար transport ամբողջ էջի վրա (ենթահողեր)։

Արձանների «բացառիկ» գույները մի թեմայում, որը մյուսում չկա։

14) QA-chek-թերթ

Հակադրություն և ընթերցանություն

• Բոլոր տեքստերը www.AA; քննադատական կոմպոզիցիաներ/փոքրիկ տեքստը AAA-ն է։
• Սխալները/հաջողությունները/նախազգուշացումները տարբերվում են ոչ միայն գույներով։

Վարք

• Մոսկվան հարգում է «wwww.fers-color-scheme» և արձագանքում է ՕՀ-ի փոփոխությանը։
• Ոչ FOUC (թեման օգտագործվում է ռենդերի համար)։
• Թեմայի անցումը չի նետում էջերի վիճակը։

Բաղադրիչներ

• Քարտեր/ձևեր/սեղաններ օգտագործում են միայն հոսանքներ։
• Գծապատկերներն ունեն պալիտրա երկու թեմաների համար։
• Պատկերները/պատկերակները ճիշտ տեսանելի են երկու թեմաներում։

A11y

• Տեսանելի focus-ring; High-Medr.ru ռեժիմը հասանելի է։
• Հաշվի է առնվում «wwww.fers-reduced-motion»։

Պերֆորանսը

• Անցում 200 մզ; առանց գլոբալ reflow.
• Բեռնարկղերի վրա ծանր ֆիլտրեր/բլենդներ չկան։

15) Մոսկվա դիզայնի համակարգում

Theme tokens: պալիտրա, հակադրություններ, վիճակը (hover/focus/action/wwww.abled)։

Guides: Ինչպես ավելացնել նոր բրենդային շեշտադրումը առանց հակադրության ռեգրեսիայի։

Charts/Media: պլանավորված պալիտրա light/dark համար։

Patterns: Windows-first, High-Windrance, լողացող անցում առանց FOUC։

Do/Don 't: հակադարձում ֆիլտրով, inom-գույներով, անտեսանելի սխալներով/ֆոկուսով։

Live ռեզյումե

Թեմայի աշխատանքային անջատիչը + System-first + անմահ մեկնարկն է։ Գրանցեք հակադրություն, կենտրոնացրեք գույները, հարգեք «www.fers-color-scheme» և reduce-motion, պահեք օգտագործողի ընտրությունը և խուսափեք ծանր ազդեցություններից։ Այդ ժամանակ UI-ն մնում է ընթերցված և ճանաչելի ցանկացած միջավայրում 'գիշերային լայվ խաղից մինչև ցերեկային տոմսարկղեր և մրցույթային էկրաններ։