# Estilos y temas

> ComponentStyle por estado, colores ARGB, Skin y alternar claro/oscuro en runtime sin recrear la UI.

Source: https://crossfly.dev/es/docs/learn/styling-and-themes — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 5. Estilos y temas

> **Lo que vas a aprender:** dar apariencia sin fijar valores y alternar claro/oscuro en vivo.
> **Prerrequisitos:** [Layouts](/docs/learn/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.
```java
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**.
```java
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:
```java
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:
```java
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](/docs/ui/theming/dark-mode)).

## 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](/docs/learn/handling-input)

## Ver también
- [Temas y estilos (ui)](/docs/ui/theming) · Concepto: [Estilos y temas](/docs/concepts/styling-and-theming-model)