Temas de UI

Cada tema é uma pasta em themes/. Um tema contém tokens de cor, classes compartilhadas, um conjunto de cores de destaque e uma página de exemplo. Todos os temas usam os mesmos nomes de tokens. Trocar de tema significa trocar os arquivos CSS, não editar o HTML.

Os nomes de pastas e arquivos estão em vietnamita (o kit foi feito no Vietnã). O README contém um glossário.

Quando usar

Ao criar um mockup ou construir uma nova página ou tela de aplicativo.
O usuário envia uma captura de tela, nome do produto ou URL e deseja copiar essa aparência. Veja them-theme.md.
O usuário diz "use o tema X", "mude o destaque para Y", "modo escuro".

O estilo do proprietário

Leia phong-cach-owner.md antes de desenhar ou criar um novo tema. Em resumo: um painel SaaS claro e compacto, com muitos números e uma cor de destaque, azul ou roxa. A fonte é um conjunto de aplicativos que o proprietário salvou como referências.

Temas

Tema	Aparência	Status
clickup-radar	Barra lateral estilo ClickUp, cartões da Biblioteca de Cenários, claro e compacto, destaque roxo	Aprovado 2026-11-03
saas-sang	Estilo do proprietário: SaaS claro, números grandes, destaque azul, uma página de exemplo por tópico	Aprovado 2026-11-04

themes/_mau é um modelo vazio para novos temas. Não desenhe com ele.

Qual projeto usa qual tema

Leia du-an.md nesta pasta, se existir. É um arquivo privado do proprietário (gitignorado) que mapeia seus projetos para um tema, um tópico e um destaque, e contém suas convenções de cópia (idioma da UI, como se dirigir ao usuário). Siga-o sem perguntar novamente.

Não há du-an.md: copie du-an.example.md para du-an.md assim que o proprietário decidir um tema para um projeto e preencha-o. Quando o proprietário definir um tema para um projeto, atualize du-an.md imediatamente.

Tópicos e páginas de exemplo (tema saas-sang)

Para uma nova página, escolha o tópico mais próximo, copie sua página de exemplo e remova o que não for necessário.

Tópico	Página de exemplo	Destaque padrão	Adequado para
Relatórios, análises	`themes/saas-sang/chu-de/bao-cao.html`	azul (`xanh-duong`)	painéis, KPIs, análises de tráfego e produto
Tarefas	`themes/saas-sang/chu-de/cong-viec.html`	roxo (`tim`)	quadros de tarefas, tickets, acompanhamento de projetos
Vendas	`themes/saas-sang/chu-de/ban-hang.html`	índigo (`cham`)	admin de loja, pedidos, pagamentos, estoque
Notícias, leitura	`themes/saas-sang/chu-de/tin-tuc.html`	azul (`xanh-duong`)	newsletters, blogs, feeds curados
Landing page	`themes/saas-sang/chu-de/landing.html`	índigo (`cham`)	páginas de produto e marketing
Login, cadastro	`themes/saas-sang/chu-de/dang-ky.html`	índigo (`cham`)	telas de autenticação de qualquer aplicativo

Página de índice: themes/saas-sang/vi-du.html.
chu-de/chung.js é apenas para as páginas de exemplo. Ele lê ?mode= e ?accent=, desenha ícones de <i data-i>, e adiciona um botão Giao diện (Aparência) no canto inferior direito: Claro/Escuro/Sistema, 8 destaques, idioma e um link para bang-chon.html. As escolhas são mantidas em localStorage saas-sang-xem. Ao copiar uma página para um projeto real, remova chung.js: cole os SVGs inline ou use Lucide, e construa o próprio seletor de tema do projeto em tokens.css.
saas-sang tem tokens extras (--chart --chart-2 --grid --acc2 --acc2-soft --deep* --scrim), veja o README do tema.
Novas classes (KPI, gráficos, tabelas agrupadas, diálogos, notícias, landing page, login) estão em themes/saas-sang/components.md.

Idioma

