# Estilos y temas

> El modelo de apariencia — Skin es estructura, Theme son roles semánticos por modo — y cambio de tema en runtime.

Source: https://crossfly.dev/es/docs/concepts/styling-and-theming-model — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Estilos y temas

La apariencia en CrossFly se resume en una mnemotecnia del propio framework:

> **Skin = estructura / renderizador · Theme = roles semánticos por modo.**

Tres responsabilidades distintas colaboran.

## 1. Estilo por estado (default / focused / pressed)
Cada `Component` puede tener **hasta tres estilos** y el framework elige el correcto por frame según la
interacción. Es por eso que un botón "se hunde" al ser presionado sin que tú animes nada.
```java
comp.style(normal).focusedStyle(focado).pressedStyle(apertado);
```

## 2. `Skin` — la fábrica de forma
El `Skin` define la **estructura**: radios de esquina, grosores de borde, espaciados, íconos por defecto. Hay
`MaterialSkin`, `IOSSkin`, `FlutterSkin`. Un `Skin` custom sobrescribe **forma/espaciado** — nunca
color. Cambiar el `Skin` global re-viste todos los componentes.

## 3. `Theme` + `ColorScheme` — los roles semánticos
Los **colores** vienen de roles (PRIMARY, SURFACE, ON_SURFACE, ERROR, TITLE, HINT…) resueltos para el **modo
claro/oscuro** actual, a partir de un `ColorScheme` generado de un **color-semilla** (Material You).
```java
Styles.theme(0xFF6750A4, ThemeMode.DARK);   // una llamada tematiza todo, en el modo oscuro
```

## El punto más poderoso: cambiar de tema en runtime sin recrear la UI
Aquí está la sutileza que hace trivial el modo claro/oscuro:

- Los colores de los estilos no son valores "congelados" — son **`PalColor`**, referencias **vivas** a la
  paleta.
- Existe un **contador global de versión de estilo** (`styleVersion`). Al aplicar un nuevo esquema /
  alternar el modo, el framework **incrementa la versión** y reaplica el tema en todas las ventanas abiertas —
  cada estilo basado en `PalColor` **re-resuelve sus colores en el próximo frame**. Ningún componente se
  destruye y recrea.

Complementando, los componentes cuyo estilo **cambia de forma** por modo registran cómo re-estilizarse
(`onRestyle`/`styled`) y el `restyle()` reaplica el subárbol en el lugar:
```java
Label titulo = new Label("Bem-vindo").styled(() -> Styles.theme().label(LabelRole.TITLE));
// ...al alternar el modo, el framework reevalúa ese proveedor y re-viste sin recrear el Label.
Styles.toggleDarkMode();
```

## Por qué esta arquitectura
- **Separar forma (Skin) de color (Theme)** te deja cambiar identidad visual y paleta de modo
  independientemente — y adaptar al claro/oscuro sin tocar el Skin.
- **`PalColor` + versión** transforma "cambiar de tema" de "reconstruir el árbol" en "re-resolver colores en el
  próximo frame" — barato y sin parpadeo.

## Ver también
- Aplicar: [Temas y estilos](/docs/ui/theming) · [Modo claro/oscuro](/docs/ui/theming/dark-mode)
- Siguiente: [El ciclo de vida](/docs/concepts/lifecycle)