FastComments.com

Menu Icon

भाषा 🇮🇳 हिन्दी
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇫🇷 Français (France) 🇩🇪 Deutsch 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇳 हिन्दी 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇷🇸 Srpski (Latinica) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

कॉन्फ़िगरेशन

स्वतः पहचान
मैन्युअल कॉन्फ़िगरेशन

WordPress थीम्स

WordPress नेटवर्कर थीम डार्क मोड समर्थन

डार्क मोड

स्वतः पहचान Internal Link

डिफ़ॉल्ट रूप से, FastComments रंग वृत्त में "काले से दूरी" के आधार पर यह स्वतः पहचान लेगा कि आपकी साइट का बैकग्राउंड गहरा (डार्क) है या नहीं।

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

तकनीकी विवरण

हम डार्क मोड का पता कमेंट विजेट से ऊपर पेज के तत्वों को ट्रैवर्स करके लगाते हैं, विजेट के प्रारंभिक लोड होने पर गहरे बैकग्राउंड की तलाश करते हैं।

इस चरण के बाद डार्क मोड टॉगल करने के लिए, आपको विजेट को अपना कॉन्फ़िगरेशन अपडेट करने के लिए कॉल करना होगा। इसे Manual Configuration सेक्शन में समझाया गया है।

मैन्युअल कॉन्फ़िगरेशन Internal Link

डेवलपर्स के लिए - डार्क मोड को बंद करने के लिए बाध्य करना

डार्क मोड को बंद करने के लिए बाध्य किया जा सकता है, इसके लिए विजेट कॉन्फ़िगरेशन में hasDarkBackground को false के रूप में पास करें। यह VanillaJS, Angular, React, Vue, और React Native लाइब्रेरीज़ के लिए काम करता है।

प्रत्येक लाइब्रेरी के GitHub पर एक examples फ़ोल्डर होता है, जिसमें डार्क मोड का उपयोग करने के तरीके के उदाहरण होते हैं।

डार्क मोड को चालू करने के लिए बाध्य करना

हम hasDarkBackground को true सेट करके डार्क मोड को हमेशा चालू रहने के लिए बाध्य कर सकते हैं।

हम इसे विजेट कस्टमाइज़ेशन UI के माध्यम से भी कर सकते हैं यहाँ।

Base Theme के अंतर्गत बस Force Dark Mode चुनें।

VanillaJS विजेट - डार्क मोड अपडेट करना

डार्क मोड को अपडेट करने का सबसे आसान तरीका यह है कि पेज पर विजेट के सभी इंस्टेंस को देखा जाए और उनकी कॉन्फ़िगरेशन को अपडेट किया जाए:

VanillaJS - डार्क मोड टॉगल
Copy Copy
1
2 let isDarkMode = somehowDetermineIfDarkModeEnabled();
3 for (const instanceWrapped of window.fcUIInstances) {
4 if (instanceWrapped.targetElement) {
5 const config = instanceWrapped.config;
6 config.hasDarkBackground = isDarkMode;
7 instanceWrapped.instance.update(config)
8 }
9 }
10

WordPress नेटवर्कर थीम डार्क मोड समर्थन Internal Link

WordPress Networker थीम के लिए, हमें अपनी WordPress इंस्टॉलेशन में कस्टम कोड जोड़ना होगा ताकि डार्क मोड का स्वतः पता लगाया जा सके और कमेंट विजेट को अपडेट किया जा सके।

यह कोड आपकी साइट के फुटर में डाला जाना चाहिए। ऐसा करने के लिए काफी प्लगइन्स उपलब्ध हैं, इसलिए हम उन्हें यहाँ सूचीबद्ध नहीं करेंगे। हालाँकि, यहाँ जोड़ने के लिए कोड दिया गया है:

Networker थीम डार्क मोड सपोर्ट स्क्रिप्ट
Copy Copy
1
2(function () {
3 let isDarkMode = false;
4
5 function setIsDarkMode(newValue) {
6 isDarkMode = newValue;
7 for (const instance of window.fcUIInstances) {
8 if (instance.targetElement) {
9 const config = instance.config;
10 config.hasDarkBackground = isDarkMode;
11 instance.instance.update(config)
12 }
13 }
14 }
15
16 function getDarkModeSetting() {
17 return document.body.attributes['data-scheme'].value === 'dark';
18 }
19 let initialValue = getDarkModeSetting();
20 if (isDarkMode !== initialValue) {
21 setIsDarkMode(initialValue);
22 }
23 const observer = new MutationObserver(function (mutations) {
24 mutations.forEach(function (mutation) {
25 if (mutation.type === "attributes") {
26 const newValue = getDarkModeSetting();
27 if (isDarkMode !== newValue) {
28 setIsDarkMode(newValue);
29 }
30 return false;
31 }
32 });
33 });
34
35 observer.observe(document.body, {
36 attributes: true
37 });
38})();
39
इस गाइड में योगदान दें