5. Estilos e temas

O que você vai aprender: dar aparência sem fixar valores e alternar claro/escuro ao vivo. Pré-requisitos: 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á.

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.

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:

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:

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

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

Veja também

• Temas e estilos (ui) · Conceito: Estilos e temas