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 mediante la clase Themes. Si quieres personalizar componentes adicionales, proporcionamos el nombre del tema como una clase en el elemento div de inserción. Esto permite a los usuarios cambiar el aspecto de los componentes no compatibles mediante CSS. Nuestro objetivo principal al crear temas es empoderar a los desarrolladores para que creen experiencias de Blockly que sean más accesibles.

Propiedades del tema

Un tema es un objeto con varias propiedades: el tema base desde el que se extenderá, un objeto de estilo para bloques, categorías, componentes y fuentes, y la opción de usar o no sombreros para bloques de inicio.

Estilo del 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 sombras.
  • colourTertiary (opcional): Es el color del borde o de 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 de nombre de 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 la categoría

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

  • Color (obligatorio): El color de la categoría que se incluye en la caja de herramientas. Por lo general, estos colores deben ser los mismos que los colourPrimary en la mayoría de los bloques de la categoría. Esto permite a los usuarios distinguir fácilmente 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 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: Es el color de fondo del lugar de trabajo.
  • toolboxBackgroundColour: Color de fondo de la caja de herramientas
  • toolboxForegroundColour: Color del texto de la categoría de la caja de herramientas
  • flyoutBackgroundColour: Color de fondo del vuelo flotante
  • flyoutForegroundColour: Color del texto de la etiqueta flotante
  • flyoutOpacity: Opacidad de salto flotante
  • scrollbarColour: Color de la barra de desplazamiento
  • scrollbarOpacity: Opacidad de la barra de desplazamiento
  • insertionMarkerColour: Es el color del marcador de inserción (no se aceptan nombres de colores).
  • insertionMarkerOpacity: Es la opacidad del marcador de inserción.
  • markerColour: Es el color del marcador que se muestra en el modo de navegación del teclado.
  • cursorColour: Es el color del cursor que se muestra en el modo de navegación del teclado.

La mayoría de los demás componentes se pueden cambiar usando el nombre del tema en tu CSS. Sin embargo, si quieres cambiar un componente que todavía no forma parte de esta lista y que no se puede cambiar con CSS, informa el 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 grosor y el tamaño de una fuente.

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

Gorras de emprendimiento

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

Temas personalizados

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

  1. Cómo crear un tema
  2. Agregar nombres de estilos
  3. Cómo establecer un tema en un lugar de trabajo

Crear un tema

Se puede crear un tema con el constructor o defineTheme. El uso de defineTheme facilita la extensión de un tema preexistente y la configuración 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 describió anteriormente.

Un tema también puede tener un tema base, que proporcionará valores predeterminados para cualquier valor no especificado 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 estilos

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

Categorías

La forma en que defines tu caja de herramientas determina cómo debes agregar el nombre del estilo. Consulta la página de la caja de herramientas para obtener más información.

Bloqueos

La forma en que definas tu bloque determina cómo debes agregar el nombre del estilo. Puedes obtener más información sobre las definiciones de bloques en nuestra página de bloques personalizados. Asignarás a tu bloque uno de los diseños de bloque que definiste en la propiedad blockStyles del tema.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Configura tu tema

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

Tema inicial

La mejor manera de establecer un tema inicial es incluir options.theme en tu llamada de inserción. Puedes proporcionar el tema en JSON o 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
   })
}

Puedes encontrar más información sobre las opciones en nuestra página de configuración. Si no se proporciona un tema, se usará el tema clásico de forma predeterminada.

Temas dinámicos

Si quieres cambiar el tema de forma dinámica (por ejemplo, para permitir que los usuarios elijan un tema de 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 para ellos. La secuencia de comandos se puede encontrar en la carpeta scripts/themes.

Temas incorporados

Blockly proporciona una serie de temas para mejorar la accesibilidad, en particular algunos tipos de deficiencia en la visión del color:

También tenemos: