How to implement light or dark modes in CSS

सीएसएस विनिर्देश हमेशा विकसित होता है। सीएसएस में नई सुविधाओं को लागू करने की प्रक्रिया जटिल है, लेकिन सरलीकृत संस्करण यह है कि सीएसएस कार्य समूह विनिर्देश में जोड़े जाने वाले नए तत्वों पर निर्णय लेता है। यह तब इन नए तत्वों को लागू करने के लिए ब्राउज़र तक है, और ब्राउज़र उन कार्यों को लागू करने के लिए चुनते हैं, यही कारण है कि अब हमारे पास नई सुविधाओं के लिए समर्थन का मेल नहीं है। हालांकि यह कभी-कभी परेशान हो सकता है, यह पूर्ण विनिर्देश को लागू करने वाले ब्राउज़र की तुलना में ऐसा करने का एक बेहतर तरीका है, जैसा कि हमने वेब के शुरुआती दिनों में देखा था। यदि आप अपनी साइट के बारे में अपनी पूरी क्षमता के लिए चिंतित हैं, तो एक सहायक के समर्थन को सूचीबद्ध करें वेब होस्टिंग सर्विस।

यह सब बहुत ज्यादा काम की तरह है? चीजों को सरल रखें वेबसाइट निर्माता ।

सीएसएस वर्किंग ग्रुप सभी प्रमुख ब्राउज़र विक्रेताओं और ऐप्पल और एडोब जैसी अन्य तकनीक कंपनियों के सदस्यों से बना है। ऐप्पल ने हाल ही में मैकोज़ का अपना नया संस्करण लॉन्च किया है, ब्राउज़र में अपने स्नैज़ी के नए डार्क मोड का पता लगाने का एक तरीका चाहता था। ऐसा करने के लिए, ऐप्पल ने एक नए स्तर 5 मीडिया क्वेरी के लिए विनिर्देशन को सिफारिश की।

 @Media (प्राथमिकता-रंग योजना: प्रकाश | अंधेरा)
{...} 

इस मीडिया क्वेरी का उपयोग करके, हम यह पता लगा सकते हैं कि उपयोगकर्ता वर्तमान में ओएस में प्रकाश या डार्क मोड का उपयोग कर रहा है या नहीं। फिलहाल यह केवल सफारी प्रौद्योगिकी पूर्वावलोकन 69 और उससे ऊपर समर्थित है, लेकिन अन्य ब्राउज़रों को बहुत पीछे नहीं होना चाहिए।

[3 9] सीएसएस पद्धतियों के लिए एक वेब डिजाइनर की गाइड

इसका परीक्षण करने के लिए आपको Mojave 10.14 (Macos) में अपग्रेड करने की आवश्यकता होगी और सिस्टम प्राथमिकताओं में अंधेरे उपस्थिति का चयन किया है। विभिन्न विषयों को लागू करने के लिए हम इस नए मीडिया क्वेरी का उपयोग करने के कुछ तरीके हैं। हम अब इस ट्यूटोरियल में उनमें से कुछ का पता लगाएंगे।

01. पेज सेट अप करें [4 9]

शुरू करने के लिए, हमें शैली में कुछ HTML तत्व बनाने की आवश्यकता है, इसलिए हम कोडपेन पर एक नई कलम बनाकर और कुछ तत्व जोड़कर शुरू करेंगे। हम इसे केंद्रित करने के लिए, और कुछ शीर्षलेख और पाठ के लिए एक कंटेनर जोड़ देंगे। सीएसएस में घोंसले का उपयोग करने के लिए हम एसएएसएस का उपयोग करने के लिए सीएसएस सेट करेंगे।

 & lt; div class = "सामग्री-कंटेनर" & gt;
& lt; h1 & gt; एक & lt; / h1 & gt;
& lt; h2 & gt; शीर्षक दो & lt; / h2 & gt;
& lt; मानव संसाधन और जीटी;
& lt; p & gt; ... & lt; / p & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt; 

02. स्टाइल बुनियादी तत्व [4 9]

इसके बाद हम कुछ बुनियादी शैलियों को जोड़ देंगे और हमारे पृष्ठ को थोड़ा अच्छा दिखने के लिए Google से कुछ फ़ॉन्ट्स शामिल करेंगे। हम अपने सभी बुनियादी तत्वों को स्टाइल करेंगे, नए फ़ॉन्ट आकार, रंग और फ़ॉन्ट्स को लागू करेंगे।

 शरीर {
फ़ॉन्ट-परिवार: 'मेरिवेदर', सेरिफ़;
पृष्ठभूमि-रंग: #ededed;
रंग: # 212121;
पैडिंग: 1.618rem;
लाइन-ऊंचाई: 1.618;
फ़ॉन्ट आकार: 16px;
} 

03. स्टाइल कंटेनर [4 9]

