चीजों को तोड़े बिना एक डार्क थीम कैसे बनाएं: यांडेक्स मेल टीम के साथ सीखना

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

आज मैं आपको बताऊंगा कि हमने इस समस्या को कैसे ठीक किया। आप दो सरल तकनीकों के बारे में जानेंगे, जो हमारे लिए काम नहीं करती हैं और जिस विधि ने अंत में ट्रिक - एडेप्टिव पेज रिकॉलिंग किया है। मैं छवियों के बारे में कुछ विचार साझा करने के लिए एक डार्क थीम साझा करूँगा। निष्पक्ष होने के लिए, कस्टम सीएसएस के साथ पृष्ठों को काला करना एक अजीब काम है, लेकिन मेरा मानना ​​है कि आप में से कुछ हमारे अनुभव को सहायक हो सकते हैं।

सरल तरीके

अपनी जादुई रंग-झुकने तकनीक पर बसने से पहले, हमने दो वास्तव में बुनियादी विकल्पों की कोशिश की: तत्वों के लिए अतिरिक्त डार्क स्टाइलिंग या सीएसएस फ़िल्टर लागू करना। न तो विकल्प ने हमारे लिए काम किया, लेकिन वे अन्य मामलों में अधिक उपयुक्त हो सकते हैं (सरल शांत, सही है?)।

ओवरराइडिंग स्टाइल

यह एक मृत-सरल विकल्प है, जो तार्किक रूप से ऐप के अपने डार्क सीएसएस थीम का विस्तार करता है। आप बस एक ईमेल कंटेनर (या सामान्य तौर पर, उपयोगकर्ता द्वारा जेनरेट की गई सामग्री को काला करने के लिए कंटेनर पर) में अतिरिक्त डार्क स्टाइल डालते हैं:

.message--dark { background-color: black; color: white; } 

हालाँकि, ईमेल के अंदर के तत्वों की कोई भी शैली हमारी मूल शैली को ओवरराइड कर देगी। और नहीं !important यहाँ !important मदद नहीं करता है। विरासत को रोककर इस विचार को एक कदम आगे बढ़ाया जा सकता है:

 .message--dark * { background-color: black !important; color: white !important; border-color: #333 !important; } 

इस मामले में, आप इसके बिना नहीं कर सकते हैं !important , क्योंकि चयनकर्ता खुद बहुत विशिष्ट नहीं है। यह अधिकांश इनलाइन शैलियों को ओवरराइड करने के लिए भी होता है (इनलाइन वाले !important अभी भी अपना रास्ता ढूंढ लेंगे और इसके बारे में आप बहुत कुछ नहीं कर सकते हैं)।

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

यदि आप डिजाइनरों का उतना सम्मान नहीं करते हैं जितना कि मैं करता हूं और इस पद्धति के साथ जाने का फैसला करता हूं, तो न जाने वाली चीजों को संभालना न भूलें:

• box-shadow । हालाँकि, आप केवल रंग को ओवरराइड करने में सक्षम नहीं होंगे। या तो पूरी तरह से छाया से छुटकारा पाएं या प्रकाश के साथ शांति बनाएं।
• सिमेंटिक तत्वों के रंग, जैसे लिंक या इनपुट।
• इनलाइन एस.वी.जी. color बजाय background , और stroke बजाय fill उपयोग करें, लेकिन आप कभी भी सुनिश्चित नहीं हो सकते हैं, यह अच्छी तरह से चारों ओर हो सकता है।

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

वैसे, यह है कि हम पहले ईमेल को कैसे काला करते थे। यदि किसी ईमेल की अपनी कोई शैली होती है, तो हम उसे छोड़ देते हैं और केवल मामले में प्रकाश छोड़ देते हैं।

CSS फ़िल्टर का उपयोग करना

यह एक स्मार्ट और सुरुचिपूर्ण विधि है। आप CSS फ़िल्टर का उपयोग करके किसी पृष्ठ को काला कर सकते हैं:

 .message--dark { filter: invert(100) hue-rotate(180deg); /* hue-rotate    */ } 

चित्र डरावना हो जाते हैं, लेकिन हम इसे आसानी से ठीक कर सकते हैं:

 .message-dark img { filter: invert(100) hue-rotate(180deg); } 

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

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

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

यह विधि तटस्थ-रंग वाले पाठ के साथ ईमेल के लिए काम करेगी, लेकिन मैं इस तरह की सामग्री से भरे इनबॉक्स के साथ कभी नहीं मिला। दूसरी ओर, फ़िल्टर अपनी सामग्री - फ़्रेम, वेब घटकों, या छवियों तक पहुंचने के बिना तत्वों को गहरा करने का एकमात्र तरीका है।

अनुकूली डार्क थीम

और अब यह जादू का समय है! पहले दो दृष्टिकोणों की कमियों के आधार पर, हमने इस बात की जाँच की कि हमें क्या ध्यान रखना चाहिए:

1. पृष्ठभूमि को गहरा, पाठ को हल्का और सीमाओं को बीच में से कहीं बना लें।
2. काले पन्नों का पता लगाएं और उनके रंगों को संरक्षित करें।
3. चमक और कंट्रास्ट के मूल संतुलन को बनाए रखें।
4. परिणामी रंगों पर नियंत्रण दें।
5. मुहावरों को अपरिवर्तित छोड़ दें।

तो, आपको पृष्ठभूमि को गहरा बनाने के लिए शैलियों के रंगों को बदलने की आवश्यकता है। ऐसा क्यों नहीं, सचमुच? सभी शैलियों को लें, रंग-संबंधित नियमों ( color , background , border , box-shadow , और उनकी उपप्रकार) को निकालें, और उन्हें अपने "अंधेरे" संस्करणों के साथ बदलें: पृष्ठभूमि और सीमाओं को गहरा करें (लेकिन उतने अधिक नहीं हैं) पृष्ठभूमि), पाठ को हल्का करें, आदि।

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

