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 esqueletoMainWindowacima.
O jeito automático (recomendado)
- Use
PalColordo tema (Styles.textColor,cs.surface) nos estilos — eles se re-resolvem sozinhos. - 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
PalColordo tema a cores fixas — o modo escuro passa a ser automático. - Para estilos que mudam de estrutura por modo, use
styled(...)(mais enxuto queonRestyle). - 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?Obrigado pelo feedback!