[6 9]

इसके बाद हम सामग्री को पढ़ने के लिए एक आरामदायक लाइन लंबाई बनाने के लिए हमारे कंटेनर को स्टाइल करेंगे। हम एक पृष्ठभूमि रंग भी जोड़ देंगे और छाया छोड़ देंगे। पृष्ठ में सामग्री बॉक्स को केंद्रित करने के लिए, हम मार्जिन गुणों के बाएं और दाएं मूल्यों पर कीवर्ड 'ऑटो' का उपयोग करेंगे।

। कंटेंट-कंटेनर {
पैडिंग: 1.618rem 3.236rem;
अधिकतम चौड़ाई: 48.54rem;
मार्जिन: 3.236 रेम ऑटो;
पृष्ठभूमि-रंग: #fff;
बॉक्स-छाया: 0 0 12 पीएक्स 6 पीएक्स आरजीबीए (0,0,0,0.05);
सीमा-त्रिज्या: .269666667rem;
} 

04. हाइलाइट रंग जोड़ें [4 9]

[9 1] [9 2]

अधिकांश वेबसाइटें कहीं रंग का उपयोग करती हैं, और फिलहाल हमारे पास केवल सफेद और ग्रे होते हैं, इसलिए अब एक हाइलाइट रंग चुनते हैं और इस रंग को लागू करने के लिए एक शैली बनाते हैं। हम एक स्पैन टैग का उपयोग करके रंग लागू करेंगे, और हमारी सामग्री में कुछ हाइलाइट करने के लिए इसका उपयोग करेंगे।

 & lt; अवधि वर्ग = "पाठ - अल्फा" & gt; lorem ipsum & lt; / span & gt;
.text - अल्फा {
रंग: # सी 3423 एफ;
} 

05. मीडिया क्वेरी को लागू करें [4 9]

अब हमारे पास कुछ बुनियादी शैलियों वाला एक पृष्ठ है, आइए उन तरीकों को देखें जिन्हें हम मीडिया क्वेरी को कार्यान्वित कर सकते हैं। आइए इसे शामिल करें और हमारी कुछ शैलियों को ओवरराइड करना शुरू करें। हम शरीर की शैलियों से शुरू करेंगे।

 @Media (प्राथमिकता-रंग योजना: डार्क)
{
तन {
पृष्ठभूमि-रंग: # 111;
}
} 

06. शेष शैलियों को ओवरराइड करें [4 9]

अब जब हम मीडिया क्वेरी काम कर रहे हैं और हमारे शरीर पृष्ठभूमि रंग बदल गए हैं, तो हमें अपनी शेष शैलियों को ओवरराइड करने की आवश्यकता है।

। कंटेंट-कंटेनर
{
सफ़ेद रंग;
पृष्ठभूमि-रंग: # 212121;
}
.text - अल्फा {
रंग: # 50a8d8;
} 

07. रखरखाव [4 9]

जबकि हमने अभी जो किया है, वह हमारे डेमो के लिए पूरी तरह से काम करता है और छोटी वेबसाइटों पर बनाए रखा जा सकता है, यह विधि एक बड़ी परियोजना पर प्रबंधन करने के लिए एक दुःस्वप्न होगी, जिसमें कई अलग-अलग तत्वों को ओवरराइड करने की आवश्यकता है। हम उपरोक्त उदाहरण में कैस्केड का भारी उपयोग भी कर रहे हैं, जबकि सभी तत्वों को लक्षित करने के लिए एक बड़ी प्रणाली को अधिक विशिष्टता की आवश्यकता हो सकती है।

08. एक और दृष्टिकोण ले लो [4 9]

तो हम समस्या से कैसे निपट सकते हैं? आइए सीएसएस फ़िल्टर देखें। सीएसएस फ़िल्टर पर हम जिन मूल्यों का उपयोग कर सकते हैं उनमें से एक 'उलटा' है, इसलिए हम इसे एचटीएमएल में लागू कर सकते हैं और सभी रंगों को उलटा कर सकते हैं, जिससे हमें 'डार्क मोड' मिल सकता है।

 @media (पसंद-रंग-योजना: डार्क) {
एचटीएमएल {
फ़िल्टर: उलटा (100%);
}
} 

09. छवियां जोड़ें [4 9]

जबकि फ़िल्टर विधि हमारे दस्तावेज़ में मौजूद सामग्री के साथ काम करती है, फिर भी यह बहुत अच्छा नहीं दिखता है - उदाहरण के लिए, हमारे बॉक्स छाया में भी उलटा हुआ है, जो काफी अजीब दिखता है। हमने शैलियों पर नियंत्रण खो दिया है, जो कि रंगीन पृष्ठभूमि होने पर भी एक बड़ी समस्या बन जाती है। छवियों को शामिल करने पर विचार करने के लिए हमारे पास एक पूरी नई समस्या भी है। चलो देखते हैं कि जब हम अपने पृष्ठ पर एक छवि जोड़ते हैं तो क्या होता है।

