Temas

Los temas cambian el aspecto de toda la aplicación: los colores del diagrama, de los gráficos y del globo de la gestión de licencias, y también la forma de los controles, las fuentes y los iconos.

Elegir un tema

Abrir los ajustes de apariencia

Abra Configuración (Ctrl+, en Windows y Linux, Cmd+, en macOS) y elija Apariencia.

Elegir un tema

Elija el tema en Configuración > Apariencia > Tema. Sistema sigue el aspecto claro u oscuro del sistema operativo, Claro y Oscuro son los temas integrados, y cada extensión habilitada añade sus temas a la lista. Cuando una familia de temas tiene un tema claro y otro oscuro, como Copper Night y Copper Day, la lista ofrece además Copper (sigue el sistema), que alterna entre los dos igual que lo hace el sistema operativo.

Comprobar el resultado

El tema cambia al instante. El Estilo del globo del panel de gestión de licencias se define en el mismo cuadro de diálogo.

También puede cambiar de tema sin abrir la configuración: ejecute desde la paleta de comandos el comando Apariencia del tema, por ejemplo Apariencia: Pixel, o haga clic en el icono Configuración, en la parte inferior de la barra de actividad, y elija un tema en el submenú Temas.

Cuadro de diálogo Settings en la página Appearance con el tema Copper Night, con los ajustes Interface language, Theme con el valor Copper Night, Globe style y la categoría Application — La configuración con el tema Copper Night

Panel de gestión de licencias con el tema Copper Night, con los mosaicos, la barra lateral y la barra de actividad en los colores del tema — El panel de gestión de licencias con el tema Copper Night

Densidad y tamaño del texto

Un tema determina lo juntos que quedan los controles y el tamaño del texto. Densidad y Tamaño del texto, en Configuración > Apariencia, cambian esos dos valores para todos los temas:

Ajuste	Valores
Densidad	Como el tema, Compacta, Normal, Amplia
Tamaño del texto	Como el tema, Pequeño, Normal, Grande

Como el tema, el valor predeterminado, usa los valores del tema activo.

Temas de ejemplo

Babel publica un conjunto de paquetes de temas como ejemplo. Aparecen en la vista Extensiones; instale uno y sus temas aparecerán en Configuración > Apariencia > Tema.

Paquete	Temas	Aspecto
Copper	Copper Night, Copper Day	Detalles de color cobre sobre gris carbón o sobre pergamino, y un comando que abre las reglas XML
Amethyst	Amethyst Night, Amethyst Day	Detalles de color amatista sobre ciruela oscuro o sobre lila, con iconos propios en la barra de actividad
Parchment	Parchment Day, Parchment Night	Papel y tinta: superficies con textura, botones como sellos e iconos dibujados a mano
Pixel	Pixel	Gris claro con fuentes pixeladas, iconos de pixel art y controles cuadrados

Parchment y Pixel contienen imágenes y necesitan Babel Desktop 0.3.0 o posterior. Una versión anterior los muestra con la indicación de que requieren un Babel Desktop más reciente y no los instala.

Pixel

Pixel es un único tema claro, así que no sigue el aspecto del sistema operativo. El paquete no contiene código: cambia el aspecto de la aplicación con tokens de color, ajustes de forma, tres archivos de fuentes e imágenes SVG.

Cambia lo siguiente:

Colores: paneles y barra de estado de color gris claro, con un único gris oscuro para la barra de actividad, los botones principales, la pestaña activa y el anillo de foco. Los gráficos usan una escala de grises con dos tonos apagados, azul acero y ocre.
Fuentes: la interfaz usa Pixel Operator y el texto monoespaciado usa Departure Mono. Las dos fuentes van en el paquete.
Forma: esquinas cuadradas, bordes gruesos, pestañas en recuadro y campos con contorno.
Iconos y logotipo: los 44 iconos de la interfaz están redibujados como pixel art en una cuadrícula de 16 por 16, y el logotipo de Babel también está dibujado con píxeles.
Casillas y botones de opción: un marco cuadrado de píxeles y un círculo escalonado sustituyen a los controles del sistema.

Estadísticas de protección con el tema Pixel: pestañas en recuadro con Renaming seleccionada, los contadores de 540 símbolos renombrados, 630 símbolos elegibles y una cobertura del 85,71 por ciento en una fuente pixelada, y el gráfico radial y las barras con el número de símbolos dibujados en gris oscuro y azul acero — Los resultados de ejecución con el tema Pixel