नुकसान यह है कि आप "सब-इन-जेएस" दृष्टिकोण से क्या उम्मीद करेंगे। हम स्क्रिप्ट चलाते हैं, स्टाइल एनकैप्सुलेशन गड़बड़ करते हैं, और regex के साथ CSS को पार्स करते हैं। हालाँकि, बाद वाला HTML के साथ अपमानजनक नहीं है, क्योंकि CSS व्याकरण नियमित है (कम से कम जिस स्तर पर हम काम कर रहे हैं)।

यहां हमारी डार्क योजना है:

1. विरासत शैली के गुणों ( bgcolor और अन्य) को सामान्य करें और उन्हें style="..." में स्थानांतरित करें style="..." ।
2. सभी इनलाइन शैलियों का पता लगाएं।
3. प्रत्येक शैली में सभी रंग-संबंधित नियम ( background-color , color , box-shadow , और अन्य) ढूंढें।
4. रंग-संबंधित गुणों से रंगों को लें और उन्हें सही कनवर्टर के साथ मिलाएं (पृष्ठभूमि को गहरा करें, पाठ को हल्का करें)।
5. कन्वर्टर को बुलाओ।
6. परिवर्तित गुणों को वापस CSS में डालें।

आवरण कोड - सामान्यीकरण, शैलियों का पता लगाना, पार्स करना - काफी तुच्छ है। आइए देखें कि वास्तव में हमारा जादू कनवर्टर कैसे काम करता है।

एचएसएल रूपांतरण

एक रंग को गहरा करना उतना आसान नहीं है जितना लगता है, खासकर यदि आप ह्यू को संरक्षित करना चाहते हैं (उदाहरण के लिए, नीले को गहरे नीले रंग में बदल दें, नारंगी नहीं)। आप साधारण आरजीबी में ऐसा कर सकते हैं, लेकिन यह समस्याग्रस्त है। यदि आप एल्गोरिथम डिजाइन में हैं, तो आप जानते हैं कि RGB में, यहां तक ​​कि ग्रेडिएंट भी टूट गए हैं। इस बीच, एचएसएल में रंगों के साथ काम करना एक वास्तविक उपचार है: लाल, हरे और नीले रंग के बजाय, जो आपको पता नहीं है कि क्या करना है, आपके पास निम्नलिखित तीन चैनल हैं:

