# Estilos e temas

> ComponentStyle por estado, cores ARGB, Skin e alternar claro/escuro em runtime sem recriar a UI.

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

# 5. Estilos e temas

> **O que você vai aprender:** dar aparência sem fixar valores e alternar claro/escuro ao vivo.
> **Pré-requisitos:** [Layouts](/docs/learn/layouts).

## Exemplo completo (copiar, colar e rodar)
Define o tema do app (semente + skin), estiliza um botão por estado e um botão que alterna
claro↔escuro ao vivo — toda a UI acompanha sem restyle manual. Compila como está.
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;
import dev.crossfly.ui.skin.*;

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // tema: uma semente gera o esquema completo; o skin define a forma
      Styles.setColorScheme(0xFF6750A4, ThemeMode.LIGHT);
      Skin.set(new IOSSkin());

      Button botao = new Button("Salvar");
      botao.style(new ComponentStyle()
         .backColor(Styles.primaryColor)   // PalColor do tema (segue claro/escuro)
         .textColor(0xFFFFFFFF)            // int ARGB fixo 0xAARRGGBB
         .borderRadius(0.6f)
         .pressable());                    // habilita o feedback de pressão
      add(LAY_AUTO, botao);

      Button botaoTema = new Button("Alternar claro/escuro");
      botaoTema.onAction(c -> Styles.toggleDarkMode());   // re-veste toda a UI sozinho
      add(LAY_AUTO, botaoTema);
   }
}
```
> Os trechos abaixo mostram **só o miolo** (o que vai dentro de `onShow()`). Para rodar, coloque-os no esqueleto `MainWindow` acima.

## `ComponentStyle` e estilos por estado
Todo componente pode ter três estilos, escolhidos por frame: **default / focused / pressed**.
```java
botao.style(new ComponentStyle()
   .backColor(Styles.primaryColor)     // PalColor do tema (segue claro/escuro)
   .textColor(0xFFFFFFFF)              // ou int ARGB fixo 0xAARRGGBB
   .borderRadius(0.6f)
   .pressable());                      // habilita o feedback de pressão
```

## Skin e esquema de cores
O `Skin` define a **forma** (Material/iOS/Flutter); o `ColorScheme` define a **paleta** a partir de uma
cor-semente:
```java
Styles.setColorScheme(0xFF6750A4, ThemeMode.LIGHT);   // uma semente → esquema completo
Skin.set(new IOSSkin());                               // troca a identidade visual global
```

## Alternar claro↔escuro em runtime (sem recriar a UI)
`setDarkMode(...)` **re-aplica o tema em todas as janelas automaticamente** — se seus estilos usam
`PalColor` do tema (`Styles.primaryColor`, etc.), as cores mudam sozinhas:
```java
Button botaoTema = new Button("Modo escuro");
botaoTema.onAction(c -> Styles.toggleDarkMode());   // toda a UI acompanha, sem restyle manual
```
Para estilos que **mudam de forma** por modo, registre com `styled(...)` (ver
[Modo claro/escuro](/docs/ui/theming/dark-mode)).

## Constrói neste passo
O **tema do app** (semente + skin) + um **botão que troca claro/escuro** ao vivo.

## Recapitulando
`ComponentStyle` (default/focused/pressed); cores ARGB ou `PalColor` do tema; `Skin` = forma,
`ColorScheme` = paleta; `toggleDarkMode()` re-veste tudo sozinho.

## Próximos passos
→ [Lidando com entrada](/docs/learn/handling-input)

## Veja também
- [Temas e estilos (ui)](/docs/ui/theming) · Conceito: [Estilos e temas](/docs/concepts/styling-and-theming-model)