Tokens del tema

Un tema es una lista de tokens: nombres como accent o text_muted con un color (o un tamaño) cada uno. Los componentes nunca fijan colores a mano; le piden un token al tema. Por eso un solo cambio en el tema lo reestiliza todo.

Los tokens se usan de dos formas:

pz.text("Total").style(color="text_muted")                 # por nombre, en cualquier sitio donde va un color
pz.container(cuerpo, bg=self.resolved_theme().surface)       # como atributo del tema

Los colores son #rrggbb o #rrggbbaa (los dos últimos dígitos son la opacidad). Los nombres de tokens funcionan en style(), en los parámetros color=/tint= de los componentes, en pz.Paint y en los campos de color del diseñador.

Superficies

Las áreas grandes de la ventana, de atrás hacia adelante.

Token	Qué colorea	One Dark	One Light
`background`	La ventana detrás de todo, y el marco de la app, como las barras de título y de estado de los temas generados.	`#3b414d`	`#dcdcdd`
`surface`	Tarjetas (`ui.card`), estadísticas y otras áreas elevadas.	`#2f343e`	`#ebebec`
`elevated`	Lo que flota: menús, popovers, desplegables, tooltips, diálogos, toasts y la paleta de comandos.	`#2f343e`	`#ebebec`
`editor`	Donde se escribe: campos de texto, el editor de código, el fondo de la terminal en temas generados.	`#282c33`	`#fafafa`
`panel`	Paneles laterales y docks de un workspace, el panel de ayuda.	`#2f343e`	`#ebebec`
`title_bar`	La barra de título propia (`ui.title_bar`, `ui.window_frame`).	`#3b414d`	`#dcdcdd`
`status_bar`	La barra de estado al pie de un workspace.	`#3b414d`	`#dcdcdd`
`tab_bar`	La franja detrás de las pestañas.	`#2f343e`	`#ebebec`
`tab_active`	La pestaña seleccionada.	`#282c33`	`#fafafa`
`tab_inactive`	Las demás pestañas.	`#2f343e`	`#ebebec`
`terminal`	El fondo del widget de terminal.	`#282c33`	`#fafafa`

Bordes

Token	Qué colorea	One Dark	One Light
`border`	Bordes principales: campos, botones outline, separadores, marcos.	`#464b57`	`#c9c9ca`
`border_variant`	Bordes más suaves: tarjetas, botones rellenos, separadores de listas.	`#363c46`	`#dfdfe0`
`border_focused`	El anillo del campo o la lista con el foco.	`#47679e`	`#7d82e8`
`border_selected`	El borde de los elementos seleccionados (un acento translúcido).	`#293b5b`	`#cbcdf6`

Elementos y elementos ghost

Los elementos son controles rellenos (el ui.button por defecto, chips, controles segmentados). Los elementos ghost no tienen fondo hasta que pasas el puntero: filas de listas, botones ghost y de icono, ítems de menú, filas de árboles.

Token	Qué colorea	One Dark	One Light
`element`	Controles rellenos en reposo.	`#2e343e`	`#ebebec`
`element_hover`	Controles rellenos bajo el puntero.	`#363c46`	`#dfdfe0`
`element_active`	Controles rellenos mientras se pulsan.	`#454a56`	`#cacaca`
`element_selected`	Un control relleno seleccionado (una opción segmentada, un icono elegido).	`#454a56`	`#cacaca`
`ghost_hover`	Una fila o botón ghost bajo el puntero.	`#363c46`	`#dfdfe0`
`ghost_active`	Una fila o botón ghost mientras se pulsa.	`#454a56`	`#cacaca`
`ghost_selected`	La fila seleccionada de una lista, árbol, menú o pestaña.	`#454a56`	`#cacaca`

Texto, iconos y acento

Token	Qué colorea	One Dark	One Light
`text`	Texto y etiquetas.	`#dce0e5`	`#242529`
`text_muted`	Texto secundario: descripciones, leyendas, pestañas inactivas.	`#a9afbc`	`#58585a`
`text_placeholder`	El texto de ejemplo de los campos vacíos.	`#878a98`	`#7e8086`
`text_disabled`	Controles deshabilitados.	`#878a98`	`#7e8086`
`text_accent`	Enlaces y texto resaltado.	`#74ade8`	`#5c78e2`
`icon`	Iconos junto al texto.	`#dce0e5`	`#242529`
`icon_muted`	Iconos secundarios: botones de icono ghost, iconos de listas.	`#a9afbc`	`#58585a`
`accent`	El color de marca: botones principales (`solid`), interruptores, sliders, barras de progreso, casillas.	`#74ade8`	`#5c78e2`
`on_accent`	Texto e iconos dibujados sobre el acento (dentro de un botón solid o una insignia solid).	`#1c2025`	`#fafafa`

Estado

