👩‍❤️‍👨 🔓 👨‍👧‍👦 स्टैक ओवरफ्लो के लिए एक डार्क थीम बनाना 🚝 👆🏽 👨🏻‍⚖️

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

स्टैक ओवरफ्लो पर बैनर, जो आपको एक अंधेरे विषय को शामिल करने की अनुमति देता है

मेरा नाम आरोन शकी है। मैं स्टैक ओवरफ्लो में डिजाइन का प्रमुख हूं। मैं इंटरफ़ेस घटकों के डिजाइन में भाग लेता हूं जो परियोजना की नई विशेषताओं को रेखांकित करता है।

शुरुआत करने के लिए, थोड़ी विडंबना। व्यक्तिगत रूप से, मैं अंधेरे इंटरफ़ेस विषयों का प्रशंसक नहीं हूं।

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

लेकिन मैं वह व्यक्ति हूं जिसके प्रयासों ने स्टैक ओवरफ्लो पर एक अंधेरे विषय को लाया।

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

क्या हम उपयोगकर्ताओं को एक डार्क थीम दे सकते हैं, और साथ ही साथ परियोजना की पहुँच में सुधार के लिए रास्ता खोल सकते हैं? हमने इस सवाल का जवाब सकारात्मक में दिया है, जो मैंने अभी के बारे में बताया है।

रंग अनुसंधान

प्रोजेक्ट के लिए मूल रंग पैमान बनाते समय, हम, शायद थोड़े भोले हैं, एक निश्चित रंग मूल्य लिया और इसे कम से लागू परिवर्तनों का उपयोग करके संशोधित किया । इसलिए, उदाहरण के लिए, हम एक कम-चर की घोषणा कर सकते हैं @redऔर डिजाइन का उपयोग करके कई बार रंग गहरा कर सकते हैं darken(@red, 10%)। वही कई रंग स्पष्टीकरण का उपयोग करने के लिए जाता है tint(@red, 10%)। यह एक रंग पैमाने, जिसमें रंग की सीमा में हैं दे सकते हैं @red-050करने के लिए @red-90010% की वृद्धि में।

जब मैंने पहली बार यह समझने की कोशिश की कि स्टैक ओवरफ्लो संसाधन अंधेरे मोड में कैसे दिख सकता है, तो मैंने बस सफेद पृष्ठभूमि को काले रंग में बदलने की कोशिश की और रंग को "फ्लिप" करने का फैसला किया। इस दृष्टिकोण के साथ, रंग रंग @red-050हो जाता है@red-900, रंग पैमाने के प्रारंभिक और अंतिम रंगों के बीच समान रूप से बदलते हैं। लेकिन ये रंग अपने आप पहले जैसे ही थे।

लाल के लिए हल्के और गहरे रंग के तराजू।

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

हमें निश्चित रूप से कुछ बेहतर करने की जरूरत है।

▍गेटिंग शुरू: लेआउट डिजाइन

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

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

रंगों के साथ काम करने के लिए एक बेहतर एल्गोरिदम का चयन

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

पीले रंग का सबसे हल्का संस्करण सफेद रंग से अप्रभेद्य था, और सबसे काला काले से अप्रभेद्य था

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

हमारे रंगों के सबसे गहरे बदलाव काले और एक-दूसरे से अपरिहार्य थे। ऐसे

घटकों का निर्माण जो सूचनाओं को लागू करते हैं, हम अपने डिजाइन सिस्टम से रंगों का उपयोग नहीं कर सकते थे। इसके बजाय, हमें आंख पर अपने रंग चुनने की जरूरत थी।

ये रंग सुंदर हैं, लेकिन वे हमारे रंग तराजू के रंग मूल्यों पर आधारित नहीं हैं।

मैंने रंगों को सामान्य करने के लिएLyft Design सेअद्भुत ColorBox उपकरण का उपयोग किया। सबसे सरल तरीके से रंग बदलने के बजाय, रैखिक रूप से, 10% वेतन वृद्धि में, मैंने बेज़ियर घटता लागू किया। इसने हमें रंग तराजू के चरम पदों में महत्वपूर्ण सुधार प्राप्त करने की अनुमति दी।

स्पेक्ट्रम के चमकीले हिस्से में रंगों को सामान्य करने के बाद, मैं उन सूचनाओं को बनाने में सक्षम हुआ जिनके रंग हमारे डिजाइन सिस्टम के रंगों से लिए गए हैं

▍ गहरे रंग

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

पूर्ण सामान्यीकृत रंग सरगम

स्टैक इंटरफ़ेस में एक अंधेरे विषय को लागू करना

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

▍Variables

