# Modo claro/escuro

> Alternar tema em tempo real sem reconstruir a UI — setDarkMode + onRestyle/styled/restyle.

Source: https://crossfly.dev/pt/docs/ui/theming/dark-mode — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Modo claro/escuro

O CrossFly troca entre claro e escuro **em tempo real e no lugar** — sem recriar telas. A chave é
`Styles.setDarkMode(...)` combinado com estilos que **se re-resolvem** a partir do tema.

## Exemplo completo (copiar, colar e rodar)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // Styles, ThemeMode, LabelRole

/** Tela principal executável. Aponte o launcher (classname) e rode: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      Styles.setColorScheme(0xFF6750A4, ThemeMode.LIGHT);   // paleta base (segue claro/escuro)
      setLayout(new VerticalLayout());

      // styled(...) reavalia o estilo a cada troca de tema (re-skin automático por modo)
      Label titulo = new Label("Bem-vindo")
         .styled(() -> Styles.theme().label(LabelRole.TITLE));
      add(LAY_AUTO, titulo);

      // Switch alterna o modo; setDarkMode re-veste toda a UI aberta sozinho.
      Switch alternar = new Switch("Modo escuro");
      alternar.onAction(c -> Styles.setDarkMode(alternar.isChecked()));
      add(LAY_AUTO, alternar);
   }
}
```
> Os trechos abaixo mostram **só o miolo** (o que vai dentro de `onShow()`). Para rodar, coloque-os no esqueleto `MainWindow` acima.

## O jeito automático (recomendado)
1. Use **`PalColor` do tema** (`Styles.textColor`, `cs.surface`) nos estilos — eles se re-resolvem sozinhos.
2. Chame `setDarkMode(...)`:
```java
Styles.toggleDarkMode();              // alterna claro ↔ escuro
Styles.setDarkMode(true);             // força escuro
boolean escuro = Styles.isDarkMode(); // estado atual
```
`setDarkMode(...)` já **re-aplica o tema em todas as janelas abertas** automaticamente (dispara
`restyleAll()` internamente), então estilos ligados a `PalColor` mudam de cor sem nenhum código extra.

## Estilos que dependem do modo → `styled(...)` / `onRestyle(...)`
Quando o estilo **muda de forma** conforme o modo (não só a cor), registre como o componente deve se
reestilizar. O callback roda uma vez na hora e de novo a cada troca de tema:
```java
Label titulo = new Label("Bem-vindo")
   .styled(() -> Styles.theme().label(LabelRole.TITLE));   // reavaliado a cada troca de tema

// para lógica além de estilo (trocar glyph de ícone, cor de gráfico, etc.):
Label l = new Label("Status");
l.onRestyle(() -> l.style(Styles.isDarkMode() ? estiloEscuro : estiloClaro));
```

## Re-skin manual de uma subárvore
Se você mudou o tema de forma não-global (ex.: só um painel), force a reaplicação:
```java
window.restyle();   // re-executa todos os onRestyle da árvore e repinta, sem recriar componentes
```

## Fluxo completo
```java
Switch alternar = new Switch("Modo escuro");
alternar.onAction(c -> Styles.setDarkMode(alternar.isChecked()));  // toda a UI acompanha
```

## Boas práticas
- Prefira **`PalColor` do tema** a cores fixas — o modo escuro passa a ser automático.
- Para estilos que mudam de estrutura por modo, use **`styled(...)`** (mais enxuto que `onRestyle`).
- Leia o modo com `Styles.isDarkMode()` / `Styles.themeMode()` ao **construir** estilos.

## Erros comuns
- Guardar cores fixas (`0xFF...`) e depois ter que reconstruir a tela na mão para o escuro.
- Reconstruir a UI inteira ao trocar tema — use `restyle()`/`styled(...)` e reaproveite os componentes.

## Veja também
- [Esquemas de cores](/docs/ui/theming/color-schemes) · [Estilizar componentes](/docs/ui/theming/styling-components) · [Skins](/docs/ui/theming/skins)