# Temas

> Personaliza el aspecto de una app Pyzed: temas incluidos y propios, tokens de color, estilos tipo CSS para cualquier widget, variantes de componentes, temas de formularios, iconos y fuentes, en código y en Pyzed Design.

Source: https://albakore.github.io/pyzed/es/theming/

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.

```python
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

```mermaid
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](https://albakore.github.io/pyzed/es/theming/forms/)), así que el editor y la app que diseñas pueden
verse distintos.

**One Light:**

## En esta sección

style()</code> en componentes, estilos con nombre y componentes que siguen el tema.', href: '/pyzed/es/theming/components/', icon: 'puzzle' },
{ title: 'Estilo de formularios', text: 'Tema, acento, radio y fuentes de un formulario en Pyzed Design, y qué guarda el archivo <code>.pzform</code>.', href: '/pyzed/es/theming/forms/', icon: 'laptop', tag: 'Diseñador' },
{ title: 'Iconos y fuentes', text: 'Unos 2000 iconos incluidos, iconos por tipo de archivo y cargar tus propias fuentes.', href: '/pyzed/es/theming/icons-fonts/', icon: 'star' },
{ title: 'Recetario de temas', text: 'Seis temas completos para copiar: marca, alto contraste, terminal retro, vidrio, pastel y mixto.', href: '/pyzed/es/theming/cookbook/', icon: 'rocket', tag: 'Ejemplos' },
{ title: 'API de temas', text: '<code>Theme</code>, <code>themes</code> y las funciones de color, método por método.', href: '/pyzed/es/reference/theme/', icon: 'document' },
]}
/>

**Usa tokens, no colores hex:**

Escribe `"accent"` o `"border"` en vez de `"#3a7bc8"` siempre que puedas. Los colores de los tokens cambian con el
tema, así que tu app se sigue viendo bien en modo claro y oscuro.

**Estado de esta sección:**

Todo lo que describen estas páginas funciona hoy, en código y en Pyzed Design. Se están añadiendo capturas de cada
tema incluido en claro y oscuro. Los temas para móvil y web llegarán con esas plataformas, que están planificadas
pero todavía no disponibles.