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 el div de inserción. Esto permite a los usuarios cambiar el aspecto de los componentes no compatibles a través de CSS. Nuestro objetivo principal al crear temas es permitir que los desarrolladores creen experiencias de Blockly más accesibles.

Propiedades del tema

Un tema es un objeto con varias propiedades: el tema base del que se extiende, un objeto de estilo para bloques, categorías, componentes y fuentes, y si se deben usar o no 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 sombras.
  • colourTertiary (opcional): Es el borde o el color 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 un color 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 los colourPrimary en la mayoría de los bloques de la categoría. Esto permite que los usuarios sepan fácilmente qué bloques pertenecen a una categoría determinada.

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

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

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

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

Estilos de componente

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

  • workspaceBackgroundColour: El color de fondo del lugar de trabajo
  • toolboxBackgroundColour: Es el color de fondo de la caja de herramientas.
  • toolboxForegroundColour: Color del texto de la categoría de la caja de herramientas
  • flyoutBackgroundColour: Es el color de fondo del menú flotante.
  • flyoutForegroundColour: Es el color del texto de la etiqueta flotante.
  • flyoutOpacity: Opacidad del menú flotante
  • scrollbarColour: Es el color de la barra de desplazamiento.
  • scrollbarOpacity: Opacidad de la barra de desplazamiento
  • insertionMarkerColour: Es el color del marcador de inserción (no acepta nombres de color).
  • insertionMarkerOpacity: Es la opacidad del marcador de inserción.
  • markerColour: Es el color del marcador que se muestra en el modo de navegación con el 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 hay un componente que deseas cambiar que aún no forma parte de esta lista y que 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 grosor y el tamaño de una fuente.

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

Gorras de carrera

Si configuras startHats: true directamente en un objeto de tema, se agregará un sombrero a todos los bloques sin conexiones anteriores ni de salida. Si quieres tener más control sobre exactamente qué bloques tienen 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. Crea un tema
  2. Agrega nombres de estilos
  3. Establece tu 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 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.

Agrega nombres de estilos

Ahora que creamos un tema, debemos agregar el nombre de los estilos a las definiciones de bloque y 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 encontrar más información sobre las definiciones de bloques en nuestra página de bloques personalizados. Asignarás uno de los estilos de bloque que definiste en la propiedad blockStyles del tema a tu bloque.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Establecer tu tema

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

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á de forma predeterminada el tema clásico.

Temas dinámicos

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

Crear secuencia de comandos con estilo de bloque

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

Temas incorporados

Blockly proporciona una serie de temas para la accesibilidad, en especial para ciertos tipos de deficiencias de la visión de color:

También tenemos lo siguiente: