Temas de UI

Cada tema es una carpeta en themes/. Un tema contiene tokens de color, clases compartidas, un conjunto de colores de acento y una página de ejemplo. Todos los temas usan los mismos nombres de tokens. Cambiar de tema significa intercambiar los archivos CSS, no editar el HTML.

Los nombres de carpetas y archivos están en vietnamita (el kit fue creado en Vietnam). El README tiene un glosario.

Cuándo usar

Dibujando un mockup o creando una nueva página o pantalla de aplicación.
El usuario envía una captura de pantalla, nombre de producto o URL y quiere ese aspecto. Ver them-theme.md.
El usuario dice "usar tema X", "cambiar el acento a Y", "modo oscuro".

El estilo del propietario

Lee phong-cach-owner.md antes de dibujar o crear un nuevo tema. En resumen: un dashboard SaaS claro y compacto con muchos números y un color de acento, azul o morado. La fuente es un conjunto de aplicaciones que el propietario guardó como referencia.

Temas

Tema	Aspecto	Estado
clickup-radar	Barra lateral estilo ClickUp, tarjetas de Scenario Library, claro y compacto, acento morado	Aprobado 2026-11-03
saas-sang	Estilo del propietario: SaaS claro, números grandes, acento azul, una página de ejemplo por tema	Aprobado 2026-11-04

themes/_mau es una plantilla vacía para nuevos temas. No dibujes con ella.

Qué proyecto usa qué tema

Lee du-an.md en esta carpeta si existe. Es el archivo privado del propietario (en gitignore) que asigna sus proyectos a un tema, un tópico y un acento, y contiene sus convenciones de copia (idioma de la UI, cómo dirigirse al usuario). Síguelo sin preguntar de nuevo.

Sin du-an.md: copia du-an.example.md a du-an.md una vez que el propietario decida un tema para un proyecto, y complétalo. Cuando el propietario establezca un tema para un proyecto, actualiza du-an.md de inmediato.

Tópicos y páginas de ejemplo (tema saas-sang)

Para una página nueva, elige el tópico más cercano, copia su página de ejemplo y luego elimina lo que no necesites.

Tópico	Página de ejemplo	Acento predeterminado	Bueno para
Informes, analíticas	`themes/saas-sang/chu-de/bao-cao.html`	azul (`xanh-duong`)	paneles, KPIs, analíticas de tráfico y productos
Tareas	`themes/saas-sang/chu-de/cong-viec.html`	morado (`tim`)	tableros de tareas, tickets, seguimiento de proyectos
Ventas	`themes/saas-sang/chu-de/ban-hang.html`	índigo (`cham`)	administración de tienda, pedidos, pagos, stock
Noticias, lectura	`themes/saas-sang/chu-de/tin-tuc.html`	azul (`xanh-duong`)	newsletters, blogs, fuentes seleccionadas
Página de aterrizaje	`themes/saas-sang/chu-de/landing.html`	índigo (`cham`)	páginas de producto y marketing
Inicio de sesión, registro	`themes/saas-sang/chu-de/dang-ky.html`	índigo (`cham`)	pantallas de autenticación de cualquier app

Página de índice: themes/saas-sang/vi-du.html.
chu-de/chung.js es solo para las páginas de ejemplo. Lee ?mode= y ?accent=, dibuja iconos desde <i data-i>, y añade un botón Giao diện (Apariencia) en la esquina inferior derecha: Claro/Oscuro/Sistema, 8 acentos, idioma, y un enlace a bang-chon.html. Las opciones se guardan en localStorage saas-sang-xem. Cuando copies una página en un proyecto real, elimina chung.js: pega los SVG en línea o usa Lucide, y construye el propio interruptor de tema del proyecto sobre tokens.css.
saas-sang tiene tokens extra (--chart --chart-2 --grid --acc2 --acc2-soft --deep* --scrim), ver el README del tema.
Nuevas clases (KPI, gráficos, tablas agrupadas, diálogos, noticias, landing, inicio de sesión) están en themes/saas-sang/components.md.

Idioma

La copia de la UI sigue el idioma del proyecto (establecido en du-an.md). Sin configuración, usa el idioma en que escribe el usuario.
Las páginas de ejemplo están escritas en vietnamita. themes/i18n.js con el diccionario themes/i18n-en.js las traduce al inglés en el navegador.
Qué idioma se muestra: ?lang=en|vi primero, luego localStorage ui-lang, luego el idioma del navegador (vi* da vietnamita, cualquier otra cosa inglés).
Interruptores: la fila "Ngôn ngữ / Language" en el panel Giao diện en las páginas de saas-sang, y los botones VI | EN en la barra superior de bang-chon.html, que pasan ?lang= a la vista previa.
Traduce texto, placeholder, title, aria-label y el título de la página, y vigila el contenido añadido después.
Texto vietnamita nuevo o cambiado en una página de ejemplo: añade la cadena exacta y su inglés a themes/i18n-en.js, luego abre la página con ?lang=en y verifica que no quede vietnamita.
i18n es solo para la demo. Un proyecto real no copia i18n.js; escribe su copia en su propio idioma.

Elegir un tema

El proyecto está en du-an.md: usa ese tema y acento. No preguntes de nuevo.
El usuario nombró un tema o acento en el mensaje: haz eso.
Ninguno de los anteriores: haz una pregunta corta en el chat, con todas las opciones en la pregunta, en el idioma del usuario. Ejemplo:

Este proyecto aún no tiene tema. Usa clickup-radar (claro, compacto, acento morado), saas-sang (tu estilo, acento azul), o ¿quieres enviar una captura de pantalla de otro aspecto? Acentos de clickup-radar: morado, azul, cielo, verde azulado, verde, naranja, rosa, carbón. Acentos de saas-sang: azul, morado, índigo, cielo, verde azulado, verde, naranja, carbón.
El usuario quiere elegir y ajustar colores: abre el tablero de paletas (abajo).

Tablero de paletas

themes/bang-chon.html. Una paleta es cada color de un sitio web, no los colores de una tarjeta.

Diseño: paletas a la izquierda, una vista previa del sitio web a escala reducida a la derecha. Los temas con páginas de tópico (saas-sang, que declara trang y macDinh en THEMES) muestran la vista previa de la página para el propósito elegido; otros temas muestran vi-du.html. La barra superior tiene el selector de tema, Claro/Oscuro, VI | EN, Restablecer ediciones y Copiar paleta.
Sugerencias por propósito: dos filas de botones en la parte superior, "¿Para qué es el sitio?" (ventas, tareas, informes, página de aterrizaje, noticias) y "¿Cómo debería verse?" (minimalista, profesional, cálido, brillante, audaz, elegante). Selecciónalos y las 3 mejores paletas se mueven a la parte superior con una razón de una línea; la primera se aplica si no se ha editado ningún color. Haz clic en un botón de nuevo para limpiarlo. Las sugerencias provienen de la tabla de reglas GOI_Y en la página (coincidencia de propósito 2 puntos, coincidencia de estilo 1 punto); la página no llama a la IA. Para añadir un propósito o estilo, edita MUC, KIEU y GOI_Y.
Elegir: cada paleta muestra sus 5 colores principales y códigos hex. Haz clic en uno y todo el sitio web cambia. Elegir otra paleta descarta tus ediciones.
Editar la paleta actual: haz clic en una muestra en la tira, o abre "Todos los colores del sitio" para editar por grupo (fondos, texto y bordes, acento, estado, etiquetas) con el selector de color o un código hex. El sitio se actualiza al instante. Cada muestra muestra una relación de contraste, en rojo cuando está por debajo de 4.5. Los colores editados obtienen un botón "Restablecer".
Claro y oscuro se editan por separado.
Copiar paleta: da el CSS claro y oscuro más una frase para pegar en Claude. Cuando lo recibas, sigue them-theme.md, sección "Desde el tablero de paletas".

Cada paleta en el array PHOI almacena solo 4 colores base (página, tarjeta, texto, acento) para claro y oscuro. La función tinh() deriva los otros fondos, textos, bordes y tonos de acento. Los colores de estado y etiqueta permanecen como en el tema. Un nuevo tema debe añadirse al array THEMES en esta página. Las elecciones del usuario se almacenan en el navegador (clave phoi-mau).

Vista previa

Sirve la carpeta themes con cualquier servidor estático:

python -m http.server 8766 -d themes

Tablero de paletas: http://localhost:8766/bang-chon.html
Un tema: http://localhost:8766/<theme>/vi-du.html?mode=dark&accent=cam
Una página de tópico: http://localhost:8766/saas-sang/chu-de/<topic>.html?mode=dark&lang=en

Demo en vivo: https://huydp93.github.io/ui-theme-skill/themes/bang-chon.html

Nombres de tokens compartidos

Un nuevo tema debe definir todos estos, claro y oscuro. La lista completa anotada está en themes/_mau/tokens.css.

