थीम

थीम की मदद से, 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 का इस्तेमाल करने का एक उदाहरण दिया गया है.

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

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

कैटगरी

अपनी थीम के categoryStyles में तय की गई कैटगरी के किसी स्टाइल का इस्तेमाल करने के लिए, उसे अपनी कैटगरी की परिभाषा में जोड़ें:

JSONXML

{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

<category name="Logic" categorystyle="logic_category"></category>

ब्लॉक

अपनी थीम के 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 एक स्क्रिप्ट उपलब्ध कराता है, जो रंगों या हेक्स वैल्यू का मैप लेगा और उनके लिए सेकंडरी और टर्शियरी रंगों का हिसाब लगाएगा. स्क्रिप्ट को scripts/themes फ़ोल्डर में देखा जा सकता है.

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

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

• ज़्यादा कंट्रास्ट
• डेयूटेरोपिया/प्रोटानोपिया
• Tritanopia

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

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