主题可用于自定义 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
:工具箱背景颜色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
,则系统会向没有任何先前连接或输出连接的所有块添加帽子。如果您想更精确地控制哪些块会获得帽子,可以改用 block style 属性。
自定义主题背景
如需为 Blockly 应用添加主题,您需要执行以下操作:
- 创建主题
- 添加样式名称
- 在工作区中设置主题
创建主题
您可以使用构造函数或使用 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 提供了多种无障碍主题,特别是某些类型的色觉缺陷:
我们还提供: