Temas

Los temas son una forma de personalizar el aspecto de Blockly. Puedes personalizar los colores de los bloques, los colores de las categorías y ciertos componentes a través de la clase Themes. Si deseas personalizar componentes adicionales, proporcionamos el nombre del tema como una clase en la div de inyección. Esto permite a los usuarios cambiar el aspecto de cualquier componente no compatible a través de CSS. Nuestro objetivo principal al crear temas es permitir que los desarrolladores creen experiencias de Blockly más accesibles.

Propiedades de temas

Un tema es un objeto con varias propiedades: el tema base desde el que se extiende, un objeto de estilo para bloques, categorías, componentes y fuentes, y si se deben usar sombreros para los bloques de inicio.

Estilo de bloque

Un estilo de bloque se compone de cuatro campos:

  • colourPrimary (obligatorio): Es el color de fondo del bloque.
  • colourSecondary (opcional): Es el color de fondo si el bloque es un bloque de sombra.
  • colourTertiary (opcional): Es el color del borde o del resaltado del bloque.
  • hat (opcional): Agrega un sombrero a un bloque si el valor se establece en cap. Obtén más información sobre los sombreros.

Bloque con flechas que apuntan a los colores primario, secundario y terciario 

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

Un tema incluirá una asignación del nombre del estilo de bloque al objeto de estilo de bloque:

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

Estilo de categoría

Un estilo de categoría solo contiene una propiedad de color.

  • Color (obligatorio): Es el color de la categoría en la caja de herramientas. Por lo general, estos colores deben ser los mismos que colourPrimary en la mayoría de los bloques de la categoría. Esto facilita que los usuarios sepan qué bloques pertenecen a una categoría determinada.

Captura de pantalla de la caja de herramientas con diferentes colores de categorías

const mathCategory = {
   'colour':'290'
}

Un tema incluirá una asignación del nombre de la categoría al objeto de estilo de categoría:

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

Estilos de componentes

Un tema puede establecer el color o el valor de los siguientes componentes:

  • workspaceBackgroundColour: El color de fondo del espacio de trabajo
  • toolboxBackgroundColour: El color de fondo de la caja de herramientas
  • toolboxForegroundColour: El color del texto de la categoría de la caja de herramientas
  • flyoutBackgroundColour: El color de fondo del menú desplegable
  • flyoutForegroundColour: El color del texto de la etiqueta del menú desplegable
  • flyoutOpacity: La opacidad del menú desplegable
  • scrollbarColour: El color de la barra de desplazamiento
  • scrollbarOpacity: La opacidad de la barra de desplazamiento
  • insertionMarkerColour: El color del marcador de inserción (no acepta nombres de colores)
  • insertionMarkerOpacity: La opacidad del marcador de inserción
  • markerColour: El color del marcador que se muestra en el modo de navegación con teclado
  • cursorColour: El color del cursor que se muestra en el modo de navegación con teclado

La mayoría de los demás componentes se pueden cambiar usando el nombre del tema en tu CSS. Sin embargo, si hay un componente que deseas cambiar que aún no forma parte de esta lista y no se puede cambiar con CSS, envía un problema con más información.

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

Estilos de fuente

Un estilo de fuente es un objeto que contiene la familia, el peso y el tamaño de una fuente.

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

Sombreros de inicio

Si estableces startHats: true directamente en un objeto de tema, se agregará un sombrero a todos los bloques sin conexiones anteriores ni de salida. Si deseas tener más control sobre qué bloques obtienen un sombrero, puedes usar la propiedad de estilo de bloque.

Temas personalizados

Para agregar un tema a tu aplicación de Blockly, deberás hacer lo siguiente:

  1. Crear un tema
  2. Agregar nombres de estilo
  3. Establecer el tema en un espacio de trabajo

Crear un tema

Se puede crear un tema con el constructor o con defineTheme. El uso de defineTheme facilita la extensión de un tema preexistente y el establecimiento de todos los valores con un solo objeto. Un tema tiene un nombre y es un objeto con los estilos de bloque, los estilos de categoría y otras propiedades como se explicó anteriormente.

Un tema también puede tener un tema base, que proporcionará valores predeterminados para cualquier valor que no se especifique en el tema personalizado.

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

Este es un ejemplo del uso de defineTheme.

Agregar nombres de estilo

Ahora que creamos un tema, debemos agregar el nombre de los estilos a las definiciones de bloque y categoría.

Categorías

Para usar uno de los estilos de categoría definidos en categoryStyles de tu tema, agrégalo a la definición de categoría:

JSON

{
 "kind": "category",
 "name": "Logic",
 "categorystyle": "logic_category"
}

XML

<category name="Logic" categorystyle="logic_category"></category>

Bloques

Para usar uno de los estilos de bloque definidos en blockStyles de tu tema, agrégalo a la definición de bloque:

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Establecer el tema

También debes indicarle a Blockly qué tema usar. Si defines varios temas que usan el mismo estilo de bloque y nombres de categoría, puedes permitir que el usuario elija el tema que mejor se adapte a sus necesidades y cambiarlo de forma dinámica sin tener que cambiar las definiciones de bloque.

Tema inicial

La mejor manera de establecer un tema inicial es incluir la opción de configuración theme en la llamada a Blockly.inject. Puedes proporcionar el tema en JSON o JavaScript.

JSON

Blockly.inject('blocklyDiv', {
  theme: {
     "blockStyles" : {
        "list_blocks": {
           "colourPrimary": "#4a148c",
           "colourSecondary":"#AD7BE9",
           "colourTertiary":"#CDB6E9"
        }
     },
     "categoryStyles" : {
        "list_category": {
           "colour": "#4a148c"
        }
     },
     "componentStyles" : {
        "workspaceBackgroundColour": "#1e1e1e"
     }
  },
  ...
});

JavaScript

Blockly.inject('blocklyDiv', {
  theme: Blockly.Theme.defineTheme('themeName', {
     'blockStyles': blockStyles,
     'categoryStyles': categoryStyles,
     'componentStyles': componentStyles
  }),
  ...
});

Si no se proporciona ningún tema , se usará el tema clásico de forma predeterminada.

Temas dinámicos

Si deseas cambiar tu tema de forma dinámica (por ejemplo, en el caso de permitir que los usuarios elijan un tema en un menú desplegable), puedes llamar a yourWorkspace.setTheme(theme).

Crear secuencia de comandos de estilos de bloque

Blockly proporciona una secuencia de comandos que tomará un mapa de tonos o valores hexadecimales y calculará los colores secundarios y terciarios. La secuencia de comandos se puede encontrar en la carpeta scripts/themes.

Temas incorporados

Blockly proporciona varios temas para la accesibilidad, específicamente ciertos tipos de deficiencia en la percepción del color:

También tenemos lo siguiente: