.png)
Hay decisiones de diseño que vuelven para morderte más tarde. El color es una de ellas. Al principio parece un problema para después, primero que funcione y luego vemos. Avanzas unos meses y terminas cambiando el valor #0FB9B1 en una docena de archivos porque marketing quiere que el turquesa principal sea un 5 por ciento más oscuro. Maravilloso.
La tematización no es un lujo, es higiene. Separar la apariencia visual de la lógica de los componentes suele llegar cuando los requisitos ya gritan: modo claro y oscuro, whitelabel, multicliente, accesibilidad. ¿Por qué esperar si sabes que tarde o temprano aparecerán?
Si prevés que esas necesidades pueden llegar, no es sobreingeniería prepararlo desde el día uno. Es tender las vías antes de que el tren acelere.
El punto de partida práctico es el diseño de tokens de color. No basta con definir un único --primary y listo. Necesitas estructura, contexto y semántica.
Piensa en roles, no en colores. En vez de azul, usa Info. En vez de verde, usa Success. Tu interfaz comunica estados; tus tokens deben reflejarlo. Roles típicos: Basic como base neutra para campos y superficies; Primary para elementos interactivos principales; Info para información contextual; Success para resultados positivos; Error para validaciones fallidas o acciones destructivas.
Añade variantes de estado. Un botón no luce igual en reposo, al pasar el cursor, al enfocarlo, cuando está deshabilitado o seleccionado. Variantes comunes: Default como estado estándar; Muted para deshabilitado o bajo peso visual; Highlight para hover o focus; Strong para activo o seleccionado; Facing para el color del contenido que se coloca encima.
No olvides los niveles de elevación para fondos, especialmente en layouts anidados o con profundidad. Tokens como level-0 para el fondo base y level-1 para el primer nivel de anidación te permiten capas coherentes y consistentes.
Si vendes B2B o SaaS, la tematización no es negociable. Cada cliente pedirá su logo y, más pronto que tarde, sus colores de marca. O bien rezas para que se parezcan a tu paleta por defecto, o inviertes un tiempo enorme en construir lo que debiste iniciar desde el principio: un sistema de temas. Para escalar el branding personalizado, tu sistema debe desacoplar estilo y estructura. Los tokens son el camino sostenible.
¿Y si no lo hiciste a tiempo? No te preocupes. Aunque tu proyecto ya esté avanzado, no necesitas una refactorización gigantesca. Empieza ahora y de forma incremental.
Primero, crea un archivo de tema y define tus tokens en un ámbito claro, por ejemplo en una clase raíz como .mi-tema o en :root. Agrupa por niveles de elevación, por roles como basic y primary, y por estados como default, muted, highlight, strong y facing. Esa será tu paleta única y centralizada.
Después, crea un segundo tema con la misma estructura, por ejemplo un tema oscuro, y cámbialo con una sola clase en el contenedor. Ese patrón te permitirá añadir nuevos temas o variaciones de marca sin tocar los componentes.
Refactoriza estilos para usar tokens en tus componentes clave. Por ejemplo, un botón base puede leer background desde var(--basic-default), texto desde var(--basic-facing), y cambiar a var(--basic-highlight) en hover o var(--basic-strong) al hacer clic. Un botón primario haría lo mismo con var(--primary-default), var(--primary-muted), var(--primary-highlight) y var(--primary-strong). Empieza por componentes muy usados como botones y formularios; poco a poco todo el código se volverá flexible y preparado para temas.
En resumen, la tematización no es una decisión para después. Si tu producto va a crecer en equipo, funcionalidades o audiencia, empezar con temas desde el día uno es la base más inteligente. Comienza con tokens de color, piensa en roles y estados, y deja de ver tu UI como azul sobre blanco para verla como Primary sobre Level-0. Tu yo del futuro te lo agradecerá, tus clientes te lo exigirán y, seamos honestos, también querías un modo oscuro.
En Q2BSTUDIO vivimos esta filosofía en cada proyecto de software a medida y aplicaciones a medida. Diseñamos sistemas escalables con tokens, temas y componentes que se adaptan a cada marca sin dolor, integrando además inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, automatización de procesos, agentes IA e ia para empresas. Si buscas un partner que piense en el mañana desde el primer commit, conoce nuestro enfoque de desarrollo de software y aplicaciones a medida.
Consejo práctico final para tu checklist: define roles de color coherentes, crea variantes de estado desde el inicio, establece niveles de elevación para fondos, centraliza los tokens del tema y aplica esos tokens en componentes críticos. Con ese esqueleto, añadir nuevos temas, soportar clientes B2B, incluir dark mode o adaptar tu producto a múltiples marcas será cuestión de configuración y no de refactorización.
