डार्क मोड और दृश्य आराम
1) एक अंधेरा विषय क्यों
कम रोशनी, कम चमक और "हल्की चमक" में आंखों का आराम।
ऊर्जा: डार्क स्क्रीन OLED/AMOLED पर कम बैटरी खर्च करते हैं।
डेटा पर ध्यान केंद्रित करें: सामग्री पर ध्यान दें, पृष्ठभूमि पर नहीं
उपयोगकर्ता की उम्मीदें: सिस्टम फ्लैग 'पसंद-रंग-योजना' वास्तविक मानक है।
2) सिद्धांत
1. यूआई सतहों के लिए डार्क ग्रे बैकग्राउंड> शुद्ध काला (बेहतर पढ़ ने और उन्नयन)।
2. सामग्री में विपरीत: "काले रंग में सफेद" नहीं, बल्कि लंबे ग्रंथों के लिए नरम रंग।
3. सावधान "चमक": बैकलाइट्स/लहजे मफल्ड हैं, लेकिन अलग हैं।
4. छाया ≠ गहराई: हम प्रकाश/धुंधली छाया के साथ काम करते हैं, न कि तीव्र विपरीत।
5. उपलब्धता: WCAG AA (न्यूनतम), दृश्यमान फोकस और समझने योग्य राज्य।
6. सिस्टम सेटिंग्स प्राथमिक हैं: ऑटो-स्विचिंग और "कम आंदोलन"।
3) पैलेट और टोकन (उदाहरण)
JSON टोकन: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% हल्के होते हैं।
- बड़े क्षेत्रों (अपवाद - AMOLED मोड) के लिए पूर्ण # 000 से बचते हुए ग्रेस्केल (4-5 चरण) का उपयोग करें।
4) पाठ और पढ़ ने योग्यता
बॉडी टेक्स्ट: लाइट ग्रे '# E6E8EB' से '# 0E116' (कंट्रास्ट ~ 12:1)।
द्वितीयक पाठ: '# A6AEB8'; संकेत - एक कदम गहरा/अधिक पारदर्शी।
लंबे समय तक पढ़ ना: थोड़ा गर्म रंग ("प्रभामंडल" को कम करें)।
लिंक - उच्चारण + डिफ़ॉल्ट रूप से रेखांकित करें; रंग ≠ अर्थ का एकमात्र माध्यम।
5) सतहों, गहराई और कांच
ऊंचाई: 'आधार' → 'ऊंचाई 1' → 'ऊंचाई 2'; प्रत्येक परत 2-4% तक हल्की/गर्म होती है।
छाया कम अपारदर्शिता के साथ नरम, चौड़ी होती है; "चमकते" स्ट्रोक से बचें।
पारभासी पैनल (धब्बा) मध्यम रूप से उपयुक्त हैं; अंडरले के साथ पाठ के विपरीत।
परिसीमन अर्ध-पतली सीमा '--बीडी-सॉफ्ट' या बमुश्किल "वारिस" दिखाई देते हैं।
6) राज्य और फोकस
होवर: + 2-3% हल्का पृष्ठभूमि; सक्रिय: − 2-3% (गहरा)।
फोकस: स्पष्ट अंगूठी (उदा। 'आउटलाइन: 2px ठोस # 6EA0FF; रूपरेखा-ऑफसेट: 2px; '), उच्चारण बटन पर दिखाई देता है।
अक्षम: कंट्रास्ट को सावधानीपूर्वक पाठ के लिए पढ़ ने योग्य स्तर से नीचे न आएं।
7) बटन, फॉर्म और टेबल
प्राथमिक: पृष्ठभूमि '-- उच्चारण', पाठ '# 0E116'।
द्वितीयक: पृष्ठभूमि '--bg-elight 1', सीमा '--bd-मजबूत', पाठ '--fg-primary'।
इनपुट फ़ील्ड: पृष्ठभूमि '--bg-elive', फोकस के साथ - उच्चारण सीमा; प्लेसहोल्डर सुस्त है, लेकिन पढ़ ने योग्य है।
टेबल: ज़ेबरा पृष्ठभूमि मुश्किल से ध्यान देने योग्य है, होवर में पंक्ति चयन + 2-3% हल्का है।
8) चित्रण, लोगो और तस्वीरें
लोगो और पिक्टोग्राम - अंधेरे पर उलटा संस्करण; संतृप्त पृष्ठभूमि पर पतली, हल्की रेखाओं से बचें।
फोटो: शीर्ष पर विपरीत हेडर के लिए एक डार्क मास्क (40-60%) जोड़ें।
प्रतीक: एकल मोटाई, समोच्च + भरना - स्थिति से, "जहरीले" रंग नहीं।
9) एक अंधेरे विषय में डेटा दृश्य
पंक्तियों के रंग मध्यम संतृप्ति के हैं; कम से कम 5 अलग-अलग स्वर।
ग्रिड और कुल्हाड़ियों - म्यूटेड (अल्फा 20-30%), हस्ताक्षर - '--fg-muted'।
एनोटेशन/घटनाएं ज्वलंत हैं लेकिन पढ़ ने योग्य हैं; आकार/मार्कर के साथ रेखांकित करें, न कि केवल रंग।
रिक्त डेटा/लैग - सॉफ्ट "फॉग्स", सफेद फ़ील्ड नहीं।
10) प्रदर्शन और बैटरी
OLED वास्तव में शुद्ध काला (# 000) बचाता है - उपयोगकर्ता विकल्प के अनुसार AMOLED मोड में उपयोग करें।
कमजोर जीपीयू पर ठोस बड़ी चमक/धुंधला से बचें।
'पसंद-कम-गति' का सम्मान करें: एनिमेशन/संक्रमण सरल करें।
11) व्यवहार और स्विचिंग
डिफ़ॉल्ट 'preferers-color-scheme' का अनुसरण करना है.
उपयोगकर्ता को एक स्पष्ट स्विच (लाइट/डार्क/सिस्टम) दें, चयन (कुकी/लोकसभा) रखें।
थीम बदलते समय - कोई चमक नहीं: रेंडरिंग से पहले थीम क्लास पूर्व जोड़ें।
स्निपेट: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 (बड़ा)।
केवल रंग में स्थिति एनकोड नहीं करें: प्रतीक/पैटर्न/हस्ताक्षर का उपयोग करें।
फोकस स्टाइल और कीबोर्ड नेविगेशन अनिवार्य हैं।
वॉयसओवर/टॉकबैक: भूमिकाएँ, लेबल, टैबा कतार।
13) एंटी-पैटर्न
बड़े क्षेत्रों में बिल्कुल काले रंग की पृष्ठभूमि पर बिल्कुल सफेद पाठ - "टिमटिमाती" और थकान।
अंधेरे पर नियॉन लहजे - "हल्का शोर।"
उच्च विपरीत छाया (हार्ड बॉर्डर के साथ काले पर ग्रे)।
फोटो में पारदर्शी पाठ बिना मुखौटा के।
लुप्त होते प्लेसहोल्डर (अल्फा बहुत कम)।
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: कंट्रास्ट चेकर, कीबोर्ड पास, प्लेसहोल्डर्स की पढ़ाई।
धारणा: रात में एब-टेस्ट "आई थकान" और इनपुट त्रुटियां।
प्रदर्शन: एक अंधेरे विषय को शामिल करने के बाद RUM मेट्रिक्स (INP/CLS); GPU लोड (धुंधला/छाया प्रभाव)।
16) गुणवत्ता मैट्रिक्स
कंट्रास्ट Violations/1k तत्व (लक्ष्य: → 0)।
"बहुत अंधेरा/उज्ज्वल" पर शिकायत दर।
रात सत्र पूरा होना (सत्र 22: 00-06: 00 द्वारा व्यवहार मैट्रिक्स)।
डार्क मोड बनाम लाइट में INP/CLS p75 (मूल से भी बदतर नहीं)।
ऑप्ट-इन डार्क मोड और एक थीम चुनने वाले उपयोगकर्ताओं का प्रतिधारण।
17) चेकलिस्ट लॉन्च करें
- 4-5 सतह के स्तर के साथ डार्क थीम पैलेट
- पाठ/प्रतीक/सीमाओं का कंट्रास्ट WCAG AA से मेल खाता है
- दृश्यमान फोकस शैली और राज्य (होवर/सक्रिय/अक्षम)
- लोगो/प्रतीक/तस्वीरें अनुकूलित, फोटो जोड़ा में मास्क
- रेखांकन - मौन ग्रिड, पढ़ ने योग्य कैप्शन, गैर-जहरीली पंक्तियाँ
- लाइट/डार्क/सिस्टम स्विच, "फ्लैश" के बिना चयन की बचत
- 'पसंद-रंग-योजना' और 'पसंद-कम-गतिशील' के लिए सम्मान
- RUM/perf-dashbord, प्रतिगमन अलर्ट
18) कार्यान्वयन योजना (3 पुनरावृत्ति)
पुनरावृत्ति 1 - फाउंडेशन (1-2 सप्ताह)
पैलेट/टोकन, बेस सतहों (बेस/एलिवेट 1/एलिवेशन 2), टेक्स्ट/बॉर्डर, बटन/फील्ड/टेबल, थीम स्विच।
पुनरावृत्ति 2 - ग्रेन्युलरिटी (3-4 सप्ताह)
अंधेरे में रेखांकन और चित्र, फोटो में मुखौटे, फोकस/राज्य, कम गति, पर्फ-ऑडिट को ध्यान में रखते हुए एनिमेशन।
पुनरावृत्ति 3 - अनुकूलन (सतत)
एक विकल्प के रूप में AMOLED मोड, ठीक-ठीक ट्यूनिंग विरोधाभास, रात में प्रयोज्य परीक्षण, लाइट बनाम डार्क आरयूएम तुलना, नियमित ब्रांड/यूएक्स ऑडिट।
19) मिनी-एफएक्यू
क्या मुझे शुद्ध काली पृष्ठभूमि बनानी चाहिए?
यूआई के लिए, एक गहरे गहरे भूरे रंग बेहतर है; शुद्ध # 000 को "AMOLED मोड" विकल्प के साथ छोड़ दें।
क्या मुझे लहजे की संतृप्ति बढ़ाने की आवश्यकता है?
अंधेरे में - आमतौर पर, इसके विपरीत, थोड़ा चमकता है और संतृप्ति को कम करता है ताकि "चमक" न हो।
बैनर छवियों के बारे में क्या?
डार्क बैकग्राउंड/मास्क जोड़ें, पाठ और लोगो के कंट्रास्ट की जाँच करें।
कुल
डार्क थीम एक रंग उलटा नहीं है, लेकिन एक अलग डिजाइन मोड है: एक विचारशील पैलेट, सतह का स्तर, पढ़ाई, सही अवस्थाएं, अनुकूलित ग्राफिक्स और मीडिया, और सिस्टम सेटिंग्स के लिए सम्मान। टोकन, नियंत्रण विपरीत और प्रदर्शन पर दुबला - और डार्क मोड रात और दिन उपयोगकर्ताओं के लिए एक सुविधाजनक, स्थिर और सुंदर उपकरण है।