josedario87
8dee464a54
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 48s
PROBLEMA: Los componentes de Nuxt UI (UCard, UButton, etc.) usaban colores fijos de --color-coffee-* que no respondían a cambios de tema. SOLUCIÓN: Mapear --ui-color-neutral-* a variables --brand-* dinámicas: - neutral-50/100 → --brand-bg (fondos más oscuros) - neutral-200 → --brand-surface (fondos elevados) - neutral-300/400 → --brand-border (bordes) - neutral-500/600/700 → --brand-primary/primary-strong (interactivos) - neutral-800/900/950 → --brand-text/text-muted (textos) RESULTADO: Ahora los UCard y otros componentes de Nuxt UI cambian correctamente cuando se selecciona un tema predefinido. Archivos modificados: - app/assets/css/main.css: Remapeo de variables --ui-color-neutral-*
Analítica Núcleo Data Studio
Panel de administración y monitoreo empresarial para Núcleo Río Frío, construido con Nuxt 4, Vue 3 y Nuxt UI.
Características Principales
- 🎨 Sistema de Temas Personalizable - Personaliza todos los colores de la interfaz
- 🔐 Autenticación con Authentik - SSO seguro con Authentik Proxy Outpost
- 📊 Dashboards Interactivos - Visualizaciones de datos con filtros dinámicos
- 🌙 Dark Mode Optimizado - Tema oscuro pensado para uso prolongado
- 🚀 Performance - Construido con Nuxt 4 y Vue 3 Composition API
- 📱 Responsive - Optimizado para desktop, tablet y móvil
Sistema de Temas
Analítica Núcleo cuenta con un sistema de temas completamente personalizable que permite ajustar los colores de la interfaz según tus preferencias.
Para Usuarios
- Accede a Configuración (
/settings) para personalizar el tema - Elige entre 4 temas predefinidos: Café, Azul, Verde, Carbón
- O personaliza cada color individualmente con el selector visual
- Exporta/importa temas para compartir o hacer backup
📖 Documentación completa: THEME_CUSTOMIZATION.md
Para Desarrolladores
- Usa siempre variables CSS (
--brand-*) en lugar de colores hardcoded - Aprovecha las clases utilitarias (
.brand-card,.brand-shell, etc.) - Utiliza el composable
useTheme()para manipular temas programáticamente
📖 Guía de desarrollo: DEVELOPER_GUIDE.md
Look at the Nuxt documentation to learn more.
Setup
Make sure to install dependencies:
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
Development Server
Start the development server on http://localhost:3000:
# npm
npm run dev
# pnpm
pnpm dev
# yarn
yarn dev
# bun
bun run dev
Production
Build the application for production:
# npm
npm run build
# pnpm
pnpm build
# yarn
yarn build
# bun
bun run build
Locally preview production build:
# npm
npm run preview
# pnpm
pnpm preview
# yarn
yarn preview
# bun
bun run preview
Check out the deployment documentation for more information.