Temas

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.

Observação: se você quiser controlar apenas a cor principal de um bloco, em vez de ter um controle mais refinado sobre a aparência, defina a cor na definição do bloco em vez de criar um tema. Se você quiser mudar a forma de um bloco em vez da cor, saiba mais sobre renderizadores.

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.

Importante: o código no Blockly usa a ortografia de colour fora dos EUA. Todas as propriedades da cor podem ser definidas em valores de matiz ou hexadecimais.

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 como cap. 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 trabalho
• toolboxBackgroundColour: cor do plano de fundo da caixa de ferramentas
• toolboxForegroundColour: cor do texto da categoria da caixa de ferramentas
• flyoutBackgroundColour: cor do plano de fundo do menu suspenso
• flyoutForegroundColour: cor do texto do rótulo do menu suspenso
• flyoutOpacity: opacidade do menu suspenso
• scrollbarColour: cor da barra de rolagem
• scrollbarOpacity: opacidade da barra de rolagem
• insertionMarkerColour: 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

Dica: saiba mais sobre os casos de uso de start hats na nossa página de paradigmas de bloco.

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:

1. Criar um tema
2. Adicionar nomes de estilos
3. 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