Los usa tint= (ui.badge, ui.callout, ui.button, ui.progress…), los toasts, los mensajes de validación y los gráficos.

Token	Qué colorea	One Dark	One Light
`error`	Errores, botones destructivos, campos inválidos.	`#d07277`	`#d36151`
`warning`	Advertencias.	`#dec184`	`#a48819`
`success`	Mensajes de éxito, cambios positivos en `ui.stat`.	`#a1c181`	`#669f59`
`info`	Avisos informativos (el acento, por defecto).	`#74ade8`	`#5c78e2`
`hint`	Pistas, el aviso más discreto.	`#788ca6`	`#7274a7`

Control de versiones

Para árboles de archivos, pestañas y diffs (ui.tree, ui.diff_stat, el margen del editor de código).

Token	Qué colorea	One Dark	One Light
`created`	Archivos y líneas añadidos.	`#a1c181`	`#669f59`
`modified`	Archivos y líneas modificados.	`#dec184`	`#a48819`
`deleted`	Archivos y líneas eliminados.	`#d07277`	`#d36151`
`conflict`	Archivos con conflictos.	`#dec184`	`#a48819`
`ignored`	Archivos ignorados.	`#878a98`	`#7e8086`

Editor de código

Para pz.code_editor, ui.terminal y los bloques de código.

Token	Qué colorea	One Dark	One Light
`editor_text`	Código sin resaltar.	`#acb2be`	`#242529`
`line_number`	Números de línea.	`#4e5a5f`	`#a2a3a7`
`line_number_active`	El número de la línea con el cursor.	`#d0d4da`	`#242529`
`active_line`	El fondo de la línea con el cursor.	`#2f343ebf`	`#ebebecbf`
`selection`	Texto seleccionado (también en los campos).	`#74ade83d`	`#5c78e23d`
`scrollbar`	Barras de desplazamiento.	`#c8ccd44c`	`#2425294c`
`scrollbar_hover`	Una barra de desplazamiento bajo el puntero.	`#c8ccd480`	`#24252980`
`search_match`	Resultados de búsqueda en el editor.	`#74ade866`	`#5c78e266`
`shadow`	Sombras de menús, popovers y diálogos.	`#0000004d`	`#00000026`

Sintaxis, terminal y personas

Estos tres son colecciones en lugar de colores sueltos.

syntax: un diccionario de un nombre de resaltado a un color, o a (color, "italic") / (color, "bold"). Los nombres principales son primary, comment, comment.doc, keyword, function, type, string, string.escape, number, boolean, constant, property, attribute, operator, variable, variable.special, punctuation, punctuation.bracket, tag, title y link_uri. Un nombre con punto que falta usa su primera parte (string.escape → string).
ansi: los colores de la terminal: black, red, green, yellow, blue, magenta, cyan, white, bright_black y dim.
players: una tupla de colores para avatares y colaboradores; ui.avatar(index=n) y ui.facepile toman el n-ésimo.

Token	Qué colorea	One Dark	One Light
`syntax.keyword`	`def`, `if`, `return`...	`#b477cf`	`#a449ab`
`syntax.function`	Nombres de funciones.	`#73ade9`	`#5b79e3`
`syntax.string`	Cadenas.	`#a1c181`	`#649f57`
`syntax.comment`	Comentarios.	`#5d636f`	`#a2a3a7`
`syntax.type`	Clases y tipos.	`#6eb4bf`	`#3882b7`
`syntax.number`	Números.	`#bf956a`	`#ad6e25`
`ansi.red`	Texto rojo en la terminal (y así con cada color ANSI).	`#d07277`	`#d36151`
`players.0`	El primer color de avatar (el acento, por defecto).	`#74ade8`	`#5c78e2`

Tamaños y metadatos

Token	Por defecto	Qué fija
`radius`	`6.0`	Radio de las esquinas de tarjetas, diálogos y superficies grandes (las tarjetas usan `radius + 2`).
`radius_sm`	`4.0`	Radio de botones, campos, chips y filas de listas.
`ui_font_size`	`14.0`	El tamaño base del texto de la interfaz; lo fijan el Tamaño de fuente de un formulario y el `size` del estilo global.
`buffer_font_size`	`14.0`	Tamaño del texto en el editor de código.
`name`		El nombre que usan `pz.themes.get` y `theme = "..."`.
`appearance`		`"dark"` o `"light"`; `theme.is_dark` lo lee.

Desde Python

t = pz.themes.get("One Dark")
t.accent                 # '#74ade8'
t.color("text_muted")    # lo mismo que t.text_muted; los colores hex pasan sin cambios
t.tokens()               # todos los tokens como diccionario
t.to_dict()              # apto para JSON, el formato que escribe Theme.save

Los nombres siguen el formato de temas del editor Zed, así que los temas hechos para él se pueden importar (mira Crear temas). La API de temas lista cada método.