Temas

Haz que la app sea tuya. Elige un tema o crea uno, dale estilo a cualquier widget como en CSS y elige sus iconos y fuentes, en código o en el diseñador.

Pyzed separa qué muestra tu interfaz de cómo se ve. Todos los componentes leen sus colores del tema actual, un conjunto de colores con nombre llamados tokens (background, text, border, accent…). Cambia el tema y toda la app lo sigue; cambia un widget con style() y solo cambia ese widget.

Una app, seis temas incluidos: cada componente sigue al tema, sin cambiar su código.

import pyzed as pz
from pyzed import ui


class Notas(pz.App):
    theme = "Gruvbox Dark"  # cualquier nombre de pz.themes.names()

    def view(self):
        tarjeta = pz.Style(background="elevated", border=(1, "border"), radius=10, padding=16)
        return pz.column([
            ui.heading("Notas"),
            pz.container(ui.label("Con estilo como CSS, con los colores del tema.")).style(tarjeta),
        ])

Cómo encaja todo

flowchart LR
    T["Tema<br/>colores con nombre (tokens)"] --> C["Componentes<br/>variantes · tintes · tamaños"]
    C --> S["style()<br/>un widget, como CSS"]
    G["Estilo global<br/>App.style"] --> S

Tema: la paleta de toda la app. Elige uno incluido, sigue el modo claro u oscuro del sistema o crea el tuyo a partir de tres colores.
Los componentes toman sus colores del tema. Sus variantes y tintes (variant="outline", tint="error") eligen cuáles de esos colores usan.
style() cambia un widget, como CSS; los estilos con nombre reutilizan un aspecto; App.style fija la fuente y los colores de toda la ventana.

Pyzed Design también lo sigue

El diseñador visual es una app de Pyzed, así que también tiene temas: elige uno en Ajustes → Apariencia → Tema y todo el editor cambia a la vez. Cada formulario conserva su propio tema, que se fija en sus propiedades de Aspecto (ver Estilo de formularios), así que el editor y la app que diseñas pueden verse distintos.

Pyzed Design cambiando de aspecto al elegir distintos temas en Ajustes — Pyzed Design cambiando de tema desde Ajustes.

Pyzed Design con el tema Ayu y el formulario de inicio de sesión abierto

En esta sección

Empieza aquíElegir un temaLos temas incluidos, oscuro, claro o según el sistema, y cambiar de tema mientras la app corre.Tokens del temaCada color de un tema y qué pinta, con los valores de One Dark y One Light.Crear temasCambia el acento, deriva, genera a partir de tres colores, escribe un tema en JSON, importa temas de Zed.EstilosFondos, bordes, radio, sombras, degradados y efectos para cualquier widget, y el estilo global.Estilo de componentesVariantes, tintes y tamaños, style() en componentes, estilos con nombre y componentes que siguen el tema.DiseñadorEstilo de formulariosTema, acento, radio y fuentes de un formulario en Pyzed Design, y qué guarda el archivo .pzform.Iconos y fuentesUnos 2000 iconos incluidos, iconos por tipo de archivo y cargar tus propias fuentes.EjemplosRecetario de temasSeis temas completos para copiar: marca, alto contraste, terminal retro, vidrio, pastel y mixto.API de temasTheme, themes y las funciones de color, método por método.