Custom Themes
Usa esta pagina cuando el producto necesita otro tema nombrado como ocean, brand-x o campaign-dark. La meta es agregar otra opcion runtime sin romper el baseline built-in que Nuvex UI ya entrega.
Lo que el framework ya soporta
- Nuvex UI ya incluye
lightydark. Un custom theme agrega otra opcion nombrada; no reemplaza el baseline built-in. - Los custom themes se registran mediante
theme.themesal arranque o medianteregisterThemeen runtime. - Si el producto solo necesita refinar la apariencia actual de light o dark, quedate en
Design TokensoCSS Variablesen lugar de crear otro nombre de tema.
Define el objeto de tema
La definicion de un custom theme debe mantenerse pequena: dale un nombre estable, un label opcional, decide si se comporta como dark y aporta solo los overrides runtime de tokens que hacen distinto a ese tema.
theme/ocean.ts
Registra custom themes al arranque
El registro al arranque es la via normal cuando el tema extra forma parte del shell del producto desde el inicio. Agregalo en theme.themes para que aparezca inmediatamente en el registry y pueda participar en la resolucion inicial.
Usa registro al arranque para temas de producto que conoces de antemano. Recurre al registro en runtime solo cuando los temas aparecen de forma condicional o se cargan despues.
app/plugins/nuvex-ui.ts
Opera custom themes en runtime
Una vez registrado, un custom theme se comporta como cualquier otro tema en la runtime API. Puedes consultarlo, activarlo, listarlo o volver a removerlo cuando el flujo del producto lo necesite.
Esta pagina se centra en el ciclo de vida del custom theme. Si el siguiente problema son toggles, persistencia o estado del tema activo desde componentes, continua en Runtime Theme API.
components/ThemeSelector.vue <script setup>
Respeta los limites de los temas built-in
El registro del plugin es para temas adicionales, no para redefinir light o dark. Los temas built-in no se pueden volver a registrar ni remover mediante la ruta de custom themes.
Si necesitas cambiar como se ven light o dark, personaliza el baseline. Si necesitas otra rama runtime nombrada, crea un custom theme.
Siguientes pasos recomendados
Continua con la pagina que coincide con la siguiente tarea real despues de que el custom theme ya existe en el registry.