Cuadro de diálogo Settings en la página Appearance con el tema Pixel, con Interface language en English, Theme en Pixel, Globe style, y Density y Text size en Follow theme — La configuración con el tema Pixel

Las fuentes pixeladas están dibujadas sobre una cuadrícula de píxeles y se ven más nítidas en los tamaños que son múltiplos de esa cuadrícula. Si el texto se ve borroso o pequeño, elija un Tamaño del texto mayor.

Crear un tema

Un tema es una extensión pequeña. Parte de la paleta integrada clara u oscura (base) y sustituye solo los tokens de color que se indican; los demás se heredan. Por ejemplo, basta con definir accent para cambiar el color de los botones, los enlaces, las selecciones y los marcadores del globo.

Escribir el manifiesto

Cree un archivo extension.json que declare un tema o una familia con un tema claro y otro oscuro:

extension.json


{
  "apiVersion": 1,
  "id": "acme.teal",
  "name": "Teal",
  "version": "1.0.0",
  "author": "Acme",
  "license": "MIT",
  "description": "A teal theme family for Babel Desktop.",
  "minApp": "0.1.0",
  "minEngine": "12.0.0",
  "permissions": ["themes"],
  "contributes": {
    "themes": [
      {
        "id": "teal-night",
        "name": "Teal Night",
        "base": "dark",
        "family": "Teal",
        "colors": { "accent": "#2cc7b5", "canvas": "#0f1a1c", "activity-bg": "#0b1416" }
      },
      {
        "id": "teal-day",
        "name": "Teal Day",
        "base": "light",
        "family": "Teal",
        "colors": { "accent": "#0f8a7c" }
      }
    ]
  }
}

Seguir las reglas del manifiesto

id tiene la forma publisher.name en minúsculas, y version, minApp y minEngine son versiones de tres partes.
base es light o dark. Una family empareja como máximo un tema claro y uno oscuro.
colors solo acepta los tokens documentados, cada uno como valor hexadecimal de seis dígitos. Los tokens abarcan la paleta básica (bg, panel, panel-alt, text, muted, line, accent, accent-hover, accent-soft, on-accent, selection, focus, link), los colores de estado (success, warning, error y sus superficies -bg), el diagrama, el registro y la barra de estado, la barra de actividad, los distintivos, los mosaicos del panel, las series de los gráficos y el globo. Un token desconocido se rechaza con la lista de los nombres válidos.
Un objeto opcional icons sustituye iconos con nombre, como activity.settings o canvas.run, por formas vectoriales sencillas. Aquí no se acepta marcado SVG; para usar archivos SVG, añada una skin.
Un paquete también puede aportar commands que ejecutan una acción integrada (open-assembly, open-project, save, run, cancel, tab-settings, tab-rules, tab-activity, graph-fit, plugins); para ello hace falta el permiso commands.

Instalar el tema

Guarde el manifiesto como extension.json e instálelo con Instalar desde archivo… en la vista Extensiones.

Empaquetarlo para distribuirlo

Si quiere distribuir el tema con una descripción, imágenes y traducciones, empaquételo como paquete .babelext: un archivo ZIP que contiene extension.json, un README.md obligatorio que se muestra en la pestaña Detalles, archivos README.<locale>.md traducidos opcionales, imágenes en una carpeta media y las traducciones de la extensión en una carpeta locales. El Babel Desktop Extension SDK, con licencia MIT, proporciona el esquema del manifiesto y el comando babel-extension, que valida y empaqueta los paquetes.

Incremente version cada vez que cambie un tema e instale después el paquete nuevo sobre el anterior.

Forma, controles y tipografía

Además de colors, un tema puede definir shape, controls y type. Los tres son opcionales, y un miembro que se omite conserva su valor predeterminado.

extension.json


{
  "id": "teal-night",
  "name": "Teal Night",
  "base": "dark",
  "family": "Teal",
  "shape": { "radius": "small", "density": "compact", "border": "thin" },
  "controls": { "button": "outline", "tabs": "boxed", "field": "underline" },
  "type": { "body": "sans", "size": "normal" },
  "colors": { "accent": "#2cc7b5" }
}

