UI themes

Each theme is a folder in themes/. A theme holds color tokens, shared classes, a set of accent colors and a sample page. Every theme uses the same token names. Switching theme means swapping the CSS files, not editing HTML.

Folder and file names are Vietnamese (the kit was made in Vietnam). The README has a glossary.

When to use

Drawing a mockup or building a new page or app screen.
The user sends a screenshot, product name or URL and wants that look. See them-theme.md.
The user says "use theme X", "switch the accent to Y", "dark mode".

The owner's style

Read phong-cach-owner.md before drawing or making a new theme. In short: a light, compact SaaS dashboard with lots of numbers and one accent color, blue or purple. The source is a set of apps the owner saved as references.

Themes

Theme	Look	Status
clickup-radar	ClickUp-like sidebar, Scenario Library cards, light and compact, purple accent	Approved 2026-11-03
saas-sang	The owner's style: light SaaS, big numbers, blue accent, one sample page per topic	Approved 2026-11-04

themes/_mau is an empty template for new themes. Do not draw with it.

Which project uses which theme

Read du-an.md in this folder if it exists. It is the owner's private file (gitignored) that maps their projects to a theme, a topic and an accent, and holds their copy conventions (UI language, how to address the user). Follow it without asking again.

No du-an.md: copy du-an.example.md to du-an.md once the owner decides a theme for a project, and fill it in. When the owner settles a theme for a project, update du-an.md right away.

Topics and sample pages (theme saas-sang)

For a new page, pick the closest topic, copy its sample page, then remove what you don't need.

Topic	Sample page	Default accent	Good for
Reports, analytics	`themes/saas-sang/chu-de/bao-cao.html`	blue (`xanh-duong`)	dashboards, KPIs, traffic and product analytics
Tasks	`themes/saas-sang/chu-de/cong-viec.html`	purple (`tim`)	task boards, tickets, project tracking
Sales	`themes/saas-sang/chu-de/ban-hang.html`	indigo (`cham`)	shop admin, orders, payments, stock
News, reading	`themes/saas-sang/chu-de/tin-tuc.html`	blue (`xanh-duong`)	newsletters, blogs, curated feeds
Landing page	`themes/saas-sang/chu-de/landing.html`	indigo (`cham`)	product and marketing pages
Sign in, sign up	`themes/saas-sang/chu-de/dang-ky.html`	indigo (`cham`)	any app's auth screens

Index page: themes/saas-sang/vi-du.html.
chu-de/chung.js is for the sample pages only. It reads ?mode= and ?accent=, draws icons from <i data-i>, and adds a Giao diện (Appearance) button at the bottom right: Light/Dark/System, 8 accents, language, and a link to bang-chon.html. Choices are kept in localStorage saas-sang-xem. When you copy a page into a real project, drop chung.js: paste the SVGs inline or use Lucide, and build the project's own theme switch on tokens.css.
saas-sang has extra tokens (--chart --chart-2 --grid --acc2 --acc2-soft --deep* --scrim), see the theme README.
New classes (KPI, charts, grouped tables, dialogs, news, landing, sign in) are in themes/saas-sang/components.md.

Language

UI copy follows the project's language (set in du-an.md). With no setting, use the language the user writes in.
Sample pages are written in Vietnamese. themes/i18n.js with the dictionary themes/i18n-en.js translates them to English in the browser.
Which language shows: ?lang=en|vi first, then localStorage ui-lang, then the browser language (vi* gives Vietnamese, anything else English).
Switches: the "Ngôn ngữ / Language" row in the Giao diện panel on saas-sang pages, and the VI | EN buttons in the top bar of bang-chon.html, which pass ?lang= to the preview.
It translates text, placeholder, title, aria-label and the page title, and watches for content added later.
New or changed Vietnamese text on a sample page: add the exact string and its English to themes/i18n-en.js, then open the page with ?lang=en and check no Vietnamese is left.
i18n is for the demo only. A real project does not copy i18n.js; write its copy in its own language.

Choosing a theme

The project is in du-an.md: use that theme and accent. Do not ask again.
The user named a theme or accent in the message: do that.
Neither: ask one short question in chat, with every option in the question, in the user's language. Example:

This project has no theme yet. Use clickup-radar (light, compact, purple accent), saas-sang (your style, blue accent), or do you want to send a screenshot of another look? clickup-radar accents: purple, blue, sky, teal, green, orange, pink, charcoal. saas-sang accents: blue, purple, indigo, sky, teal, green, orange, charcoal.
The user wants to pick and tweak colors: open the palette board (below).

Palette board

themes/bang-chon.html. A palette is every color of a website, not the colors of one card.

