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.

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).

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:

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 · Modo claro/escuro
Próximo: O ciclo de vida