Temas

Os temas são uma forma de personalizar a aparência do Blockly. É possível personalizar cores de bloco, cores de categoria e determinados componentes usando a classe Themes. Se você quiser personalizar outros componentes, fornecemos o nome do tema como uma classe no div de injeção. Isso permite que os usuários mudem a aparência de qualquer componente sem suporte pelo CSS. Nosso principal objetivo ao criar temas é capacitar os desenvolvedores a criar experiências do Blockly mais acessíveis.

Observação: se você quiser controlar apenas a cor principal de um bloco, em vez de ter um controle mais preciso 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 que será usado como base, um objeto de estilo para blocos, categorias, componentes e fontes e se é necessário usar chapéus para blocos iniciais.

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

Estilo de bloco

Um estilo de bloco é composto por quatro campos:

• colourPrimary (obrigatório): a cor de plano de fundo do bloco.
• colourSecondary (opcional): a cor de plano de fundo se o bloco for um bloco 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 for definido como cap. Saiba mais sobre chapéus.

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

Um tema inclui um mapeamento do nome do estilo de bloco para bloquear o objeto de estilo:

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 contém apenas uma propriedade de cor.

• Cor (obrigatório): a cor da categoria na caixa de ferramentas. Normalmente, essas cores precisam ser iguais às colourPrimary na maioria dos blocos da categoria. Isso facilita para os usuários saber 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 dos 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 de expansão
• 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 exibido no modo de navegação por teclado
• cursorColour: a cor do cursor exibido no modo de navegação pelo teclado

A maioria dos outros componentes pode ser alterada usando o nome do tema no CSS. No entanto, se você quiser mudar um componente que ainda não faz parte desta lista e não pode ser alterado usando CSS, envie 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
}

Start Hats

Dica: saiba mais sobre os casos de uso de chapéus de início na nossa página de paradigmas de blocos.

Se você definir startHats: true diretamente em um objeto de tema, um chapéu será adicionado a todos os blocos sem conexões anteriores ou de saída. Se você quiser ter mais controle sobre quais blocos recebem um chapéu, use a propriedade estilo de bloco.

Temas personalizados

Para adicionar um tema ao seu aplicativo do Blockly, faça o seguinte:

1. Criar um tema
2. Adicionar nomes de estilo
3. Definir seu 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, 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 como usar 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 forma como você define a caixa de ferramentas determina como adicionar o nome do estilo. Consulte a página da caixa de ferramentas para mais informações.

Bloqueios

A forma como você define o bloco determina como você precisa adicionar o nome do estilo. Saiba mais sobre as definições de blocos na nossa página de blocos personalizados. Você vai atribuir um dos estilos de bloco que definiu na propriedade blockStyles do tema ao bloco.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Definir o tema

Você também precisa informar a Blockly qual tema usar. Ao definir vários temas que usam o mesmo estilo de bloco e nomes de categoria, é possível permitir que o usuário escolha o tema que funciona melhor para ele e o mude dinamicamente sem precisar mudar as definições de bloco.

Tema inicial

A melhor maneira de definir um tema inicial é incluindo options.theme na chamada de injeção. É possível 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
   })
}

Mais informações sobre as opções podem ser encontradas na nossa página de configuração. Se nenhum tema for fornecido, o padrão será o tema clássico.

Temas dinâmicos

Se você quiser mudar o tema de forma dinâmica (por exemplo, permitindo que os usuários escolham um tema em um menu suspenso), chame yourWorkspace.setTheme(theme).

Script de criação de estilos de bloco

O Blockly fornece um script que vai receber um mapa de matizes ou valores hexadecimais e calcular as cores secundárias e terciárias. O script pode ser encontrado na pasta scripts/themes.

Temas integrados

O Blockly oferece vários temas de acessibilidade, especificamente alguns tipos de daltonismo:

• Alto contraste
• Deuteranopia/Protanopia
• Tritanomalía

Também temos:

• Tema clássico
• Moderno
• Modo escuro