Estilos y temas

La apariencia en CrossFly se resume en una mnemotecnia del propio framework:

Skin = estructura / renderizador · Theme = roles semánticos por modo.

Tres responsabilidades distintas colaboran.

1. Estilo por estado (default / focused / pressed)

Cada Component puede tener hasta tres estilos y el framework elige el correcto por frame según la interacción. Es por eso que un botón “se hunde” al ser presionado sin que tú animes nada.

comp.style(normal).focusedStyle(focado).pressedStyle(apertado);

2. Skin — la fábrica de forma

El Skin define la estructura: radios de esquina, grosores de borde, espaciados, íconos por defecto. Hay MaterialSkin, IOSSkin, FlutterSkin. Un Skin custom sobrescribe forma/espaciado — nunca color. Cambiar el Skin global re-viste todos los componentes.

3. Theme + ColorScheme — los roles semánticos

Los colores vienen de roles (PRIMARY, SURFACE, ON_SURFACE, ERROR, TITLE, HINT…) resueltos para el modo claro/oscuro actual, a partir de un ColorScheme generado de un color-semilla (Material You).

Styles.theme(0xFF6750A4, ThemeMode.DARK);   // una llamada tematiza todo, en el modo oscuro

El punto más poderoso: cambiar de tema en runtime sin recrear la UI

Aquí está la sutileza que hace trivial el modo claro/oscuro:

• Los colores de los estilos no son valores “congelados” — son PalColor, referencias vivas a la paleta.
• Existe un contador global de versión de estilo (styleVersion). Al aplicar un nuevo esquema / alternar el modo, el framework incrementa la versión y reaplica el tema en todas las ventanas abiertas — cada estilo basado en PalColor re-resuelve sus colores en el próximo frame. Ningún componente se destruye y recrea.

Complementando, los componentes cuyo estilo cambia de forma por modo registran cómo re-estilizarse (onRestyle/styled) y el restyle() reaplica el subárbol en el lugar:

Label titulo = new Label("Bem-vindo").styled(() -> Styles.theme().label(LabelRole.TITLE));
// ...al alternar el modo, el framework reevalúa ese proveedor y re-viste sin recrear el Label.
Styles.toggleDarkMode();

Por qué esta arquitectura

• Separar forma (Skin) de color (Theme) te deja cambiar identidad visual y paleta de modo independientemente — y adaptar al claro/oscuro sin tocar el Skin.
• PalColor + versión transforma “cambiar de tema” de “reconstruir el árbol” en “re-resolver colores en el próximo frame” — barato y sin parpadeo.

Ver también

• Aplicar: Temas y estilos · Modo claro/oscuro
• Siguiente: El ciclo de vida