Miembro	Valores	Valor predeterminado
`shape.radius`	`none`, `small`, `medium`, `large`, `round`	`medium`
`shape.density`	`compact`, `normal`, `comfortable`	`normal`
`shape.border`	`thin`, `normal`, `thick`	`normal`
`controls.button`	`solid`, `outline`, `pill`	`solid`
`controls.tabs`	`underline`, `pill`, `boxed`	`underline`
`controls.field`	`outlined`, `filled`, `underline`	`outlined`
`type.body`	`system`, `sans`, `serif`, `rounded`, `mono` o `font:<fontId>`	`system`
`type.mono`	`mono` o `font:<fontId>`	`mono`
`type.size`	`small`, `normal`, `large`	`normal`

Las familias de fuentes con nombre son fuentes ya instaladas en el equipo; no se descarga nada. Los ajustes Densidad y Tamaño del texto del usuario, cuando no están en Como el tema, tienen prioridad sobre shape.density y type.size. Un manifiesto que use alguno de estos miembros debe declarar minApp 0.2.0 o posterior.

Fuentes

Un paquete .babelext puede incluir sus propias fuentes. Declárelas en contributes.fonts y seleccione una con font:<fontId>:

extension.json


"fonts": [
  { "id": "inter", "family": "Inter", "file": "fonts/Inter-Regular.woff2", "weight": 400, "style": "normal", "license": "OFL-1.1" },
  { "id": "inter-semibold", "family": "Inter", "file": "fonts/Inter-SemiBold.woff2", "weight": 600, "style": "normal", "license": "OFL-1.1" }
]

Los archivos de fuentes son archivos WOFF2 situados en la carpeta fonts, de 1 MiB como máximo cada uno y 4 MiB en total.
license es obligatorio y debe ser OFL-1.1, Apache-2.0, MIT, CC0-1.0 o Ubuntu-1.0.
Todos los archivos declarados deben estar en el paquete y todos los archivos de fuentes deben estar declarados. Las fuentes nunca se cargan desde la red, y un extension.json suelto no puede declararlas.
Una familia que se usa en type.body necesita, además de la variante normal, una variante de peso 600 o superior.

Skins

Una skin añade imágenes a un tema. Tiene cuatro partes opcionales:

Parte	Contenido
`surfaces`	Texturas detrás de `window`, `titlebar`, `activitybar`, `sidebar`, `canvas`, `panel`, `dialog` y `statusbar`
`controls`	Caras para `button.primary`, `button.secondary`, `button.icon`, `tab`, `tab.active` y `field`, e imágenes para `checkbox` y `radio`
`icons`	Archivos SVG para las posiciones de iconos
`logo`	Un archivo PNG o SVG que cambia el aspecto del logotipo de Babel en la pantalla de inicio, en el cuadro de diálogo Acerca de y en los destinos principales del diagrama

extension.json


"skin": {
  "surfaces": { "window": { "image": "skins/paper.png", "layout": "tile" } },
  "controls": { "button.primary": { "image": "skins/stamp.svg", "slice": [10, 12, 10, 12], "ink": "#ffffff", "tone": "#6b3fa0" } },
  "icons": { "canvas.run": { "file": "skins/run.svg" } },
  "logo": { "file": "skins/mark.svg", "mode": "tint" }
}

Las imágenes se colocan directamente en la carpeta skins: archivos PNG de hasta 512 KiB y 2048 píxeles de lado, con un archivo @2x opcional del doble de tamaño, y archivos SVG de hasta 64 KiB. La carpeta completa no supera los 4 MiB.
La cara de un control se divide en nueve partes mediante slice, cuatro números enteros para arriba, derecha, abajo e izquierda, y así se estira sin deformar las esquinas. Declara además el color del texto ink y el color de fondo tone, con un contraste mínimo de 4,5:1.
Un icono o un logotipo con mode tint, el valor predeterminado, se pinta con el color que la aplicación ya usa en ese lugar; color conserva los colores del archivo.
Los archivos SVG se comprueban antes de usarlos: se rechazan los scripts, los estilos, las referencias externas y las entidades.
Todos los archivos de la carpeta deben usarse y todos los archivos nombrados en el manifiesto deben estar presentes. Un extension.json suelto no puede tener una skin.
Un manifiesto con una skin debe declarar minApp 0.3.0 o posterior. El icono de la aplicación y el instalador no admiten temas.