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 encap
. Obtén más información sobre los sombreros.
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.
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 herramientastoolboxForegroundColour
: Color del texto de la categoría de la caja de herramientasflyoutBackgroundColour
: Color de fondo del vuelo flotanteflyoutForegroundColour
: Color del texto de la etiqueta flotanteflyoutOpacity
: Opacidad de salto flotantescrollbarColour
: Color de la barra de desplazamientoscrollbarOpacity
: Opacidad de la barra de desplazamientoinsertionMarkerColour
: 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:
- Cómo crear un tema
- Agregar nombres de estilos
- 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:
- Tema clásico
- Moderna
- Modo oscuro