• ह्यू - वह चीज जिसे हम संरक्षित करना चाहते हैं।
• संतृप्ति, जो अभी हमारे लिए बहुत महत्वपूर्ण नहीं है।
• हल्कापन, जिसे हम बदलते रहेंगे।

आप इसे एक सिलेंडर के रूप में सोच सकते हैं। हमें इस सिलेंडर को उल्टा करने की आवश्यकता है। रंग सुधार कुछ इस तरह से होता है: (h, s, l) => [h, s, 1-l] ।

रंग जो पहले से ही ठीक हैं

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

गतिशील सर्कस

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

गतिशील इनलाइन शैलियों

इनलाइन शैलियों को बदलना सबसे सरल मामला है जो हमारे काले पन्नों को गड़बड़ कर देता है। यह सामान्य है, लेकिन एक साधारण सुधार है: परिवर्तन होते ही MutationObserver और इनलाइन शैलियों को ठीक करें।

बाहरी शैलियों

पृष्ठ के अंदर से <link> तत्व द्वारा संदर्भित शैलियों के साथ काम करना अतुल्यकालिकता और @import स्टेटमेंट्स के कारण @import है। और CORS चीजों को बेहतर नहीं बनाता है। ऐसा लगता है कि इस समस्या को एक वेब कार्यकर्ता (सभी *.css ) के साथ काफी हल किया जा सकता है।

गतिशील शैलियों

चीजों को बदतर बनाने के लिए, स्क्रिप्ट में <style> और <link> तत्व जोड़ सकते हैं, हटा सकते हैं या पुनर्व्यवस्थित कर सकते हैं, और यहां तक ​​कि नियमों को भी <style> में बदल सकते हैं। यहां आपको MutationObserver का उपयोग करने की भी आवश्यकता होगी, लेकिन प्रत्येक परिवर्तन अधिक प्रसंस्करण को प्रभावित करेगा।

सीएसएस चर

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

एक बार जब CSS वैरिएबल इसे मुख्य धारा में बना देते हैं, तो हम मुश्किल में पड़ जाते हैं। दूसरी ओर, color() तब तक समर्थित होगा, जिससे हम अपने सभी JS रूपांतरणों को एक color(var(--bg) lightness(-50%)) ।

सारांश

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

व्यवहार में, अनुकूली मोड को शैली के ओवरराइड के साथ जोड़ा जाना चाहिए, क्योंकि <input> या <a> जैसे मानक तत्व अक्सर डिफ़ॉल्ट प्रकाश शैलियों का उपयोग करते हैं।

छवियों को गहरा कैसे करें

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

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

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

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

दिलचस्प रूप से पर्याप्त है, कुछ छवियों का कोई मतलब नहीं है। ये आमतौर पर पिक्सेल या "प्रारूप धारकों" को विशेष रूप से बिज़ारे लेआउट में ट्रैक कर रहे हैं। आप उन्हें सुरक्षित रूप से अदृश्य बना सकते हैं (कहते हैं, opacity: 0 साथ opacity: 0 )।

अंदर क्या है इसका विश्लेषण

अंधेरे विषय के लिए एक छवि को समायोजित करने के तरीके का पता लगाने के लिए, हमें एक त्वरित और सरल विधि के साथ, इसके अंदर देखने और इसकी सामग्री का विश्लेषण करने की आवश्यकता है। यहाँ एक एल्गोरिथ्म का पहला संस्करण है जो इसे हल करता है।

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

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

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

निष्कर्ष

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

यदि आपको कभी कस्टम HTML स्निपेट्स का रंग बदलने की आवश्यकता है, तो इसे एक अंधेरे विषय में फिट करने के लिए, तीन तरीकों को ध्यान में रखें:

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

यहां तक ​​कि अगर आप इस में से किसी की कोशिश कभी नहीं करते हैं, मुझे आशा है कि आप इस लेख को पढ़ने में बहुत अच्छा समय था!