थीम

थीम की मदद से, Blockly के रंग-रूप को अपनी पसंद के मुताबिक बनाया जा सकता है. Themes क्लास की मदद से, ब्लॉक के रंगों, कैटगरी के रंगों, और कुछ कॉम्पोनेंट को पसंद के मुताबिक बनाया जा सकता है. अगर आपको अतिरिक्त कॉम्पोनेंट को पसंद के मुताबिक बनाना है, तो हम इंजेक्शन डिव पर एक क्लास के तौर पर थीम का नाम देते हैं. इससे उपयोगकर्ता, सीएसएस के ज़रिए किसी भी काम न करने वाले कॉम्पोनेंट का लुक बदल सकते हैं. थीम बनाने का हमारा मुख्य लक्ष्य डेवलपर को Blockly का इस्तेमाल करने में मदद करना है, ताकि उन्हें ज़्यादा आसानी से ऐक्सेस किया जा सके.

ध्यान दें: अगर आपको किसी ब्लॉक के मुख्य रंग को कंट्रोल करने के बजाय, उसके रंग-रूप पर ज़्यादा बारीकी से कंट्रोल करना है, तो थीम बनाने के बजाय, ब्लॉक की परिभाषा में रंग सेट करें. अगर आपको किसी ब्लॉक के रंग के बजाय उसका आकार बदलना है, तो रेंडरर के बारे में ज़्यादा जानें.

थीम की प्रॉपर्टी

थीम कई प्रॉपर्टी वाला ऑब्जेक्ट होता है: इसमें बेस थीम, ब्लॉक के लिए स्टाइल ऑब्जेक्ट, कैटगरी, कॉम्पोनेंट, और फ़ॉन्ट के लिए इस्तेमाल किया जाता है. साथ ही, स्टार्ट ब्लॉक के लिए हैट का इस्तेमाल करना है या नहीं, इससे जुड़ी जानकारी.

अहम जानकारी: ब्लॉकली में मौजूद कोड में, colour की अमेरिका से बाहर की स्पेलिंग का इस्तेमाल किया जाता है. सभी कलर प्रॉपर्टी को रंग या हेक्स वैल्यू में बताया जा सकता है.

ब्लॉक स्टाइल

ब्लॉक स्टाइल, चार फ़ील्ड से बनी होती है:

• colourPrimary (ज़रूरी है) - ब्लॉक का बैकग्राउंड रंग.
• colourSecondary (ज़रूरी नहीं) - अगर ब्लॉक कोई शैडो ब्लॉक है, तो बैकग्राउंड का रंग.
• colourTertiary (ज़रूरी नहीं) - ब्लॉक का बॉर्डर या हाइलाइट रंग.
• hat (ज़रूरी नहीं) - अगर वैल्यू cap पर सेट है, तो ब्लॉक में हैट जोड़ता है. हैट के बारे में ज़्यादा जानें.

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

किसी थीम में, स्टाइल ऑब्जेक्ट को ब्लॉक करने के लिए ब्लॉक स्टाइल के नाम की मैपिंग शामिल होगी:

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

कैटगरी की स्टाइल

कैटगरी स्टाइल सिर्फ़ रंग वाली प्रॉपर्टी होती है.

• रंग (ज़रूरी है) - टूलबॉक्स में कैटगरी का रंग. आम तौर पर, इन रंगों का रंग, कैटगरी के ज़्यादातर ब्लॉक में मौजूद colourPrimary के जैसा होना चाहिए. इससे उपयोगकर्ताओं के लिए यह जानना आसान हो जाता है कि किसी दी गई कैटगरी में कौनसे ब्लॉक जुड़े हैं.

const mathCategory = {
   'colour':'290'
}

किसी थीम में, कैटगरी के नाम और कैटगरी स्टाइल ऑब्जेक्ट की मैपिंग शामिल होगी:

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

कॉम्पोनेंट स्टाइल

कोई थीम, नीचे दिए गए कॉम्पोनेंट का रंग या वैल्यू सेट कर सकती है:

• workspaceBackgroundColour: वर्कस्पेस के बैकग्राउंड का रंग
• toolboxBackgroundColour: टूलबॉक्स के बैकग्राउंड का रंग
• toolboxForegroundColour: टूलबॉक्स कैटगरी के टेक्स्ट का रंग
• flyoutBackgroundColour: फ़्लाइआउट बैकग्राउंड का रंग
• flyoutForegroundColour: फ़्लायआउट लेबल के टेक्स्ट का रंग
• flyoutOpacity: फ़्लायआउट की ओपैसिटी
• scrollbarColour: स्क्रोलबार का रंग
• scrollbarOpacity: स्क्रोलबार की ओपैसिटी
• insertionMarkerColour: इंसर्शन मार्कर का रंग (रंगों के नाम स्वीकार नहीं किए जाते हैं)
• insertionMarkerOpacity: इंसर्शन मार्कर की ओपैसिटी
• markerColour: कीबोर्ड नेविगेशन मोड में दिखाया जाने वाला मार्कर का रंग
• cursorColour: कीबोर्ड नेविगेशन मोड में दिखाई देने वाले कर्सर का रंग

