主題
主題是一種定制Blockly外觀和感覺的方法。目前我們支援在塊和類别上自定義某些樣式。我們建立主題的主要目标是授權開發人員建立更容易通路的塊體驗。
然而，伴随着強大的力量而來的是巨大的責任。如果不需要控制塊的所有三種樣式值（塊顔色、邊框顔色和陰影塊顔色），我們強烈建議使用者堅持使用塊顔色。很難找到協調一緻的顔色，是以最簡單的方法仍然是使用色調定義顔色，并允許Blockly計算邊框和陰影塊的顔色。
Block Style
塊樣式目前由四個字段組成：colourPrimary、colourSecondary、colourSecondary和hat。
{
"colourPrimary": "#4a148c",
"colourSecondary":"#AD7BE9",
"colourTertiary":"#CDB6E9"
}
Primary Colour(required) --它用作塊的背景色，可以用色調或十六進制值定義。
Secondary Colour(optional) --如果塊是陰影塊，則使用此顔色。必須将其定義為十六進制值。
Tertiary Colour(optional) --這是塊的邊框顔色。在主題之前，邊框顔色由明暗路徑組成，以便建立陰影效果。當第三種顔色被定義時，它隻對邊界使用一條路徑，這将建立一個平面外觀（見下圖）。此值必須定義為十六進制值。
Hat（可選）--當使用者希望向其塊中添加Hat時使用。目前，此值的唯一選項是“cap”。使用者可以在這裡找到更多關于帽子和帽子用途的資訊。
Category Style
類别樣式目前僅保留顔色屬性。
{
"colour":"290"
}
Colour(required) --這是彈出按鈕上類别的顔色。此值可以定義為十六進制值或色調。通常，這些顔色應與類别中大多數塊上的主色相同。這使得使用者很容易區分哪些塊屬于哪個類别。
Using Themes
要向Blockly應用程式添加主題，需要完成三個步驟：
建立主題 Create a Theme
添加樣式名 Add Style Names
設定主題 Set Your Theme
Create a Theme
主題目前接受塊樣式圖和類别樣式圖。它還可以改變某些部件的顔色。
塊樣式圖示例
{
"list_blocks": {
"colourPrimary": "#4a148c",
"colourSecondary":"#AD7BE9",
"colourTertiary":"#CDB6E9"
},
"logic_blocks": {
"colourPrimary": "#01579b",
"colourSecondary":"#64C7FF",
"colourTertiary":"#C5EAFF"
}
}
類别樣式映射示例
{
"list_category": {
"colours": "#4a148c"
},
"logic_category": {
"colour": "#01579b",
}
}
建立主題
var theme = Blockly.Theme(blockStyles, categoryStyles);
設定元件樣式
我們目前支援更改以下元件的顔色：
-
workspace
-
toolbox
-
toolboxText
-
flyout
-
flyoutText
-
flyoutOpacity
-
scrollbar
-
scrollbarOpacity
為了改變這些元件的顔色，可以調用theme.setComponentStyle（componentName，componentValue）。可以在此處找到更改這些元件顔色的示例主題。
這些元件名稱尚未最終确定，仍可能更改。如果您要更改的元件不屬于此清單的一部分，請在此處送出一個包含更多資訊的問題。
添加樣式名
現在我們已經建立了一個主題，我們需要将樣式的名稱添加到塊和類别定義中。
Categories
對于類别，隻需将樣式标記添加到xml。
<category name="Logic" categorystyle="logic_category">
</category>
Blocks
定義塊的方式決定了添加樣式名的方式。您可以在此處找到有關塊定義的更多資訊。
// JSON
"style":"logic_blocks"
//javascript
this.setStyle('logic_blocks')
現在您已經建立了一個主題并将其連接配接到您的塊和類别，現在是告訴Blockly使用哪個主題的時候了。
Blockly Options
設定初始主題的最佳方法是在inject調用中包含options.theme。
{
theme: Blockly.Theme(blockStyles, categoryStyles)
}
更多關于選項的資訊可以在這裡找到。如果未提供主題，則預設為經典主題，可在此處的主題檔案夾中找到。
Blockly Set Theme
如果要動态更改主題（例如，允許使用者從下拉菜單中選擇主題），則可以調用workspace.setTheme（主題）。
Create Block Styles Script
此腳本将接受色調或十六進制值的映射，并計算它們的二級和三級顔色。可以在“主題腳本”檔案夾中找到該腳本。
Accessibility
為了增加可讀性，我們目前增加了一個高對比度的主題。此樣式尚未定稿，可能會更改。在未來，我們想為有不同類型色盲的人增加其他主題。