主題

主題可用來自訂 Blockly 的外觀和風格。您可以透過 Themes 類別自訂區塊顏色、類別顏色和特定元件。如要自訂其他元件，我們提供了主題名稱做為插入 div 的類別，可讓使用者透過 CSS 變更任何不支援元件的外觀。我們開發主題的主要目標，是協助開發人員創造出更易於存取的 Blockly 體驗。

主題屬性

主題是指具有以下屬性的物件：做為擴充的基礎主題、用於區塊、類別、元件和字型的樣式物件，以及是否使用帽子做為起始區塊。

區塊樣式

區塊樣式由四個欄位組成：

  • 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：Toolbox 背景顏色
  • toolboxForegroundColour：工具箱類別文字顏色
  • flyoutBackgroundColour：飛出背景顏色
  • flyoutForegroundColour：延伸標籤文字顏色
  • flyoutOpacity：飛行不透明度
  • scrollbarColour：捲軸顏色
  • scrollbarOpacity：捲軸不透明度
  • insertionMarkerColour：插入標記顏色 (不接受顏色名稱)
  • insertionMarkerOpacity：插入標記不透明度
  • markerColour：鍵盤瀏覽模式中顯示的標記顏色
  • cursorColour：鍵盤瀏覽模式顯示的遊標顏色

您可以在 CSS 中使用主題名稱變更大多數其他元件。不過，如果您要變更的元件尚未顯示在這份清單中，也無法使用 CSS 進行變更，請提出問題並提供詳細資訊。

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)。

建立區塊樣式指令碼

Blockly 提供的指令碼可擷取色調或十六進位值圖，並計算其次要顏色和第三顏色。您可以在 scripts/themes 資料夾中找到此指令碼。

內建主題

Blockly 提供多種無障礙主題，特別是特定類型的色彩視覺障礙：

其他事項：