डार्क थीम कैसे बनाएं और नुकसान न पहुंचाएं। Yandex.Mail टीम का अनुभव

मेरा नाम व्लादिमीर है, मैं Yandex.Mail में एक मोबाइल फ्रंटेंड में व्यस्त हूं। हमारे आवेदन में, पहले से ही एक अंधेरा विषय था, लेकिन पर्याप्त नहीं था: हम इंटरफ़ेस और सरल अक्षरों को फिर से लिखने में सक्षम थे। लेकिन स्वरूपित पत्र हल्के बने रहे और एक अंधेरे इंटरफ़ेस के विपरीत थे, जो रात में मेरी आंखों को थका सकता था।

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

सरल तरीके

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

शैलियों को ओवरराइड करें

सबसे सरल तरीका, तार्किक रूप से सीएसएस में आवेदन के अंधेरे विषय का विस्तार करना: हम अक्षरों के लिए एक कंटेनर पर अंधेरे शैलियों को लटकाएंगे (सामान्य स्थिति में, किसी और की सामग्री के लिए जिसे पुन: प्राप्त करने की आवश्यकता है):

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

लेकिन अगर पत्र के अंदर के तत्वों की अपनी शैली है, तो वे हमारी मूल शैली को फिर से परिभाषित करेंगे। नहीं !important मदद नहीं करेगा। आप वंशानुक्रम को काटकर एक विचार को निचोड़ सकते हैं:

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

इस मामले में, आप इसके बिना नहीं कर सकते !important , क्योंकि चयनकर्ता स्वयं बहुत विशिष्ट नहीं है। इसके अलावा, यह इनलाइन शैलियों को फिर से परिभाषित करने की आवश्यकता होगी (और इनलाइन शैलियों के साथ !important वैसे भी क्रॉल करेगा, कुछ भी नहीं करना है)।

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

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

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

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

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

सीएसएस फिल्टर

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

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

इसके बाद, तस्वीरें डरावना हो जाएंगी, लेकिन इससे कोई फर्क नहीं पड़ता - हम उन्हें वापस कर देंगे:

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

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

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

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

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

उत्तरदायी थीम

यह जादू का समय है! पहले दो दृष्टिकोणों की कमियों से, हम एक चेकलिस्ट एकत्र करते हैं:

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

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

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

नुकसान हर चीज के लिए मानक हैं। हां, हम स्क्रिप्ट चलाते हैं, शैलियों के संयोजन को तोड़ते हैं और CSS regexp को पार्स करते हैं। खैर, HTML के विपरीत, बाद वाला इतना शर्मनाक नहीं है क्योंकि CSS व्याकरण (जिस स्तर की हमें ज़रूरत है) अभी भी नियमित है।

निरस्त करने की योजना इस प्रकार है:

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

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

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

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

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

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

वह रंग जिसके साथ सब कुछ अच्छा है

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

गतिशील सर्कस

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

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

सबसे सरल मामला जो हमारे काले पेज को तोड़ता है, इनलाइन शैलियों को बदल रहा है। ऑपरेशन अक्सर होता है, लेकिन यह फिक्स सरल होता है: MutationObserver जोड़ें और बदलते समय इनलाइन शैलियों को जल्दी से ठीक करें।

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

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

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

अंत में, अपनी सभी समस्याओं को एक साथ रखते हुए, हम याद करते हैं कि स्क्रिप्ट आम तौर पर जोड़ सकते हैं, हटा सकते हैं और पुनर्व्यवस्थित कर सकते हैं (विशिष्टता! Cascade!) <style> और <link> , और यहां तक ​​कि नियमों को <style> में बदल सकते हैं। शैली तत्वों के लिए सब कुछ एक ही MutationObserver द्वारा हल किया जाता है, लेकिन प्रत्येक परिवर्तन के लिए अधिक प्रसंस्करण होता है।

सीएसएस चर

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

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

सारांश

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

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

चित्रों को काला कैसे करें

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

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

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

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

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

आत्मनिरीक्षण heuristics

तस्वीर के साथ क्या करना है, यह तय करने के लिए, हमें इसकी सामग्री प्राप्त करने और उसका विश्लेषण करने की आवश्यकता है - और सरल और त्वरित तरीके से। हमारी समस्याओं के सेट के अनुसार, एल्गोरिथ्म का पहला संस्करण करघे। वहाँ वह है।

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

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

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

परिणाम

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

अगर आपको कभी कस्टम HTML को एक डार्क थीम पर रिपीट करना है, तो तीन तरीकों को ध्यान में रखें:

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

यहां तक ​​कि अगर आप कभी ऐसा नहीं करते हैं, तो मुझे आशा है कि आपने मज़ा किया था!

उपयोगी लिंक :

1. यदि आप इस विषय पर जीवंत चर्चा करने और एंड्रॉइड के लिए विकास के संदर्भ में रुचि रखते हैं, तो हम आपको 18 अप्रैल को यैंडेक्स के पीटर्सबर्ग कार्यालय का दौरा करने के लिए आमंत्रित करते हैं ।

   
   

2. हाल ही में, हमने मेल उपयोगकर्ताओं की एक और समस्या को हल करने के बारे में बात की - मेलिंग समस्याएं।