परिचय

मुझे हाल ही में एक बग रिपोर्ट प्राप्त हुई जहां एक एसवीजी आइकन उच्च कंट्रास्ट मोड में सही ढंग से प्रदर्शित नहीं हो रहा था। इस लेख में, मैं वह समाधान साझा करूंगा जो मेरे लिए कारगर रहा।

समाधान

उच्च कंट्रास्ट मोड में, मैंने आइकन के रंग को स्वचालित रूप से समायोजित करने के लिए कैनवासटेक्स्ट सिस्टम रंग का उपयोग किया।

.icon {
  mask-image: url(svg-link);
  background-color: currentColor;
  ...
}

@media (forced-colors: active) {
  .icon::before {
    background-color: CanvasText;
  }
}

मेरे मामले में, मैंने शुरुआत में मूल तत्व से रंग प्राप्त करने के लिए currentColor का उपयोग किया था। हालाँकि, उच्च कंट्रास्ट मोड में, मैं चाइल्ड तत्व के भीतर पृष्ठभूमि-रंग को सार्वभौमिक रूप से CanvasText पर सेट करना चाहता था, इसलिए मैंने यह परिवर्तन लागू किया।

कैनवासटेक्स्ट क्या है?

कैनवसटेक्स्ट एप्लिकेशन सामग्री या दस्तावेज़ों के लिए उपयोग किए जाने वाले टेक्स्ट रंग को संदर्भित करता है। यह सिस्टम के पृष्ठभूमि रंग के विरुद्ध सर्वोत्तम कंट्रास्ट प्रदान करने के लिए स्वचालित रूप से समायोजित होता है।

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

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

संदर्भ

https://developer.mozilla.org/en-US/docs/Web/CSS/system-color