# Estilos e temas

> O modelo de aparência — Skin é estrutura, Theme são papéis semânticos por modo — e troca de tema em runtime.

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

# Estilos e temas

A aparência no CrossFly se resume a uma mnemônica do próprio framework:

> **Skin = estrutura / renderizador · Theme = papéis semânticos por modo.**

Três responsabilidades distintas colaboram.

## 1. Estilo por estado (default / focused / pressed)
Cada `Component` pode ter **até três estilos** e o framework escolhe o certo por frame conforme a
interação. É por isso que um botão "afunda" ao ser pressionado sem você animar nada.
```java
comp.style(normal).focusedStyle(focado).pressedStyle(apertado);
```

## 2. `Skin` — a fábrica de forma
O `Skin` define a **estrutura**: raios de canto, espessuras de borda, espaçamentos, ícones padrão. Há
`MaterialSkin`, `IOSSkin`, `FlutterSkin`. Um `Skin` custom sobrescreve **forma/espaçamento** — nunca
cor. Trocar o `Skin` global re-veste todos os componentes.

## 3. `Theme` + `ColorScheme` — os papéis semânticos
As **cores** vêm de papéis (PRIMARY, SURFACE, ON_SURFACE, ERROR, TITLE, HINT…) resolvidos para o **modo
claro/escuro** atual, a partir de um `ColorScheme` gerado de uma **cor-semente** (Material You).
```java
Styles.theme(0xFF6750A4, ThemeMode.DARK);   // uma chamada tematiza tudo, no modo escuro
```

## O ponto mais poderoso: trocar tema em runtime sem recriar a UI
Aqui está a sutileza que torna o modo claro/escuro trivial:

- As cores dos estilos não são valores "congelados" — são **`PalColor`**, referências **vivas** à
  paleta.
- Existe um **contador global de versão de estilo** (`styleVersion`). Ao aplicar um novo esquema /
  alternar o modo, o framework **incrementa a versão** e reaplica o tema em todas as janelas abertas —
  cada estilo baseado em `PalColor` **re-resolve suas cores no próximo frame**. Nenhum componente é
  destruído e recriado.

Complementando, componentes cujo estilo **muda de forma** por modo registram como se reestilizar
(`onRestyle`/`styled`) e o `restyle()` reaplica a subárvore no lugar:
```java
Label titulo = new Label("Bem-vindo").styled(() -> Styles.theme().label(LabelRole.TITLE));
// ...ao alternar o modo, o framework reavalia esse provedor e re-veste sem recriar o Label.
Styles.toggleDarkMode();
```

## Por que essa arquitetura
- **Separar forma (Skin) de cor (Theme)** deixa você trocar identidade visual e paleta de modo
  independente — e adaptar ao claro/escuro sem mexer no Skin.
- **`PalColor` + versão** transforma "trocar tema" de "reconstruir a árvore" em "re-resolver cores no
  próximo frame" — barato e sem piscar.

## Veja também
- Aplicar: [Temas e estilos](/docs/ui/theming) · [Modo claro/escuro](/docs/ui/theming/dark-mode)
- Próximo: [O ciclo de vida](/docs/concepts/lifecycle)