O texto da UI segue o idioma do projeto (definido em du-an.md). Sem configuração, use o idioma em que o usuário está escrevendo.
As páginas de exemplo estão escritas em vietnamita. themes/i18n.js com o dicionário themes/i18n-en.js as traduz para inglês no navegador.
Qual idioma aparece: ?lang=en|vi primeiro, depois localStorage ui-lang, depois o idioma do navegador (vi* mostra vietnamita, qualquer outra coisa mostra inglês).
Alternadores: a linha "Ngôn ngữ / Language" no painel Giao diện nas páginas saas-sang, e os botões VI | EN na barra superior de bang-chon.html, que passam ?lang= para a pré-visualização.
Ele traduz texto, placeholder, title, aria-label e o título da página, e monitora conteúdo adicionado posteriormente.
Texto vietnamita novo ou alterado em uma página de exemplo: adicione a string exata e seu equivalente em inglês a themes/i18n-en.js, depois abra a página com ?lang=en e verifique se não sobrou vietnamita.
A i18n é apenas para a demonstração. Um projeto real não copia i18n.js; escreva seu texto em seu próprio idioma.

Escolhendo um tema

O projeto está em du-an.md: use esse tema e destaque. Não pergunte novamente.
O usuário nomeou um tema ou destaque na mensagem: faça isso.
Nenhum dos casos: faça uma pergunta curta no chat, com todas as opções na pergunta, no idioma do usuário. Exemplo:

Este projeto ainda não tem tema. Use clickup-radar (claro, compacto, destaque roxo), saas-sang (seu estilo, destaque azul), ou você quer enviar uma captura de tela de outra aparência? Destaques do clickup-radar: roxo, azul, céu, verde-azulado, verde, laranja, rosa, carvão. Destaques do saas-sang: azul, roxo, índigo, céu, verde-azulado, verde, laranja, carvão.
O usuário deseja escolher e ajustar cores: abra o painel de paletas (abaixo).

Painel de paletas

themes/bang-chon.html. Uma paleta é toda a cor de um site, não as cores de um cartão.

Layout: paletas à esquerda, uma pré-visualização do site em escala reduzida à direita. Temas com páginas de tópico (saas-sang, que declara trang e macDinh em THEMES) pré-visualizam a página para o propósito escolhido; outros temas mostram vi-du.html. A barra superior tem o seletor de tema, Claro/Escuro, VI | EN, Redefinir edições e Copiar paleta.
Sugestões por propósito: duas linhas de botões no topo, "Qual é o objetivo do site?" (vendas, tarefas, relatórios, landing page, notícias) e "Como deve parecer?" (mínimo, profissional, acolhedor, brilhante, ousado, elegante). Selecione-os e as 3 melhores paletas vão para o topo com uma linha de explicação; a primeira é aplicada se nenhuma cor foi editada. Clique novamente em um botão para limpá-lo. As sugestões vêm da tabela de regras GOI_Y na página (correspondência de propósito 2 pontos, correspondência de estilo 1 ponto); a página não chama IA. Para adicionar um propósito ou estilo, edite MUC, KIEU e GOI_Y.
Escolher: cada paleta mostra suas 5 cores principais e códigos hexadecimais. Clique em uma e o site inteiro muda. Escolher outra paleta descarta suas edições.
Editar a paleta atual: clique em uma amostra na faixa, ou abra "Todas as cores do site" para editar por grupo (fundos, texto e bordas, destaque, status, rótulos) com o seletor de cores ou um código hexadecimal. O site é atualizado imediatamente. Cada amostra mostra uma taxa de contraste, vermelha quando abaixo de 4.5. Cores editadas recebem um botão "Redefinir".
Claro e escuro são editados separadamente.
Copiar paleta: fornece o CSS claro e escuro mais uma frase para colar no Claude. Ao recebê-la, siga them-theme.md, seção "Do painel de paletas".

Cada paleta no array PHOI armazena apenas 4 cores base (página, cartão, texto, destaque) para claro e escuro. A função tinh() deriva os outros fundos, texto, bordas e tons de destaque. As cores de status e rótulos permanecem como no tema. Um novo tema deve ser adicionado ao array THEMES nesta página. As escolhas do usuário são armazenadas no navegador (chave phoi-mau).