मुझे कस्टम सीएसएस गुणों में स्थिर कम संकलित हेक्साडेसिमल रंग मानों को परिवर्तित करने की आवश्यकता थी, जिन्हें प्रोग्राम चलाने के दौरान उपयोग करने के लिए डिज़ाइन किया गया था। मुद्दा यह है कि रंगीन मूल्यों को var(--red-500)स्थिर दृश्य संरचनाओं का उपयोग करने के बजाय दृश्य संरचनाओं का उपयोग करके संग्रहीत किया जाना चाहिए @red-500। यह एक दिलचस्प काम था - हमारे सिस्टम डिजाइन के भीतर, और पूरी साइट के भीतर। हमने आमतौर पर @red-500तत्वों की विभिन्न अवस्थाओं को उजागर करने के लिए एक जैसे रंग मान लिया , और इसे हल्का या गहरा बना दिया (जैसे राज्यों को लगता है कि तत्व उन पर मंडराते हैं, या जब उन्हें फ़ोकस मिलता है), पृष्ठभूमि रंग या तत्वों की सीमाओं के रंग के रूप में उपयोग करने के लिए।

यदि हम प्रत्येक बटन के रंगों के बारे में बात करते हैं, जो हमारे पास बहुत हैं, प्रत्येक बटन के प्रत्येक राज्य के रंगों के बारे में, तो हम कह सकते हैं कि ये रंग एकल संकलित रंग मूल्य के परिवर्तनों के सेट के दौरान प्राप्त किए गए थे। यह मुझे फिल्म के एक दृश्य की याद दिलाता है "एक गिरावट के लिए खेल।" वहाँ उन्होंने अरबों डॉलर में दस मिलियन निवेश की संभावना के बारे में बात की। यह आश्चर्य की बात नहीं है कि इस तरह के "परिवर्तनों" ने वित्तीय संकट को जन्म दिया।

नियमित सीएसएस चर के साथ समस्या यह है कि आप उनके लिए कम परिवर्तन लागू नहीं कर सकते हैं। सीएसएस चर मान रनटाइम पर गणना की जाती है, इसलिए इस तरह का निर्माण darken(var(--red-500), 5%)एक संकलन त्रुटि की ओर जाता है।

इसका मतलब यह है कि मुझे कोड को फिर से काम करने की जरूरत है, उदाहरण के लिए, स्टाइल के लिए बटन। सबसे पहले वह इस तरह दिखे:

.s-btn {
    color: @white;
    background-color: @blue-600;
    border: 1px solid darken(@blue-600, 5%);
    
    &:hover {
        background-color: darken(@blue-600, 5%);
        border-color: darken(@blue-600, 10%);
    }
}

हमारे रंग प्रणाली में वर्णित सटीक रंग मूल्यों को इंगित करने के लिए मुझे आगे बढ़ने की आवश्यकता थी। नतीजतन, मुझे कोड के इस संस्करण में आने की आवश्यकता थी:

.s-btn {
    color: var(--white);
    background-color: var(--blue-600);
    border: 1px solid var(--blue-700);
    
    &:hover {
        background-color: var(--blue-700);
        border-color: var(--blue-800);
    }
}

उसी समय, यह स्पष्ट था कि सब कुछ बटन तक सीमित नहीं था। इसलिए, मुझे स्टैक में उपलब्ध सभी घटकों की शैलियों को फिर से तैयार करने की आवश्यकता थी। सूचनाओं, पॉप-अप मेनू, मोडल विंडो, लिंक और कई अन्य घटकों के लिए भी यही सच था।

▍ ब्राउज़र संगतता

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

Ondभारतीय कक्षाएं

IE11 ने मुझे अब और सीमित नहीं किया और मैं स्टैक्स में रंगों के साथ काम करने में सक्षम था। मैंने तत्व में एक bodyवर्ग जोड़ने का फैसला किया .theme-system। ऐसा करने के बाद, मैं उपयुक्त मीडिया क्वेरी का उपयोग करके हल्के रंगों को उनके काले समकक्षों के साथ बदलने में सक्षम था। इसके अतिरिक्त, हम केवल bodyकक्षा में जोड़कर मीडिया अनुरोध को पूरी तरह से मना कर सकते हैं .theme-dark। यह उपयोगकर्ताओं को उनकी प्रणाली सेटिंग्स की परवाह किए बिना साइट के अंधेरे विषय का उपयोग करने की अनुमति देगा। यहाँ है कि मैं क्या परिणाम के रूप में है:

body {
    --red-600: #c02d2e;
}

body.theme-system {
    @media (prefers-color-scheme: dark) {
        --red-600: #d25d5d;
    }
}

body.theme-dark {
    --red-600: #d25d5d;
}

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

ढेर में एक अंधेरे विषय का उपयोग करें

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

ढेर में प्रकाश और अंधेरे विषयों के बीच स्विच करें

