Modo claro/oscuro

CrossFly cambia entre claro y oscuro en tiempo real y en el sitio — sin recrear pantallas. La clave es Styles.setDarkMode(...) combinado con estilos que se re-resuelven a partir del tema.

Ejemplo completo (copiar, pegar y ejecutar)

package com.exemplo;

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

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      Styles.setColorScheme(0xFF6750A4, ThemeMode.LIGHT);   // paleta base (sigue claro/oscuro)
      setLayout(new VerticalLayout());

      // styled(...) reevalúa el estilo en cada cambio 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 el modo; setDarkMode re-viste toda la UI abierta solo.
      Switch alternar = new Switch("Modo escuro");
      alternar.onAction(c -> Styles.setDarkMode(alternar.isChecked()));
      add(LAY_AUTO, alternar);
   }
}

Los fragmentos siguientes muestran solo el núcleo (lo que va dentro de onShow()). Para ejecutar, colócalos en el esqueleto MainWindow de arriba.

La forma automática (recomendada)

Usa PalColor del tema (Styles.textColor, cs.surface) en los estilos — se re-resuelven solos.
Llama setDarkMode(...):

Styles.toggleDarkMode();              // alterna claro ↔ oscuro
Styles.setDarkMode(true);             // fuerza oscuro
boolean escuro = Styles.isDarkMode(); // estado actual

setDarkMode(...) ya re-aplica el tema en todas las ventanas abiertas automáticamente (dispara restyleAll() internamente), así que los estilos ligados a PalColor cambian de color sin ningún código extra.

Estilos que dependen del modo → `styled(...)` / `onRestyle(...)`

Cuando el estilo cambia de forma según el modo (no solo el color), registra cómo debe el componente reestilizarse. El callback se ejecuta una vez en el momento y de nuevo a cada cambio de tema:

Label titulo = new Label("Bem-vindo")
   .styled(() -> Styles.theme().label(LabelRole.TITLE));   // reevaluado en cada cambio de tema

// para lógica más allá del estilo (cambiar glyph de ícono, color de gráfico, etc.):
Label l = new Label("Status");
l.onRestyle(() -> l.style(Styles.isDarkMode() ? estiloEscuro : estiloClaro));

Re-skin manual de un subárbol

Si cambiaste el tema de forma no global (ej.: solo un panel), fuerza la reaplicación:

window.restyle();   // re-ejecuta todos los onRestyle del árbol y repinta, sin recrear componentes

Flujo completo

Switch alternar = new Switch("Modo escuro");
alternar.onAction(c -> Styles.setDarkMode(alternar.isChecked()));  // toda la UI acompaña

Buenas prácticas

Prefiere PalColor del tema a colores fijos — el modo oscuro pasa a ser automático.
Para estilos que cambian de estructura por modo, usa styled(...) (más conciso que onRestyle).
Lee el modo con Styles.isDarkMode() / Styles.themeMode() al construir estilos.

Errores comunes

Guardar colores fijos (0xFF...) y luego tener que reconstruir la pantalla a mano para el oscuro.
Reconstruir la UI entera al cambiar de tema — usa restyle()/styled(...) y reaprovecha los componentes.

Véase también

Esquemas de colores · Estilizar componentes · Skins