Layout: palettes on the left, a scaled-down website preview on the right. Themes with topic pages (saas-sang, which declares trang and macDinh in THEMES) preview the page for the chosen purpose; other themes show vi-du.html. The top bar has the theme picker, Light/Dark, VI | EN, Reset edits and Copy palette.
Suggestions by purpose: two rows of buttons at the top, "What is the site for?" (sales, tasks, reports, landing page, news) and "How should it look?" (minimal, professional, warm, bright, bold, elegant). Pick them and the 3 best palettes move to the top with a one-line reason; the first is applied if no color has been edited. Click a button again to clear it. Suggestions come from the rule table GOI_Y in the page (purpose match 2 points, style match 1 point); the page does not call AI. To add a purpose or style, edit MUC, KIEU and GOI_Y.
Pick: each palette shows its 5 main colors and hex codes. Click one and the whole website changes. Picking another palette drops your edits.
Edit the current palette: click a swatch in the strip, or open "All colors of the site" to edit by group (backgrounds, text and borders, accent, status, labels) with the color picker or a hex code. The site updates at once. Each swatch shows a contrast ratio, red when below 4.5. Edited colors get a "Reset" button.
Light and dark are edited separately.
Copy palette: gives the light and dark CSS plus a sentence to paste to Claude. When you receive it, follow them-theme.md, section "From the palette board".

Each palette in the PHOI array stores only 4 base colors (page, card, text, accent) for light and dark. The function tinh() derives the other backgrounds, text, borders and accent shades. Status and label colors stay as in the theme. A new theme must be added to the THEMES array in this page. The user's choices are stored in the browser (key phoi-mau).

Preview

Serve the themes folder with any static server:

python -m http.server 8766 -d themes

Palette board: http://localhost:8766/bang-chon.html
One theme: http://localhost:8766/<theme>/vi-du.html?mode=dark&accent=cam
A topic page: http://localhost:8766/saas-sang/chu-de/<topic>.html?mode=dark&lang=en

Live demo: https://huydp93.github.io/ui-theme-skill/themes/bang-chon.html

Shared token names

A new theme must define all of these, light and dark. The full annotated list is in themes/_mau/tokens.css.

Group	Tokens
Background, text	`--bg --side --surface --sunk --hover --line --line-strong --fg --fg2 --fg3`
Accent	`--acc --acc-hover --acc-fg --acc-soft --acc-line --ink --ink-fg`
Status	`--ok --bad --err-fg --err-bg --code-bg --code-fg`
Shadow	`--shadow --shadow-pop`
Type labels	`--k-tip --k-tool --k-trend --k-opp --k-news --k-fg`
Status pills	`--s-new --s-watch --s-sent --s-seen` and a `-bg` version of each
Radius	`--r-card --r-btn --r-btn-sm --r-badge --r-pill`
Height	`--h-btn --h-btn-sm --h-field`
Layout	`--w-side --h-top --w-page`
Font	`--font-sans --font-mono --icon-stroke`

Shared classes (.card, .btn, .nav...) are in each theme's components.md.

Applying a theme

Always load in this order: font → tokens.css → components.css → mau-nhan.css. The font link is at the top of each theme's tokens.css.

a) Canvas .dc.html

Paste tokens.css, components.css and mau-nhan.css into <helmet><style>. A canvas cannot load outside files.
Add the Google Fonts <link> to <helmet>.
Wrap the board in <div class="t {{mode}}" data-accent="{{accent}}">. A dark prop in DCLogic sets mode to dark or empty. Drop data-accent to use the default accent.
The .t class resets the light colors inside it, so the board follows its prop even when the canvas itself is dark.

b) Plain HTML or Artifact

Copy the CSS into a <style> tag (an Artifact must keep CSS inside the page) or use <link> if the page sits next to the theme folder.
Use :root; no .t wrapper is needed. Put data-theme="light|dark" and data-accent="..." on <html>. Without data-theme it follows the system.
Layout: start from the theme's vi-du.html (or a saas-sang topic page) and remove what you don't need.

c) React + Tailwind

Copy tokens.css, components.css, mau-nhan.css into the project and import them once in the root CSS file.

Map Tailwind colors to tokens; don't copy hex codes:

Tailwind v4, in the root CSS:

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

Put the shared classes in @layer components so Tailwind classes can still override them.
A light/dark or accent switch only needs to set data-theme and data-accent on document.documentElement.

Rules

Icons are stroke SVGs, stroke-width from --icon-stroke. No emoji as icons.
Numbers, times and codes use .mono.
No hex codes in pages. Need a new color? Add a token to the theme.
Red is for errors only (--bad). Never make red an accent.
Light accents must be dark enough for white button text to reach contrast 4.5.
Mockup data is sample data. Never use real data or read it from .env or a database.
Follow the copy conventions in du-an.md (language, how to address the user).
Check both light and dark before showing the user.

Adding a theme

See them-theme.md.

huydp93/theme-giao-dien

What is theme-giao-dien?

Ask in your favorite AI

Documentation