स्टैक ओवरफ्लो मुख्य साइट पर एक अंधेरे विषय को लागू करना

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

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

साइट के मुख्य रंग

के साथ शुरू करने के लिए, मुझे मानक प्रकाश विषय स्टैक ओवरफ्लो का उल्लंघन किए बिना साइट पर सबसे बड़ा बदलाव करने की आवश्यकता थी। जो कार्य मुझे हल करने थे वे मुख्य रूप से उनके समान सीएसएस चर वाले स्थिर कम चर को बदलने के लिए थे। सबसे पहले, मैंने शैली background-color: var(--white)को साइट की पृष्ठभूमि पर लागू किया , इसे शैली के साथ बदल दिया background-color: @white। इसके लिए धन्यवाद, गांवों का मुख्य क्षेत्र अब आसानी से पृष्ठभूमि के गहरे रंग में पुन: चित्रित किया जा सकता है। फिर मैंने फोंट और कुछ अन्य तत्वों के रंगों के साथ एक ही ऑपरेशन किया। इस काम में मुख्य रूप से सीएसएस-कोड की एक बड़ी मात्रा को हटाने में शामिल था, क्योंकि, उदाहरण के लिए, हम अक्सर अति विस्तृत शैलियों के शौकीन थे, बाल तत्वों के लिए फ़ॉन्ट रंग सेट करना, हालांकि हम माता-पिता के तत्वों से विरासत में मिले रंग मूल्यों के साथ अच्छी तरह से मिल सकते हैं।

Of कंपनी के कर्मचारियों के लिए एक नए डिजाइन का प्रदर्शन

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

▍Buttons

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

यह सबसे स्पष्ट रूप से प्रकट हुआ था जब यह बटन के लिए आया था। साइट पर काम करने के वर्षों में, इसमें कई बटन कार्यान्वयन का उपयोग किया गया है। यह विशेष रूप से निराशाजनक था क्योंकि हमने खुद तत्वों को स्टाइल किया था button। इसका मतलब है कि किसी भी तत्व button, या तत्व, के रूप में सजाया गया हैinput type=«button», डिफ़ॉल्ट शैली सौंपी गई थी। इस शैली में बहुत उच्च स्तर की विशिष्टता है और यह नियमों के एक पुराने सेट पर आधारित है।

उपर्युक्त तथ्य ने बहुत सारे रिफैक्टिंग की आवश्यकता को जन्म दिया है, जो अभी भी जारी है। इसका उद्देश्य तत्व-स्तरीय CSS शैलियों को निकालना buttonऔर उन्हें स्टैक से समकक्षों के साथ बदलना है। विशेष रूप से, हम इस तथ्य के बारे में बात कर रहे हैं कि सैकड़ों तत्वों input type=«submit»को बदलने की आवश्यकता है <button type="submit" class="s-btn s-btn__primary">। काम को जोड़ने के अलावा, मैं ध्यान देता हूं कि हमने अक्सर जावास्क्रिप्ट कार्यक्षमता को दृश्य चयनकर्ताओं से जोड़ा है। यदि आप तत्वों की उपस्थिति को प्रभावित करने वाले वर्गों को बदलते हैं, तो यह बटन की कार्यक्षमता को तोड़ सकता है। नतीजतन, हजारों बटन के प्रसंस्करण के दौरान, मुझे पहले उनसे कक्षाएं जोड़ने की जरूरत थीjs-, उन्हें हैंडलर कनेक्ट करें, और फिर पुरानी शैलियों से छुटकारा पाएं जो बटन की उपस्थिति को परिभाषित करते हैं।

इसने अंततः मुझे पुराने बटन वर्गों को हटाने का नेतृत्व किया, जिसने अंधेरे विषय को चालू करते समय बटन को सही ढंग से रंग बदलने की अनुमति दी।

▍ वेबसाइट का शीर्षक

कार्य को जटिल करने के लिए, पूरी साइट पर उपयोग किए जाने वाले हेडर विभिन्न मोड में काम कर सकते हैं। हम प्रकाश और अंधेरे मोड के बारे में बात कर रहे हैं, और एक विशेष विषय के लिए समर्थन मोड के बारे में। टीमों के लिए साइट विकल्प (टीमों के लिए ढेर अतिप्रवाह) और कॉर्पोरेट सिस्टम के लिए जबरन एक अंधेरे हेडर थीम का उपयोग करता है। इसके अलावा, कमांड संस्करण टीम अवतार के रंग द्वारा निर्दिष्ट रंग का उपयोग करता है। हमारे कई अन्य घटकों की तरह, साइट शीर्षक के लिए सीएसएस एकल रंग प्रदान करता है, जो यह निर्धारित करता है कि शीर्षक हल्का है या गहरा। यह रंग तब, जटिल कम निर्देशों का उपयोग कर, रूपांतरित हो जाता है, जो आपको इसके विभिन्न विकल्प प्राप्त करने की अनुमति देता है। हालांकि, जब हम डिजाइन सिस्टम के कोड को संसाधित करते हैं, तो हम क्या नहीं कर सकते थे। यही है, वे सभी पुराने CSS को नहीं फेंक सकते हैं और इसे कोड के साथ बदल सकते हैं,जो सीएसएस चर का उपयोग करता है। तथ्य यह है कि हमारे कॉर्पोरेट क्लाइंट, वास्तव में, पूरी तरह से, विषयों की सहायता से, हेडर की उपस्थिति को अनुकूलित करते हैं। इस मामले में, रंग विकल्प एक रंग के आधार पर उत्पन्न होते हैं।

