थीम

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

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

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

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

अहम जानकारी: 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
}

Start Hats

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

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

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

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

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

थीम बनाना

कंस्ट्रक्टर या 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 प्रॉपर्टी में तय की गई ब्लॉक स्टाइल में से किसी एक को असाइन करना होगा.

JSONJavaScript

"style":"logic_blocks"

this.setStyle('logic_blocks');

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

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

शुरुआती थीम

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

JSONJavaScript

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

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

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

डाइनैमिक थीम

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

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

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

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

Blockly में सुलभता के लिए कई थीम उपलब्ध हैं. इनमें खास तौर पर, रंगों की पहचान न कर पाने की कुछ स्थितियों के लिए थीम शामिल हैं:

• हाई कंट्रास्ट
• डेयूटेरोपिया/प्रोटानोपिया
• ट्रिटानोपिया

हमारे पास ये भी हैं:

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