Os temas são uma forma de personalizar a aparência do Blockly. Você pode personalizar
cores de bloco, cores de categorias e determinados componentes com a classe
Themes
. Se você quiser personalizar outros componentes, forneça o nome do tema
como uma classe no div de injeção. Isso permite que os usuários mudem a aparência de
componentes sem suporte no CSS. Nosso principal objetivo na criação de temas é
capacitar os desenvolvedores a criar experiências mais acessíveis do Blockly.
Propriedades do tema
Um tema é um objeto com várias propriedades: o tema base a ser estendido, um objeto de estilo para blocos, categorias, componentes e fontes e a opção de usar ou não chapéus para blocos iniciais.
Estilo do bloco
Um estilo de bloco é composto por quatro campos:
colourPrimary
(obrigatório): a cor de plano de fundo do bloco.colourSecondary
(opcional): a cor do plano de fundo, se o bloco for um de sombra.colourTertiary
(opcional): a cor da borda ou do destaque do bloco.hat
(opcional): adiciona um chapéu a um bloco se o valor estiver definido comocap
. Saiba mais sobre chapéus.
const listBlocks = {
'colourPrimary': '#4a148c',
'colourSecondary':'#AD7BE9',
'colourTertiary':'#CDB6E9',
'hat': 'cap'
}
Um tema vai incluir um mapeamento do nome do estilo de bloco para o objeto de estilo de bloqueio:
const blockStyles = {
'list_blocks': {
'colourPrimary': '#4a148c',
'colourSecondary':'#AD7BE9',
'colourTertiary':'#CDB6E9'
},
'logic_blocks': {
'colourPrimary': '#01579b',
'colourSecondary':'#64C7FF',
'colourTertiary':'#C5EAFF'
}
}
Estilo da categoria
Um estilo de categoria só tem uma propriedade de cor.
- Cor (obrigatório) - a cor da categoria na caixa de ferramentas. Normalmente, essas
cores precisam ser as mesmas que as
colourPrimary
na maioria dos blocos da categoria. Assim, os usuários sabem quais blocos pertencem a uma determinada categoria.
const mathCategory = {
'colour':'290'
}
Um tema inclui um mapeamento do nome da categoria para o objeto de estilo da categoria:
const categoryStyles = {
'list_category': {
'colour': '#4a148c'
},
'logic_category': {
'colour': '#01579b',
}
}
Estilos de componentes
Um tema pode definir a cor ou o valor dos componentes abaixo:
workspaceBackgroundColour
: a cor do plano de fundo do espaço de trabalhotoolboxBackgroundColour
: cor do plano de fundo da caixa de ferramentastoolboxForegroundColour
: cor do texto da categoria da caixa de ferramentasflyoutBackgroundColour
: cor do plano de fundo do menu suspensoflyoutForegroundColour
: cor do texto do rótulo do menu suspensoflyoutOpacity
: opacidade do menu suspensoscrollbarColour
: cor da barra de rolagemscrollbarOpacity
: opacidade da barra de rolageminsertionMarkerColour
: a cor do marcador de inserção (não aceita nomes de cores).insertionMarkerOpacity
: a opacidade do marcador de inserção.markerColour
: a cor do marcador exibida no modo de navegação do teclado.cursorColour
: a cor do cursor exibida no modo de navegação do teclado.
A maioria dos outros componentes pode ser alterada usando o nome do tema no seu CSS. No entanto, se você quiser mudar um componente que ainda não faz parte da lista e não pode ser alterado usando CSS, registre um problema com mais informações.
const componentStyle = {
'workspaceBackgroundColour': '#1e1e1e',
'toolboxBackgroundColour': '#333'
}
Estilos de fonte
Um estilo de fonte é um objeto que contém a família, o peso e o tamanho de uma fonte.
const fontStyle = {
'family': 'Georgia, serif',
'weight': 'bold',
'size': 12
}
Chapéus de taco
Se você definir startHats: true
diretamente em um objeto de tema, um chapéu vai ser adicionado a
todos os blocos sem conexões anteriores ou de saída. Se você quiser ter mais controle sobre
exatamente quais blocos recebem um chapéu, use a
propriedade de estilo de bloco.
Temas personalizados
Para adicionar um tema ao aplicativo Blockly, faça o seguinte:
- Criar um tema
- Adicionar nomes de estilos
- Definir o tema em um espaço de trabalho
Criar um tema
Um tema pode ser criado usando o construtor ou defineTheme
. O uso de
defineTheme
facilita a extensão de um tema pré-existente e a definição de todos os valores
com um único objeto. Um tema tem um nome e é um objeto com os estilos
de bloco, estilos de categoria e outras propriedades, conforme discutido acima.
Um tema também pode ter um tema base, que fornece valores padrão para todos os valores não especificados no tema personalizado.
const theme = Blockly.Theme.defineTheme('themeName', {
'base': Blockly.Themes.Classic,
'blockStyles': {
'logic_blocks': {
'colourPrimary': '#4a148c'
},
'math_blocks': {...}
},
'categoryStyles': {...},
'componentStyles': {...},
'fontStyle': {...},
'startHats': true
});
Confira um
exemplo
de uso da defineTheme
.
Adicionar nomes de estilo
Agora que criamos um tema, precisamos adicionar o nome dos estilos às definições de bloco e categoria.
Categorias
A definição da caixa de ferramentas determina como é preciso adicionar o nome do estilo. Consulte a página de ferramentas para mais informações.
Blocks
A forma como você define o bloco determina como é preciso adicionar o nome do estilo. Saiba mais sobre definições de bloco na nossa página de blocos personalizados. Atribua
ao bloco um dos estilos de bloco definidos na propriedade blockStyles
do tema.
JSON
"style":"logic_blocks"
JavaScript
this.setStyle('logic_blocks');
Definir o tema
Você também precisa informar ao Blockly qual tema usar. Ao definir vários temas que usam o mesmo estilo de bloco e nomes de categoria, você pode permitir que o usuário escolha o tema mais adequado para ele e o mude dinamicamente, sem precisar mudar as próprias definições de bloco.
Tema inicial
A melhor maneira de definir um tema inicial é incluir options.theme
na
chamada de injeção. Você pode fornecer o tema em JSON ou 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
})
}
Veja mais informações sobre as opções na nossa página de configuração. Se nenhum tema for informado, o padrão será o Tema clássico.
Temas dinâmicos
Se você quiser mudar o tema dinamicamente (por exemplo, no caso de
permitir que os usuários escolham um tema em um menu suspenso), chame
yourWorkspace.setTheme(theme)
.
Criar script de estilos de bloco
O Blockly fornece um script que receberá um mapa de matizes ou valores hexadecimais e calculará as cores secundárias e terciárias para eles. O script pode ser encontrado na pasta scripts/themes.
Temas integrados
O Blockly oferece vários temas para acessibilidade, especificamente certos tipos de deficiência visual associada à percepção de cores:
- Alto contraste
- Deuteranopia/Protanopia
- Tritanopia (em inglês)
Também temos:
- Tema clássico
- Moderno
- Modo escuro