इंटरफ़ेस थीम टॉगल करें

1) सिद्धांत

1. तंत्र> त्वचा। थीम केवल एक पृष्ठभूमि उलटा नहीं है, बल्कि टोकन का एक सेट (रंग, पृष्ठभूमि, विपरीत, छाया, राज्यों, चित्र, रेखांकन) है।

2. सिस्टम-पहला। डिफ़ॉल्ट रूप से - सिस्टम ('प्रीफ़र्स-कलर-स्कीम') मैन्युअल रूप से लाइट/डार्क/हाई-कंट्रास्ट चुनने की क्षमता के साथ।

3. डिफ़ॉल्ट कंट्रास्ट। लक्ष्य - WCAG AA, छोटे पाठ/महत्वपूर्ण लेबल के लिए - AAA।

4. कोई प्रकोप नहीं। हम प्रतिपादन (इनलाइन स्क्रिप्ट) से पहले थीम को लागू करते हैं, और संक्रमण को सावधानीपूर्वक बनाते हैं।

5. ब्रांड स्थिरता। स्टेटस के लहजे और शब्दार्थ सभी विषयों में संरक्षित हैं।

2) मोड और परिदृश्य

प्रकाश - दिवसीय लिपियां/भुगतान प्रपत्र/दीर्घकालिक

अंधेरा - शाम/कम रोशनी/लाइव मैच; चकाचौंध कम करता है।

सिस्टम - ओएस/ब्राउज़र ('प्रीफ़र्स-कलर-स्कीम') का पालन करें।

उच्च-कंट्रास्ट - विपरीत और कम से कम गहने (इंक। कम गति)।

मौसमी/प्रोमो (वैकल्पिक) - टूर्नामेंट/इवेंट के लिए मूल विषय पर (टोकन नहीं तोड़ ता है)।

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>

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
@media (prefers-reduced-motion: no-preference){
html. theme-ready { transition: color. 18s, background-color. 18s, border-color. 18s; }
}

अनुप्रयोग को बढ़ाने के बाद,' वर्ग =" थीम-रेडी" जोड़ें।

6) घटक और राज्य

पाठ/प्रतीक: कंट्रास्ट ≥ AA; द्वितीयक पाठ 4 से कम नहीं। 5:1 (आसानी से अंधेरे में "फीका")।

फ़ील्ड/कार्ड: पृष्ठभूमि '--bg-elev', सीमा '--border', छाया '-shadow'।

CTA: पृष्ठभूमि '-- एक्सेंट', कंट्रास्ट टेक्स्ट ('# fff' या गणना की गई).

राज्य (होवर/फोकस/सक्रिय/अक्षम): चमक/अल्फा को बदलें, न कि "इंद्रधनुष को चमकाएं।"

ग्राफिक्स/स्पार्कलाइन: प्रकाश/अंधेरे के लिए अलग पैलेट; ग्रिड/कुल्हाड़ियाँ कम विपरीत हैं लेकिन पढ़ ने योग्य हैं।

7) छवियाँ/मीडिया/लोगो

मोनोक्रोम प्रतीक - ' रंग' के माध्यम से (पाठ में समायोजित करें)।

ब्रांड लोगो को उलटा न करें; दो संस्करण (प्रकाश/अंधेरा) तैयार करें।

पोस्टर/स्क्रीनशॉट: ग्रंथों की पढ़ाई के लिए अंधेरे में आसान ओवरले (8-12%)।

SVG: "हार्ड" भरने से बचें, var 'var (--fg) '/' var (-accent)' का उपयोग करें।

8) सामर्थ्य

उच्च विपरीत: अलग प्रीसेट' डेटा-थीम =" hc"।

फ़ोकस रिंग्स: हमेशा दिखाई देता है ('रूपरेखा: 2px ठोस var (--focus); रूपरेखा-ऑफसेट: 2px ')।

रंग पर भरोसा न करें। स्टेटस के लिए प्रतीक/पाठ/पैटर्न।

फ़ॉन्ट: 'फ़ॉन्ट-वेरिएंट-न्यूमेरिक: टैबुलर-नम्स;' रकम/कारकों के लिए।

RTL: थीम मिररिंग को नहीं तोड़ ती है (हम तार्किक गुणों का उपयोग करते हैं)।

9) प्रदर्शन

रंग - CSS कस्टम गुण मूल → तत्काल पुन: उपयोग पर घटक नाम बदले बिना।

बड़े कंटेनरों पर 'इनवर्ट ()' फिल्टर के साथ "रीपेंटिंग" छवियों से बचें।

विषय के लिए भारी चित्रण का आलसी प्रतिस्थापन (यदि आवश्यक हो)।

जेएस में बड़े पैलेट संग्रहीत न करें - विषय वर्ग/विशेषता द्वारा नियंत्रित है।

10) iGaming की बारीकियाँ