Grupo	Tokens
Fondo, texto	`--bg --side --surface --sunk --hover --line --line-strong --fg --fg2 --fg3`
Acento	`--acc --acc-hover --acc-fg --acc-soft --acc-line --ink --ink-fg`
Estado	`--ok --bad --err-fg --err-bg --code-bg --code-fg`
Sombra	`--shadow --shadow-pop`
Etiquetas de tipo	`--k-tip --k-tool --k-trend --k-opp --k-news --k-fg`
Píldoras de estado	`--s-new --s-watch --s-sent --s-seen` y una versión `-bg` de cada una
Radio	`--r-card --r-btn --r-btn-sm --r-badge --r-pill`
Altura	`--h-btn --h-btn-sm --h-field`
Diseño	`--w-side --h-top --w-page`
Fuente	`--font-sans --font-mono --icon-stroke`

Las clases compartidas (.card, .btn, .nav...) están en el components.md de cada tema.

Aplicar un tema

Siempre carga en este orden: fuente → tokens.css → components.css → mau-nhan.css. El enlace de fuente está en la parte superior de cada tokens.css del tema.

a) Canvas .dc.html

Pega tokens.css, components.css y mau-nhan.css dentro de <helmet><style>. Un canvas no puede cargar archivos externos.
Añade el <link> de Google Fonts a <helmet>.
Envuelve el tablero en <div class="t {{mode}}" data-accent="{{accent}}">. Una prop dark en DCLogic establece mode a dark o vacío. Elimina data-accent para usar el acento predeterminado.
La clase .t restablece los colores claros dentro de ella, por lo que el tablero sigue su prop incluso cuando el canvas mismo está oscuro.

b) HTML plano o Artifact

Copia el CSS dentro de una etiqueta <style> (un Artifact debe mantener el CSS dentro de la página) o usa <link> si la página está junto a la carpeta del tema.
Usa :root; no se necesita envoltorio .t. Pon data-theme="light|dark" y data-accent="..." en <html>. Sin data-theme sigue al sistema.
Diseño: comienza desde el vi-du.html del tema (o una página de tópico de saas-sang) y elimina lo que no necesites.

c) React + Tailwind

Copia tokens.css, components.css, mau-nhan.css en el proyecto e impórtalos una vez en el archivo CSS raíz.

Mapea los colores de Tailwind a los tokens; no copies códigos hex:

Tailwind v4, en el CSS raíz:

@theme inline {
  --color-bg: var(--bg); --color-surface: var(--surface); --color-line: var(--line);
  --color-fg: var(--fg); --color-fg2: var(--fg2); --color-fg3: var(--fg3);
  --color-acc: var(--acc); --color-acc-soft: var(--acc-soft);
  --radius-card: var(--r-card); --font-sans: var(--font-sans); --font-mono: var(--font-mono);
}

Tailwind v3, en tailwind.config:

theme: { extend: {
  colors: { bg: 'var(--bg)', surface: 'var(--surface)', line: 'var(--line)', fg: 'var(--fg)',
            fg2: 'var(--fg2)', fg3: 'var(--fg3)', acc: 'var(--acc)', 'acc-soft': 'var(--acc-soft)' },
  borderRadius: { card: 'var(--r-card)' },
  fontFamily: { sans: 'var(--font-sans)', mono: 'var(--font-mono)' }
} }

Pon las clases compartidas en @layer components para que las clases de Tailwind aún puedan sobrescribirlas.
Un interruptor claro/oscuro o de acento solo necesita establecer data-theme y data-accent en document.documentElement.

Reglas

Los iconos son SVGs de trazo, stroke-width desde --icon-stroke. Sin emojis como iconos.
Números, horas y códigos usan .mono.
Sin códigos hex en las páginas. ¿Necesitas un nuevo color? Añade un token al tema.
El rojo es solo para errores (--bad). Nunca hagas rojo un acento.
Los acentos claros deben ser lo suficientemente oscuros para que el texto blanco del botón alcance un contraste de 4.5.
Los datos de mockup son datos de ejemplo. Nunca uses datos reales ni los leas de .env o una base de datos.
Sigue las convenciones de copia en du-an.md (idioma, cómo dirigirse al usuario).
Verifica tanto el modo claro como el oscuro antes de mostrar al usuario.

Añadir un tema

Ver them-theme.md.

huydp93/theme-giao-dien

¿Qué es theme-giao-dien?

Preguntar en tu IA favorita

Documentación