ज़्यादातर दूसरे कॉम्पोनेंट को सीएसएस में थीम के नाम का इस्तेमाल करके बदला जा सकता है. हालांकि, अगर आप किसी ऐसे कॉम्पोनेंट को बदलना चाहते हैं, जो पहले से इस सूची का हिस्सा नहीं है और उसे सीएसएस का इस्तेमाल करके नहीं बदला जा सकता, तो कृपया ज़्यादा जानकारी के साथ समस्या दर्ज करें.

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

फ़ॉन्ट स्टाइल

फ़ॉन्ट स्टाइल एक ऐसा ऑब्जेक्ट है जिसमें फ़ॉन्ट की फ़ैमिली, वज़न, और साइज़ को रखा जाता है.

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

हैट शुरू करें

सलाह: ब्लॉक पैराडाइम पेज पर जाकर, शुरुआती हैट के इस्तेमाल के उदाहरणों के बारे में ज़्यादा जानें.

अगर startHats: true को सीधे किसी थीम ऑब्जेक्ट में सेट किया जाता है, तो सभी ब्लॉक में एक हैट जोड़ दिया जाएगा. हालांकि, इसमें पहले से कोई कनेक्शन या आउटपुट कनेक्शन नहीं होगा. अगर आपको इस बात पर ज़्यादा कंट्रोल चाहिए कि कौनसे ब्लॉक अच्छी तरह से फ़िट होते हैं, तो इसके बजाय ब्लॉक स्टाइल प्रॉपर्टी का इस्तेमाल किया जा सकता है.

पसंद के मुताबिक थीम

अपने Blockly ऐप्लिकेशन में कोई थीम जोड़ने के लिए, आपको ये काम करने होंगे:

1. थीम बनाना
2. स्टाइल के नाम जोड़ें
3. वर्कस्पेस में अपनी थीम सेट करना

थीम बनाएं

कंस्ट्रक्टर या defineTheme का इस्तेमाल करके, कोई थीम बनाई जा सकती है. defineTheme का इस्तेमाल करके, पहले से मौजूद थीम को आसानी से बढ़ाया जा सकता है. साथ ही, एक ही ऑब्जेक्ट से सभी वैल्यू को सेट किया जा सकता है. थीम का एक नाम होता है. यह एक ऐसा ऑब्जेक्ट है जिसमें ब्लॉक स्टाइल, कैटगरी स्टाइल, और अन्य प्रॉपर्टी शामिल होती हैं, जिनकी जानकारी ऊपर दी गई है.

किसी थीम में बेस थीम भी हो सकती है, जो ऐसी किसी भी वैल्यू के लिए डिफ़ॉल्ट वैल्यू देगी जो कस्टम थीम में नहीं बताई गई है.

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

यहां defineTheme इस्तेमाल करने का एक उदाहरण दिया गया है.

स्टाइल के नाम जोड़ें

अब हमने एक थीम बना ली है, तो हमें ब्लॉक और कैटगरी की परिभाषाओं में स्टाइल का नाम जोड़ना होगा.

कैटगरी

टूलबॉक्स को तय करने का तरीका यह तय करता है कि आपको स्टाइल का नाम कैसे जोड़ना है. ज़्यादा जानकारी के लिए, टूलबॉक्स पेज देखें.

ब्लॉक

ब्लॉक तय करने का तरीका यह तय करता है कि आपको स्टाइल का नाम कैसे जोड़ना है. आपको हमारे कस्टम ब्लॉक पेज पर ब्लॉक की परिभाषाओं के बारे में ज़्यादा जानकारी मिल सकती है. आपको अपने ब्लॉक में, थीम की blockStyles प्रॉपर्टी में तय की गई किसी ब्लॉक स्टाइल को असाइन करना होगा.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

अपनी थीम सेट करें

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

शुरुआती थीम

शुरुआती थीम को सेट करने का सबसे अच्छा तरीका है कि अपने इंजेक्ट कॉल में options.theme को शामिल करें. JSON या JavaScript में थीम उपलब्ध कराई जा सकती है.

JSON

{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

JavaScript

{
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   })
}

विकल्पों की ज़्यादा जानकारी हमारे कॉन्फ़िगरेशन पेज पर मिल सकती है. अगर कोई थीम नहीं दी गई है, तो वह डिफ़ॉल्ट रूप से क्लासिक थीम पर सेट हो जाएगी.

डाइनैमिक थीम

अगर आपको अपनी थीम को डाइनैमिक तरीके से बदलना है (उदाहरण के लिए, उपयोगकर्ताओं को ड्रॉपडाउन मेन्यू से थीम चुनने की अनुमति देने के मामले में), तो आप yourWorkspace.setTheme(theme) पर कॉल करें.

ब्लॉक स्टाइल स्क्रिप्ट बनाएं

ब्लॉकली के लिए ऐसी स्क्रिप्ट मिलती है जो कलर या हेक्स वैल्यू का मैप लेती है और उनके लिए सेकंडरी और तीसरे कलर का हिसाब लगाती है. स्क्रिप्ट को स्क्रिप्ट/थीम फ़ोल्डर में देखा जा सकता है.

अंतर्निहित थीम

ब्लॉकली में सुलभता के लिए कई थीम उपलब्ध होती हैं. खास तौर पर, कलर विज़न की कमी वाले कुछ खास तरह के विषय:

• हाई कंट्रास्ट
• हरे रंग की पहचान न कर पाने/प्रोटानोपिया
• ट्रिटैनोपिया

हमारे पास ये सुविधाएं भी हैं:

• क्लासिक थीम
• मॉडर्न
• गहरे रंग वाला मोड