10. कस्टम गुणों का उपयोग करें [4 9]

हमने जिन तरीकों का पता लगाया है, वह अब तक हमें शैलियों पर नियंत्रण खोने का कारण बनता है या यह सुनिश्चित करने के लिए बहुत सारे रखरखाव की आवश्यकता होती है कि सब कुछ अंधेरे मोड में अपडेट हो। एक और तरीका है कि हम इस पर पहुंच सकते हैं: हम अपने रंगों को परिभाषित करने के लिए कस्टम गुणों का उपयोग कर सकते हैं और फिर मीडिया क्वेरी का उपयोग करके उन्हें ओवरराइड कर सकते हैं।

11. कस्टम गुण बनाएँ [4 9]

कस्टम गुणों का उपयोग करने के लिए, हम उन्हें हमारे सीएसएस के शीर्ष पर 'के अंदर परिभाषित करते हैं' : रूट 'तत्व। रूट तत्व के पास एक ही गुंजाइश है क्योंकि एचटीएमएल वैश्विक स्तर पर उपलब्ध होगा। हमें परिवर्तनीय नामों पर निर्णय लेने और उनके मूल्यों को परिभाषित करने की आवश्यकता है।

: रूट {
- बैकग्राउंड-रंग: #ededed;
- पृष्ठभूमि पृष्ठभूमि: #fff;
--टेक्स्ट-रंग: # 212121;
- रंग-अल्फा: # सी 3423 एफ;
} 

12. हमारे कस्टम गुण लागू करें [4 9]

अब हमारे पास कुछ कस्टम गुण परिभाषित हैं, हम उन्हें हमारे सीएसएस में उपयोग कर सकते हैं। हम शरीर के साथ शुरू करेंगे और पृष्ठभूमि और पाठ रंग लागू करेंगे। एक कस्टम संपत्ति का उपयोग करने के लिए हम 'का उपयोग करते हैं' var (- कस्टम-संपत्ति-नाम) ' वाक्य - विन्यास।

 शरीर {
पृष्ठभूमि-रंग: var (- पृष्ठभूमि-रंग);
रंग: var (- पाठ-रंग);
} 

13. शेष गुण लागू करें [4 9]

एक ही विधि का उपयोग करके, हम अपने कंटेनर के 'पृष्ठभूमि-रंग' और हमारे 'रंग' को भी अपडेट कर सकते हैं ' पाठ-अल्फा 'हमारे कस्टम गुणों का उपयोग करने के लिए कक्षा। हमारे पृष्ठ में सभी रंग अब कस्टम गुणों का उपयोग करके नियंत्रित होते हैं।

। कंटेंट-कंटेनर {
पृष्ठभूमि-रंग: var (- पृष्ठ पृष्ठभूमि);
}
.text - अल्फा {
रंग: var (- रंग-अल्फा);
} 

14. मीडिया क्वेरी को फिर से जोड़ें [4 9]

अब हम मीडिया क्वेरी को फिर से जोड़ सकते हैं, लेकिन इस बार हम इसके अंदर मौजूद कस्टम संपत्ति मूल्यों को ओवरराइड कर सकते हैं। हम मूल रूट परिभाषा के बाद इसे सही रखेंगे, और मीडिया क्वेरी के अंदर हम अब अपने सभी रंग कस्टम गुणों के लिए नए मान चुन सकते हैं।

 @media (पसंद-रंग-योजना: डार्क) {
: रूट {
- बैकग्राउंड-रंग: # 111;
- पृष्ठभूमि पृष्ठभूमि: # 212121;
--टेक्स्ट-रंग: #ededed;
- रंग-अल्फा: # 50a8d8;
}
} 

15. पूर्ण नियंत्रण लें [4 9]

कस्टम गुण हमें चुनने के लिए पूर्ण नियंत्रण देते हैं कि हम कौन से रंग और अन्य गुणों को बदलते हैं और उपयोग करते हैं। आइए डार्क मोड का उपयोग करते समय इसे कम पारदर्शी बनाने के लिए हमारे पृष्ठ कंटेनर पर बॉक्स छाया को अपडेट करें। ऐसा करने के लिए हमें पृष्ठ छाया के लिए एक नई कस्टम संपत्ति बनाने की आवश्यकता है।

: रूट {
...
--पेज-छाया: 0 0 12 पीएक्स 6 पीएक्स आरजीबीए
(0,0,0,0.05);
} 

16. छाया लागू करें [4 9]

