Light and Dark Themes
Esta pagina explica el comportamiento base de tema que Nuvex UI ya aporta a tu app. Usala para adoptar correctamente los temas built-in light y dark antes de pasar a controles runtime o a custom themes.
Lo que el framework ya te entrega
- Nuvex UI siempre registra
lightydarkcomo temas built-in. - El plugin de tema es opcional. Un proyecto puede quedarse en el baseline built-in y seguir teniendo una configuracion de tema completa.
- Si solo necesitas refinar como se ven light o dark, la via normal es
Design TokensoCSS Variables, no un tema nombrado nuevo.
Baseline de temas built-in
El framework arranca con un baseline real, no con un hook vacio. Light y dark siempre existen, cargan la jerarquia oficial de surfaces y son el punto de partida por defecto para casi cualquier integracion de producto.
- Light y dark ya estan registrados antes de que agregues cualquier custom theme.
- La jerarquia built-in de surfaces se comparte entre ambos temas y actua como baseline visual por defecto del framework.
- Puedes publicar una app completa sin registrar otro tema nombrado si el producto solo necesita el modelo built-in.
Resolucion inicial del tema
El tema inicial se resuelve en un orden estricto: valor persistido primero, luego preferencia del sistema, despues defaultTheme configurado y al final el fallback built-in. Esto importa cuando la app arranca en un tema distinto al que esperabas.
Si el comportamiento de arranque no coincide, revisa primero el orden de resolucion antes de agregar mas logica runtime. La mayoria de los desajustes vienen de storage o de la preferencia del sistema ganando antes que defaultTheme.
1. El tema persistido gana primero
Si storage esta habilitado y devuelve un tema registrado, Nuvex UI arranca ahi antes de evaluar cualquier otra fuente.
2. La preferencia del sistema gana despues
Si no hay tema persistido y la deteccion del sistema esta habilitada, prefers-color-scheme resuelve a light o dark cuando esos temas existen.
3. defaultTheme solo entra como siguiente fallback
defaultTheme se usa despues de storage y de la preferencia del sistema, no antes.
4. Light built-in es la red final de seguridad
Si nada mas resuelve y light existe, el framework cae en light como ultimo baseline.
Contrato de tema en el DOM
Cuando un tema queda activo, Nuvex UI escribe el atributo de tema en documentElement y, cuando isDark esta definido, aplica tambien el color-scheme correspondiente. Ese es el contrato que consumen el CSS de tu app y los selectores especificos por tema.
app/assets/styles/theme.css
Adopta light y dark en Vue y Nuxt
La configuracion normal es pequena: conserva los temas built-in, decide si storage y preferencia del sistema quedan habilitados, y define defaultTheme solo cuando el producto necesita otro baseline de arranque.
Esta pagina trata del consumo del baseline built-in. Si la siguiente tarea es alternar, persistir o reaccionar a cambios de tema desde componentes, continua en Runtime Theme API.
app/plugins/nuvex-ui.ts
nuxt.config.ts
Personaliza light y dark sin crear un tema nuevo
Usa Sass tokens para cambiar el baseline del framework en build-time, o CSS variables cuando el override pertenece a la cascada. No intentes re-registrar light o dark dentro de theme options solo para restilizarlos.
Los temas built-in no se reemplazan a traves del registro themes del plugin. Su personalizacion visual vive en Design Tokens y CSS Variables.
Cuando quedarte en los temas base
Quedate en light y dark cuando el producto sigue encajando en el modelo built-in y solo necesita refinamiento visual. Pasa a custom themes solo cuando realmente necesitas una variante nombrada adicional con identidad propia y una ruta runtime de seleccion.
Pasa a custom themes solo cuando el producto necesita otra opcion runtime nombrada. Si la necesidad es solo refinamiento visual, conserva light y dark y personaliza el baseline.
Siguientes pasos recomendados
Continua con la pagina que coincide con el siguiente cambio real de theming despues de estabilizar el baseline built-in.