Pular para o conteúdo
CrossFly é 100% open sourceSiga no GitHub
CrossFlyCrossFly
Começar

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)

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

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:

window.restyle();   // re-executa todos os onRestyle da árvore e repinta, sem recriar componentes

Fluxo completo

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

Esta página foi útil?