主题

主题是一种定制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

为了增加可读性，我们目前增加了一个高对比度的主题。此样式尚未定稿，可能会更改。在未来，我们想为有不同类型色盲的人增加其他主题。