Pré-visualização

Sirva a pasta themes com qualquer servidor estático:

python -m http.server 8766 -d themes

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

Demonstração ao vivo: https://huydp93.github.io/ui-theme-skill/themes/bang-chon.html

Nomes de tokens compartilhados

Um novo tema deve definir todos estes tokens, claro e escuro. A lista completa anotada está em themes/_mau/tokens.css.

Grupo	Tokens
Fundo, texto	`--bg --side --surface --sunk --hover --line --line-strong --fg --fg2 --fg3`
Destaque	`--acc --acc-hover --acc-fg --acc-soft --acc-line --ink --ink-fg`
Status	`--ok --bad --err-fg --err-bg --code-bg --code-fg`
Sombra	`--shadow --shadow-pop`
Rótulos de tipo	`--k-tip --k-tool --k-trend --k-opp --k-news --k-fg`
Pílulas de status	`--s-new --s-watch --s-sent --s-seen` e uma versão `-bg` de cada
Raio	`--r-card --r-btn --r-btn-sm --r-badge --r-pill`
Altura	`--h-btn --h-btn-sm --h-field`
Layout	`--w-side --h-top --w-page`
Fonte	`--font-sans --font-mono --icon-stroke`

As classes compartilhadas (.card, .btn, .nav...) estão em cada tema components.md.

Aplicando um tema

Carregue sempre nesta ordem: fonte → tokens.css → components.css → mau-nhan.css. O link da fonte está no topo de cada tema tokens.css.

a) Canvas .dc.html

Cole tokens.css, components.css e mau-nhan.css em <helmet><style>. Um canvas não pode carregar arquivos externos.
Adicione o <link> do Google Fonts a <helmet>.
Envolva o quadro em <div class="t {{mode}}" data-accent="{{accent}}">. Uma prop dark no DCLogic define mode como dark ou vazio. Remova data-accent para usar o destaque padrão.
A classe .t redefine as cores claras dentro dela, para que o quadro siga sua prop mesmo quando o canvas em si estiver escuro.

b) HTML puro ou Artefato

Copie o CSS para uma tag <style> (um Artefato deve manter o CSS dentro da página) ou use <link> se a página estiver ao lado da pasta de tema.
Use :root; nenhum wrapper .t é necessário. Coloque data-theme="light|dark" e data-accent="..." em <html>. Sem data-theme, segue o sistema.
Layout: comece a partir do vi-du.html do tema (ou de uma página de tópico saas-sang) e remova o que não for necessário.

c) React + Tailwind

Copie tokens.css, components.css, mau-nhan.css para o projeto e importe-os uma vez no arquivo CSS raiz.

Mapeie as cores do Tailwind para os tokens; não copie códigos hexadecimais:

Tailwind v4, no CSS raiz:

@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, em 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)' }
} }

Coloque as classes compartilhadas em @layer components para que as classes do Tailwind ainda possam sobrescrevê-las.
Um alternador claro/escuro ou de destaque só precisa definir data-theme e data-accent em document.documentElement.

Regras

Ícones são SVGs traçados (stroke), stroke-width de --icon-stroke. Nada de emoji como ícones.
Números, horários e códigos usam .mono.
Nada de códigos hexadecimais nas páginas. Precisa de uma nova cor? Adicione um token ao tema.
Vermelho é apenas para erros (--bad). Nunca torne o vermelho um destaque.
Destaques claros devem ser escuros o suficiente para que o texto de botão branco atinja contraste 4.5.
Dados de mockup são dados de exemplo. Nunca use dados reais ou leia-os de .env ou um banco de dados.
Siga as convenções de cópia em du-an.md (idioma, como se dirigir ao usuário).
Verifique tanto o modo claro quanto o escuro antes de mostrar ao usuário.

Adicionando um tema

Veja them-theme.md.

huydp93/theme-giao-dien

O que é theme-giao-dien?

Perguntar na sua IA favorita

Documentação