Theming Overview

Usa esta pagina para identificar que capa de Theming necesitas tocar en Nuvex UI: temas base, runtime, tokens, variables CSS o temas personalizados.

Abrir Light and Dark ThemesAbrir Runtime Theme API

Que cubre Theming

Theming empieza cuando la libreria ya esta instalada y renderizando bien, y ahora necesitas adaptar la apariencia, controlar el tema activo o extender el sistema con nuevas variantes.

Temas base

Explica que ya existe en light y dark antes de que intentes redefinir el sistema.

Control en runtime

Sirve para leer, cambiar o persistir el tema activo desde codigo.

Tokens

Sirven para decidir que valor semantico debe cambiar cuando ajustas color, surface o marca.

Variables CSS

Sirven para overrides en la cascada cuando el ajuste no requiere crear un tema nuevo.

Custom themes

Sirven cuando el producto necesita una variante nombrada adicional ademas de light y dark.

Como pensar el sistema de tema

La forma correcta de entender Theming no es por features sueltas, sino por capas: primero el baseline, despues la seleccion del tema activo y luego la personalizacion.

1. Parte del baseline

Nuvex UI ya incluye light y dark. Ese es el contrato inicial del sistema.

2. Resuelve el tema activo

El tema inicial puede venir de una preferencia guardada, del sistema o de un default configurado.

3. Decide si el cambio es operativo o visual

Si necesitas cambiar o persistir el tema, estas en runtime. Si necesitas cambiar como se ve, probablemente estas en tokens o variables CSS.

4. Ajusta la capa correcta

No todo cambio visual requiere un tema nuevo. A veces basta con tokens; otras veces con variables CSS.

5. Crea un tema nuevo solo cuando haga falta

Un tema personalizado tiene sentido cuando el producto necesita otra variante con identidad propia, no cuando solo estas refinando el baseline.

Comportamiento por defecto

Antes de personalizar, conviene tener claro que comportamiento ya existe sin configuracion adicional.

  • Nuvex UI ya incluye los temas light y dark desde el inicio.
  • El tema inicial puede resolverse desde storage, system preference o un default theme configurado segun lo que este disponible.
  • El theming en runtime es opcional. Un proyecto puede quedarse en el baseline built-in y seguir siendo totalmente valido.

Elige la siguiente guia

Continua segun el tipo de cambio que necesitas resolver.

Quiero entender light y dark

Ve a Light and Dark Themes si primero necesitas adoptar correctamente el baseline built-in.

Quiero cambiar el tema desde codigo

Ve a Runtime Theme API si necesitas un toggle, un selector o persistencia en runtime.

Quiero decidir la capa semantica correcta

Ve a Design Tokens si el cambio involucra color, surfaces o intencion de marca.

Quiero hacer overrides en CSS

Ve a CSS Variables si el cambio pertenece a la cascada y no al registro de temas.

Quiero agregar una variante nueva

Ve a Custom Themes si el producto necesita un tema nombrado adicional.

Build-time vs runtime

La mayoria de los errores en Theming aparecen cuando intentas resolver un problema correcto en la capa equivocada. Si el cambio modifica la identidad visual base, piensa en build-time. Si modifica que tema esta activo durante el uso, piensa en runtime.

Personalizacion en build-time

Usa esta capa cuando quieres definir el baseline visual antes de que la app corra: variables Sass, token seeds y orden de estilos.

Personalizacion en runtime

Usa esta capa cuando la app necesita seleccionar, cambiar o persistir el tema activo mientras el usuario interactua.

Errores que conviene evitar

Estos errores suelen aparecer cuando se mezclan capas o se usa una pagina equivocada para resolver el problema.

  • Cambiar variables CSS primero cuando la decision real debio tomarse en la capa de tokens.
  • Crear un tema completamente nuevo cuando el producto solo necesitaba ajustar light y dark.
  • Tratar runtime y build-time como si resolvieran el mismo tipo de problema.