रात में लाइव कारक: "सॉफ्ट" कंट्रास्ट (संख्याओं के लिए एएए), कारक में परिवर्तन को उजागर करना, बिना झिलमिलाहट के, विनम्र है।

जिम्मेदार नाटक: अनुस्मारक और संकेत दोनों विषयों में पढ़ ने योग्य हैं; रात में "जहरीले" फूलों के बिना।

बॉक्स ऑफिस: चमकते लहजे को थकाए बिना फ़ील्ड/हस्ताक्षर/त्रुटियाँ; सफलता/त्रुटि विषय पर स्थिर हैं।

टूर्नामेंट "खाल": केवल सतही उच्चारण-ओवरराइड के रूप में, बुनियादी टोकन को न तोड़ें।

11) स्निपेट्स यूआई

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) मेट्रिक्स

थीम गोद लेने की दर: डार्क/सिस्टम/एचसी पर उपयोगकर्ताओं का हिस्सा।

FOUC दर: प्रारंभ में दृश्यमान "सफेद फट" के साथ अनुपात (<1%)।

कंट्रास्ट दोष: रिलीज द्वारा कंट्रास्ट बग की संख्या।

त्रुटि दृश्यता: विभिन्न विषयों में "अदृश्य" त्रुटियों के कारण क्लिक/पुनरावृत्ति.

ऊर्जा प्रभाव (मोबाइल): अंधेरे बनाम लाइट (अप्रत्यक्ष मीट्रिक) में सत्र के समय की तुलना।

13) एंटी-पैटर्न

सभी 'फ़िल्टर: उलटा (1)' - ब्रांड और अर्थों को तोड़ ता है।

बिना टोकन के घटकों में सीधे रंग बदलें।

फोकस छल्ले को अंधेरे प्रसंग में छुपाएँ।

पाठ एक अंधेरे पृष्ठभूमि पर बहुत अंधेरा है (या एक हल्की पृष्ठभूमि पर प्रकाश)।

पूरे पृष्ठ (मंदी) के लिए लंबा संक्रमण।

एक विषय में "अनन्य" स्थिति रंग जो दूसरे में नहीं हैं।

14) क्यूए चेकलिस्ट

कंट्रास्ट और रीडेबिलिटी

• सभी एए ≥ ग्रंथ; महत्वपूर्ण लेबल/छोटा पाठ ≥ AAA।
• त्रुटियां/सफलता/चेतावनी न केवल रंग में विचारणीय हैं।

व्यवहार

• सिस्टम 'पसंद-रंग-योजना' का सम्मान करता है और ओएस परिवर्तनों का जवाब देता है।
• कोई FOUC नहीं (थीम रेंडरिंग से पहले लागू होती है)।
• प्रसंग को बदलना पृष्ठ स्थिति रीसेट नहीं करता है।

घटक

• कार्ड/फॉर्म/टेबल केवल टोकन का उपयोग करते हैं।
• ग्राफिक्स में दोनों विषयों के लिए पैलेट हैं।
• लोगो/प्रतीक दोनों विषयों में सही ढंग से दिखाई दे रहे हैं।

A11y

• दृश्यमान फोकस-रिंग; उच्च-कंट्रास्ट मोड उपलब्ध है।
• 'प्रीफर्स-कम-मोशन' पर विचार करें।

निष्पादन

• संक्रमण ≤ 200 एमएस; वैश्विक रिफ्लो के बिना।
• कंटेनरों पर कोई भारी फिल्टर/मिश्रण नहीं।

15) डिजाइन प्रणाली में प्रलेखन

थीम टोकन: पैलेट, कंट्रास्ट, स्टेट (होवर/फोकस/सक्रिय/अक्षम)।

गाइड: बिना विपरीत के एक नया ब्रेंडो उच्चारण कैसे जोड़ें।

चार्ट/मीडिया: प्रकाश/अंधेरे के लिए पूर्वनिर्धारित पैलेट।

पैटर्न: सिस्टम-फर्स्ट, हाई-कंट्रास्ट, FOUC के बिना चिकनी स्विच।

Do/Dont: फ़िल्टर उलटा, इनलाइन रंग, अदृश्य त्रुटियाँ/फ़ोकस.

संक्षिप्त सारांश

वर्किंग थीम स्विच सिमेंटिक टोकन + सिस्टम-फर्स्ट + टिमटिमाती शुरुआत है। इसके विपरीत कब्जा करें, रंगों को केंद्रीकृत करें, 'पसंद-रंग-योजना' और कम-गति का सम्मान करें, उपयोगकर्ता की पसंद को संग्रहीत करें और भारी प्रभावों से बचें। फिर UI किसी भी सेटिंग में पढ़ ने योग्य और पहचानने योग्य रहता है - एक नाइट लाइव मैच से लेकर एक दिन बॉक्स ऑफिस और टूर्नामेंट स्क्रीन तक।