Velog में डार्क मोड लागू करना

इस लेख में उस सेवा में डार्क मोड लागू करने की कहानी साझा की गई है, जिसमें पहले डार्क मोड पर विचार नहीं किया गया था.

UX डिज़ाइनर के नज़रिये और डेवलपर के नज़रिये—दोनों को मिलाकर यह लेख लिखा गया है.

• तकनीक का चयन

  • Velog में React और Styled Components का उपयोग हो रहा है

  • Styled Components का ThemeProvider JS से theme सेट करता है, इसलिए system theme को डिफ़ॉल्ट के रूप में दिखाना सीमित है. System theme को follow करने के लिए browser side पर JS को एक बार चलाना पड़ता है, इसलिए अगर default theme को fix नहीं करना है, तो SSR लागू किए हुए Velog के लिए यह उपयुक्त नहीं है.

  • CSS Variable का उपयोग करने पर system theme को default value के रूप में इस्तेमाल कराया जा सकता है

  • CSS in JS वातावरण में CSS Variable का उपयोग करने के लिए, colors को JS object के रूप में manage किया जा रहा है, और गलती से बचने तथा TypeScript की autocomplete का लाभ लेने के लिए utility function लिखकर उपयोग किया जा रहा है

• डार्क मोड palette पर विचार

  • रंगों को background color, text color, border color, Primary, Destructive रंगों के आधार पर तय किया गया

  • Background color के मामले में शुरुआत में 1 2 3 4 brightness levels के अनुसार व्यवस्थित किया गया था, लेकिन वास्तविक UI में हमेशा 1:1 mapping नहीं बैठती थी, इसलिए exception cases को संभालने के लिए इसमें थोड़ा बदलाव करके manage किया गया

  • Text color तय करते समय यह जांचना महत्वपूर्ण है कि contrast ratio उचित है या नहीं. WebAIM नाम की जगह पर देखा जा सकता है कि वह WCAG पास करता है या नहीं

  • Primary और Destructive रंग पुराने रंगों को वैसे ही इस्तेमाल करने पर भी dark background में अच्छा contrast देते हैं, लेकिन Desaturated रंगों का उपयोग करने पर थोड़ा अधिक dark theme के अनुरूप महसूस होता है

• रंग बदलने का काम

  • IDE की मदद से जो चीज़ें auto replace हो सकती थीं, उन्हें संभाला गया

  • बाकी exception colors को सीधे देखकर उपयुक्त रंगों में सेट किया गया

  • जब पहले से बनाए गए रंगों से implementation अटपटा लगा, तब palette में नए रंग ज़रूरत के अनुसार जोड़ते हुए manage किया गया

  • वास्तव में इसी काम में सबसे ज़्यादा मेहनत लगी

• डार्क theme toggle फीचर

  • rotate, scale CSS transition के माध्यम से दो SVG के लिए transition effect लागू किया गया

  • जब उपयोगकर्ता dark theme toggle करता है, तो user settings को localStorage और cookie में save किया जाता है

  • localStorage का उपयोग CSR में, और cookie का उपयोग SSR में किया जाता है

डार्क theme को एक बार लागू करने के बाद यह महसूस हुआ कि जिस UI को डार्क theme को ध्यान में रखकर नहीं बनाया गया हो, उसमें बाद में डार्क theme लागू करना बेहद कठिन काम है. आगे से योजना बनाते समय डार्क theme को ज़रूर ध्यान में रखकर डिज़ाइन किया जाएगा, और रंगों का उपयोग करते समय gray1, gray2 जैसे नाम देने के बजाय text1, text2 जैसी उपयोग-आधारित naming करना बाद में अधिक सुविधाजनक होगा, ऐसा लगा