5. Estilos y temas

Lo que vas a aprender: dar apariencia sin fijar valores y alternar claro/oscuro en vivo. Prerrequisitos: Layouts.

Ejemplo completo (copiar, pegar y ejecutar)

Define el tema de la app (semilla + skin), estiliza un botón por estado y un botón que alterna claro↔oscuro en vivo — toda la UI acompaña sin restyle manual. Compila tal cual.

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: una semilla genera el esquema completo; el skin define la forma
      Styles.setColorScheme(0xFF6750A4, ThemeMode.LIGHT);
      Skin.set(new IOSSkin());

      Button botao = new Button("Salvar");
      botao.style(new ComponentStyle()
         .backColor(Styles.primaryColor)   // PalColor del tema (sigue claro/oscuro)
         .textColor(0xFFFFFFFF)            // int ARGB fijo 0xAARRGGBB
         .borderRadius(0.6f)
         .pressable());                    // habilita el feedback de presión
      add(LAY_AUTO, botao);

      Button botaoTema = new Button("Alternar claro/escuro");
      botaoTema.onAction(c -> Styles.toggleDarkMode());   // re-viste toda la UI por sí solo
      add(LAY_AUTO, botaoTema);
   }
}

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

ComponentStyle y estilos por estado

Todo componente puede tener tres estilos, elegidos por frame: default / focused / pressed.

botao.style(new ComponentStyle()
   .backColor(Styles.primaryColor)     // PalColor del tema (sigue claro/oscuro)
   .textColor(0xFFFFFFFF)              // o int ARGB fijo 0xAARRGGBB
   .borderRadius(0.6f)
   .pressable());                      // habilita el feedback de presión

Skin y esquema de colores

El Skin define la forma (Material/iOS/Flutter); el ColorScheme define la paleta a partir de un color semilla:

Styles.setColorScheme(0xFF6750A4, ThemeMode.LIGHT);   // una semilla → esquema completo
Skin.set(new IOSSkin());                               // cambia la identidad visual global

Alternar claro↔oscuro en runtime (sin recrear la UI)

setDarkMode(...) re-aplica el tema en todas las ventanas automáticamente — si tus estilos usan PalColor del tema (Styles.primaryColor, etc.), los colores cambian solos:

Button botaoTema = new Button("Modo escuro");
botaoTema.onAction(c -> Styles.toggleDarkMode());   // toda la UI acompaña, sin restyle manual

Para estilos que cambian de forma por modo, regístralos con styled(...) (ver Modo claro/oscuro).

Construyes en este paso

El tema de la app (semilla + skin) + un botón que cambia claro/oscuro en vivo.

Recapitulando

ComponentStyle (default/focused/pressed); colores ARGB o PalColor del tema; Skin = forma, ColorScheme = paleta; toggleDarkMode() re-viste todo solo.

Próximos pasos

→ Manejando la entrada

Ver también

• Temas y estilos (ui) · Concepto: Estilos y temas