लाइट हेडिंग

गहरा शीर्षक

कमांड हेडिंग

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

परिणामस्वरूप, हम इस दृष्टिकोण पर आए:

& when ( iscolor(@theme-topbar-background-color) ) {
     @theme-topbar-style: if(luma(@theme-topbar-background-color) >= 50%, light, dark);
 }
 & when not ( iscolor(@theme-topbar-background-color) ) {
     @theme-topbar-style: automatic;
 }

फिर, प्राप्त मान ( automatic, lightया dark) के आधार पर , सही हेडर बनाया जाता है।

▍Tags

अगर मैं घटकों के डिज़ाइन में शामिल लोगों को सिर्फ एक सलाह दे सकता था, तो यह पढ़ेगा: "उन घटकों का वर्णन न करें जो पृष्ठ पर उनके स्थान को प्रभावित करते हैं।" दूसरे शब्दों में, किस तरह का स्थान अलग करता है घटकों को उस संदर्भ को निर्धारित करना चाहिए जिसमें वे लागू होते हैं। इस तरह की चीजों को कंपोनेंट में सेट करने की जरूरत नहीं है। स्टैक ओवरफ्लो के पहले संस्करणों में, यह तय किया गया था कि घटकों को post-tagबाहरी पैडिंग लागू किया जाना चाहिए। उसी समय, बटन, जैसे टैग, जावास्क्रिप्ट-संबंधित समस्या के अधीन हो गए। चीजों को और अधिक कठिन बनाने के लिए, अधिकांश टैग एक ही सहायक विधि का उपयोग करके उत्पन्न किए गए थे।

टैग को फिर से शामिल करने के post-tagसाथ-संगणकों को प्रतिस्थापित करनाs-tagअलग-अलग विषयों का उपयोग करने के लिए डिज़ाइन किए गए साथी। इस कार्य में उपयोग को ध्यान में रखते हुए जावास्क्रिप्ट में परिवर्तन भी शामिल थे js-tag। इसके अलावा, टैग बनाने के लिए ज़िम्मेदार तरीके को बदलना आवश्यक था, जिससे यह ऐसा हो सके कि यह मनमाने ढंग से उन वर्गों को स्वीकार करे जो तत्वों की नियुक्ति को प्रभावित करते हैं। तथ्य यह है कि कुछ संदर्भों में, टैग्स को फ्लेक्स लेआउट में रखने की आवश्यकता हो सकती है, ऐसा करने के बजाय पूर्वनिर्धारित बाहरी संकेत (या ऐसे संकेत से निपटने के बजाय) पर निर्भर होते हैं।

Ling स्टाइलिंग प्रकाशन

स्टैक ओवरफ्लो का थोक उपयोगकर्ता प्रकाशनों से बना है। ये प्रकाशन, अर्थात् प्रश्न, उत्तर, टिप्पणियाँ, मार्कडाउन मार्कअप की मदद से बनाए गए हैं। स्टैक ओवरफ्लो के लॉन्च के दौरान, मार्कडाउन मार्कअप एक अपेक्षाकृत नई तकनीक थी।

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

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

Ling कोड स्टाइल

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

परिणाम

प्रकाश विषय और अंधेरे विषय का बीटा संस्करण, 30 मार्च को जारी किया गया।

हमने अंधेरे विषय पर चलते हुए काम करने की मात्रा के कारण, हम बिना किसी कठिनाइयों के परियोजना के रूप में काफी बड़े बदलाव करने में सक्षम थे। अब हमारे पास क्या है, इसके आधार पर, हम उदाहरण के लिए, एक उच्च-विपरीत वेबसाइट थीम विकसित कर सकते हैं जो इसकी पहुंच को बढ़ाता है।

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

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

प्रिय पाठकों! क्या आप स्टैक ओवरफ्लो का उपयोग करते हैं? क्या आपको उनकी नई डार्क थीम पसंद है?

स्टैक ओवरफ्लो के लिए एक डार्क थीम बनाना