अब हमने एक और कस्टम प्रॉपर्टी बनाई है जिसे हमें इसे पृष्ठ पर सही तत्व पर लागू करने की आवश्यकता है। फिर पारदर्शिता को कम करने के लिए हम अपने मूल तत्व के अंदर मूल्य को ओवरराइड कर सकते हैं।

 @media (पसंद-रंग-योजना: डार्क) {
: रूट {
...
--पेज-छाया:
0 0 12px 6px आरजीबीए (0,0,0,0.33)
;
}
}
। कंटेनेंट-कंटेनर {
...
बॉक्स-छाया: var (- पृष्ठ-छाया);
} 

17. एक छवि जोड़ें [4 9]

अब आइए एक छवि को हमारी सामग्री में वापस जोड़ें, और फिर हम सामग्री के बगल में छवि को तैरने के लिए कुछ बुनियादी शैलियों को जोड़ सकते हैं।

 img {
चौड़ाई: 100%;
ऊंचाई: ऑटो;
नाव छोड़ी;
अधिकतम चौड़ाई: 300 पीएक्स;
मार्जिन-दाएं: 1.618rem;
मार्जिन-नीचे: 1.618rem;
} 

जैसा कि हम देख सकते हैं, क्योंकि हम किसी भी फ़िल्टर का उपयोग नहीं कर रहे हैं, छवि को दो विषयों के बीच परिवर्तित नहीं किया गया है।

18. अधिक घटक जोड़ें [4 9]

अब हमारे पास हमारी कस्टम गुण हैं जिन्हें हम पृष्ठ पर तत्व जोड़ सकते हैं और उन्हें अपने चर के साथ स्टाइल कर सकते हैं। आइए एक बटन क्लास बनाएं और हमारे पृष्ठ पर एक बटन जोड़ें।

 .button {
प्रदर्शन: इनलाइन-फ्लेक्स;
फ़ॉन्ट-परिवार: विरासत;
पृष्ठभूमि-रंग: वार (- रंग-अल्फा);
रंग: var (- पाठ-रंग);
पैडिंग: 1.618rem 3.236rem;
सीमा: 0 कोई नहीं;
सीमा-त्रिज्या: 0.25rem;
पाठ-सजावट: कोई नहीं;
}

19. बटन होवर स्टाइल बनाएं [4 9]

एक ही चर का उपयोग करके, हम एक होवर शैली भी बना सकते हैं जिसका उपयोग दोनों विषयों के लिए किया जा सकता है। इसे प्राप्त करने के लिए, जब हम उपयोगकर्ता को बटन पर कवर करते हैं और उन गुणों को संक्रमण करते हैं तो हम उन गुणों को कम कर देते हैं ताकि अनुभव कम हो सके।

 .button {
...
संक्रमण: पृष्ठभूमि-रंग 150ms,
रंग 150ms;
& amp;: होवर {
पृष्ठभूमि-रंग: var (- पाठ-रंग);
रंग: var (- रंग-अल्फा);
}
} 

20. बटन कस्टम गुण बनाएं [4 9]

कस्टम गुणों के पास नियमित सीएसएस तत्वों के समान गुंजाइश है; इसका मतलब है कि हम उन्हें अधिक विशिष्ट चयनकर्ता का उपयोग करके ओवरराइड कर सकते हैं। हम इसका लाभ उठा सकते हैं और हमारे बटन पर स्कॉप किए गए कुछ चर बना सकते हैं।

 .button {
- बटन-पृष्ठभूमि: var (- रंग-अल्फा);
- बटन-पाठ: var (- पृष्ठभूमि-रंग);
पृष्ठभूमि-रंग: var (- बटन-पृष्ठभूमि);
रंग: var (- बटन-पाठ);
...
} 

21. गुंजाइश का उपयोग करें [4 9]

[2 9 8] [2 9 9]

हम अंधेरे और हल्के विषयों में हमारे बटन के लिए विभिन्न शैलियों और होवर इंटरैक्शन बनाने के लिए इस दायरे का उपयोग कर सकते हैं। हम मीडिया क्वेरी या तत्व की स्थिति के आधार पर हमारे चर के मूल्य को बदल सकते हैं, जैसा कि हम आम तौर पर एक नए मूल्य के साथ संपत्ति को दोहराने के बजाय।

 .button {
...
& amp;: होवर {
- बटन-पृष्ठभूमि: # एई 3 9 37;
@media (prefers-color- योजना: डार्क) {
- बटन-पृष्ठभूमि: # 2E98D1;
- बटन-पाठ: var (- पृष्ठभूमि-
रंग);
}
}
}

एक टीम के साथ एक निर्माण पर काम कर रहे हैं? अपनी प्रक्रिया को सभ्य के साथ समेकित रखें घन संग्रहण ।

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका के अंक 283 में प्रकाशित किया गया था वेब डिजाइनर । अंक 283 खरीदें या वेब डिजाइनर की सदस्यता लें ।

संबंधित आलेख:

[3 9] सीएसएस कला के साथ शुरू करें