El proyecto
Creación visual de temas para shadcn-vue
shadcn-vue Theme Generator es un espacio para crear temas CSS sin editar cada variable a mano. El editor reúne los tokens semánticos, muestra los cambios sobre componentes y pantallas, y permite copiar el CSS final para integrarlo en otro proyecto.
Además de la edición directa, ofrece dos puntos de partida: generar un tema desde un color o extraer una paleta de una imagen.
Punto de partida
Problema
Un tema de shadcn-vue incluye mucho más que un color principal. Fondos, texto, superficies, bordes, estados, gráficos y sidebar deben funcionar juntos en modos claro y oscuro. Ajustar esas variables una por una en CSS dificulta ver cómo afecta cada decisión a la interfaz completa.
Cuando creé el proyecto, no encontraba un editor de temas relevante enfocado en shadcn-vue. Los editores pensados para shadcn/ui servían como referencia, pero algunas diferencias sutiles de implementación hacían que el resultado no siempre se trasladara directamente. Eso me motivó a explorar una herramienta diseñada específicamente para el ecosistema Vue.
El proyecto explora una forma más visual y directa de crear, probar y exportar ese sistema de colores. La vista previa permite comprobar el resultado sobre componentes reales, en lugar de juzgar una paleta solo por sus muestras.
Contexto de uso
Para quién está pensado
La herramienta está orientada a quienes construyen interfaces con Vue y shadcn-vue y necesitan explorar una dirección visual antes de incorporarla a su código. También permite a perfiles de diseño revisar cómo se comporta una paleta en formularios, tablas, gráficos y pantallas completas.
Estos son usos posibles de la herramienta. El proyecto no cuenta con investigación de usuarios o métricas de adopción que permitan describirlos como necesidades validadas.
Decisión central
Solución
Organicé el trabajo alrededor de tokens con funciones concretas: primary, background, card, border, destructive y otros roles del sistema. Cada campo combina una muestra de color y un valor editable. Al cambiarlo, la vista previa se actualiza y muestra su efecto en la interfaz.
Los tokens se agrupan para que el panel siga siendo navegable. Los temas predefinidos ofrecen un punto de partida, mientras que la alternancia entre modo claro y oscuro, la comprobación de contraste y la exportación de CSS acompañan el proceso hasta su uso fuera del editor.
Flujo de trabajo
Cómo se construye un tema
- 01
Elegir un punto de partida
Comenzar con un tema predefinido, un color base o una imagen cargada en el navegador.
- 02
Ajustar roles semánticos
Editar los colores directamente y comprobar su efecto en componentes y pantallas de ejemplo.
- 03
Revisar legibilidad
Comparar las variantes clara y oscura y consultar las comprobaciones de contraste de pares de colores.
- 04
Exportar el resultado
Copiar las variables CSS del tema para integrarlas en un proyecto con shadcn-vue.
Funciones
Edición de colores y contraste
El panel agrupa los tokens semánticos y mantiene a la vista los componentes de ejemplo. Al ajustar un color, la vista previa muestra el cambio de inmediato y la comprobación WCAG indica si su combinación con el texto mantiene un contraste suficiente.
El catálogo, la búsqueda y Component X-Ray ayudan a localizar qué variable controla cada elemento. Los cambios se conservan en el almacenamiento local del navegador.
Funciones
Generación automática
Desde un color
Se elige un color base, una armonía cromática y un estilo de fondo. El generador trabaja en OKLCH para construir colores relacionados y asignarlos a los roles del tema, incluidas variantes claras y oscuras, colores de gráficos y sidebar. La generación también ajusta combinaciones de fondo y texto para favorecer el contraste.
Desde una imagen
La imagen se analiza localmente con Canvas. El proceso extrae colores de sus píxeles, elimina candidatos demasiado similares y selecciona tonos para los roles principales. Antes de generar el tema se puede optar por una interpretación conservadora o expresiva de la paleta.
En ambos casos, el resultado sigue siendo editable: la generación propone un sistema inicial y el panel permite afinar cada token.
Funciones
Exportación
Una vez ajustado el tema, se pueden copiar sus variables CSS e integrarlas en un proyecto con shadcn-vue. La exportación conserva los tokens de los modos claro y oscuro, para continuar el trabajo fuera del editor.
Implementación
Arquitectura
La aplicación usa Vue 3, TypeScript, Vite, Tailwind CSS 4 y componentes shadcn-vue sobre Reka UI. Culori interviene en las conversiones de color y OKLCH sirve como espacio de trabajo para la generación de paletas.
El editor y la vista previa son dos entradas separadas de Vite. La vista previa se ejecuta dentro de un iframe, lo que evita que los estilos de los componentes de prueba interfieran con los controles del editor. Ambas partes se comunican mediante postMessage: el editor envía los tokens y el preview los aplica como variables CSS; las interacciones del preview también pueden devolver información al editor.
La extracción de colores de imágenes y la persistencia del tema ocurren en el navegador, sin requerir una API para esas tareas.
Reflexiones finales
Aprendizajes
Este proyecto me permitió abordar el color como un conjunto de roles y relaciones, más que como valores aislados. Generar un tema completo exigió considerar la coherencia entre superficies, texto, estados y gráficos, y no solo producir tonos agradables por separado.
También reforzó la importancia de mostrar el efecto de cada decisión. La edición directa, las comprobaciones de contraste y la vista previa sobre componentes reales convierten la exploración visual en un proceso que puede evaluarse antes de exportar el CSS.