Thèmes UI

Chaque thème est un dossier dans themes/. Un thème contient des jetons de couleur, des classes partagées, un ensemble de couleurs d'accent et une page d'exemple. Chaque thème utilise les mêmes noms de jetons. Changer de thème signifie échanger les fichiers CSS, pas modifier le HTML.

Les noms de dossiers et de fichiers sont en vietnamien (le kit a été créé au Vietnam). Le README contient un glossaire.

Quand utiliser

Pour dessiner une maquette ou construire une nouvelle page ou un écran d'application.
L'utilisateur envoie une capture d'écran, un nom de produit ou une URL et souhaite ce rendu. Voir them-theme.md.
L'utilisateur dit "utiliser le thème X", "passer l'accent à Y", "mode sombre".

Le style du propriétaire

Lisez phong-cach-owner.md avant de dessiner ou de créer un nouveau thème. En résumé : un tableau de bord SaaS clair, compact, avec beaucoup de chiffres et une couleur d'accent, bleue ou violette. La source est un ensemble d'applications que le propriétaire a sauvegardées comme références.

Thèmes

Thème	Aspect	Statut
clickup-radar	Barre latérale ressemblant à ClickUp, cartes de la bibliothèque de scénarios, clair et compact, accent violet	Approuvé 2026-11-03
saas-sang	Style du propriétaire : SaaS clair, grands chiffres, accent bleu, une page d'exemple par sujet	Approuvé 2026-11-04

themes/_mau est un modèle vide pour les nouveaux thèmes. Ne dessinez pas avec.

Quel projet utilise quel thème

Lisez du-an.md dans ce dossier s'il existe. C'est le fichier privé du propriétaire (gitignoré) qui associe ses projets à un thème, un sujet et un accent, et contient ses conventions de copie (langue de l'interface, comment s'adresser à l'utilisateur). Suivez-le sans demander à nouveau.

Pas de du-an.md : copiez du-an.example.md vers du-an.md une fois que le propriétaire a décidé d'un thème pour un projet, et remplissez-le. Lorsque le propriétaire fixe un thème pour un projet, mettez à jour du-an.md immédiatement.

Sujets et pages d'exemple (thème saas-sang)

Pour une nouvelle page, choisissez le sujet le plus proche, copiez sa page d'exemple, puis supprimez ce dont vous n'avez pas besoin.

Sujet	Page d'exemple	Accent par défaut	Bon pour
Rapports, analyses	`themes/saas-sang/chu-de/bao-cao.html`	bleu (`xanh-duong`)	Tableaux de bord, KPI, analyses de trafic et de produits
Tâches	`themes/saas-sang/chu-de/cong-viec.html`	violet (`tim`)	Tableaux de tâches, tickets, suivi de projet
Ventes	`themes/saas-sang/chu-de/ban-hang.html`	indigo (`cham`)	Administration de boutique, commandes, paiements, stock
Actualités, lecture	`themes/saas-sang/chu-de/tin-tuc.html`	bleu (`xanh-duong`)	Newsletters, blogs, flux organisés
Page d'atterrissage	`themes/saas-sang/chu-de/landing.html`	indigo (`cham`)	Pages produit et marketing
Connexion, inscription	`themes/saas-sang/chu-de/dang-ky.html`	indigo (`cham`)	Écrans d'authentification de toute application

Page d'index : themes/saas-sang/vi-du.html.
chu-de/chung.js est uniquement pour les pages d'exemple. Il lit ?mode= et ?accent=, dessine les icônes à partir de <i data-i>, et ajoute un bouton Giao diện (Apparence) en bas à droite : Clair/Sombre/Système, 8 accents, langue, et un lien vers bang-chon.html. Les choix sont conservés dans localStorage saas-sang-xem. Lorsque vous copiez une page dans un projet réel, supprimez chung.js : collez les SVG en ligne ou utilisez Lucide, et construisez le propre commutateur de thème du projet sur tokens.css.
saas-sang a des jetons supplémentaires (--chart --chart-2 --grid --acc2 --acc2-soft --deep* --scrim), voir le README du thème.
Nouvelles classes (KPI, graphiques, tableaux groupés, dialogues, actualités, atterrissage, connexion) sont dans themes/saas-sang/components.md.

Langue

La copie de l'interface suit la langue du projet (définie dans du-an.md). Sans réglage, utilisez la langue dans laquelle l'utilisateur écrit.
Les pages d'exemple sont écrites en vietnamien. themes/i18n.js avec le dictionnaire themes/i18n-en.js les traduit en anglais dans le navigateur.
Quelle langue s'affiche : ?lang=en|vi en premier, puis localStorage ui-lang, puis la langue du navigateur (vi* donne le vietnamien, tout le reste l'anglais).
Commutateurs : la ligne "Ngôn ngữ / Language" dans le panneau Giao diện sur les pages saas-sang, et les boutons VI | EN dans la barre supérieure de bang-chon.html, qui passent ?lang= à l'aperçu.
Il traduit le texte, placeholder, title, aria-label et le titre de la page, et surveille le contenu ajouté ultérieurement.
Texte vietnamien nouveau ou modifié sur une page d'exemple : ajoutez la chaîne exacte et son anglais à themes/i18n-en.js, puis ouvrez la page avec ?lang=en et vérifiez qu'aucun vietnamien ne reste.
L'i18n est uniquement pour la démo. Un projet réel ne copie pas i18n.js ; écrivez sa copie dans sa propre langue.

Choisir un thème

Le projet est dans du-an.md : utilisez ce thème et cet accent. Ne demandez pas à nouveau.
L'utilisateur a nommé un thème ou un accent dans le message : faites-le.
Ni l'un ni l'autre : posez une courte question dans le chat, avec toutes les options dans la question, dans la langue de l'utilisateur. Exemple :

Ce projet n'a pas encore de thème. Utiliser clickup-radar (clair, compact, accent violet), saas-sang (votre style, accent bleu), ou voulez-vous envoyer une capture d'écran d'un autre rendu ? Accents de clickup-radar : violet, bleu, ciel, sarcelle, vert, orange, rose, charbon. Accents de saas-sang : bleu, violet, indigo, ciel, sarcelle, vert, orange, charbon.
L'utilisateur veut sélectionner et ajuster les couleurs : ouvrez le tableau de palette (ci-dessous).

Tableau de palette

themes/bang-chon.html. Une palette est l'ensemble des couleurs d'un site web, pas les couleurs d'une seule carte.

Disposition : palettes à gauche, aperçu du site réduit à droite. Les thèmes avec pages de sujet (saas-sang, qui déclare trang et macDinh dans THEMES) prévisualisent la page pour l'usage choisi ; les autres thèmes montrent vi-du.html. La barre supérieure contient le sélecteur de thème, Clair/Sombre, VI | EN, Réinitialiser les modifications et Copier la palette.
Suggestions par usage : deux rangées de boutons en haut, "À quoi sert le site ?" (ventes, tâches, rapports, page d'atterrissage, actualités) et "Comment devrait-il être ?" (minimal, professionnel, chaleureux, lumineux, audacieux, élégant). Choisissez-les et les 3 meilleures palettes remontent en haut avec une raison d'une ligne ; la première est appliquée si aucune couleur n'a été modifiée. Cliquez à nouveau sur un bouton pour l'effacer. Les suggestions proviennent de la table de règles GOI_Y dans la page (correspondance d'usage 2 points, correspondance de style 1 point) ; la page n'appelle pas l'IA. Pour ajouter un usage ou un style, modifiez MUC, KIEU et GOI_Y.
Sélection : chaque palette montre ses 5 couleurs principales et les codes hexadécimaux. Cliquez dessus et tout le site change. Choisir une autre palette supprime vos modifications.
Modifier la palette actuelle : cliquez sur un échantillon dans la bande, ou ouvrez "Toutes les couleurs du site" pour modifier par groupe (arrière-plans, texte et bordures, accent, statut, étiquettes) avec le sélecteur de couleur ou un code hexadécimal. Le site se met à jour immédiatement. Chaque échantillon affiche un rapport de contraste, rouge en dessous de 4,5. Les couleurs modifiées obtiennent un bouton "Réinitialiser".
Clair et sombre sont modifiés séparément.
Copier la palette : donne le CSS clair et sombre plus une phrase à coller à Claude. Lorsque vous le recevez, suivez them-theme.md, section "Depuis le tableau de palette".

Chaque palette dans le tableau PHOI ne stocke que 4 couleurs de base (page, carte, texte, accent) pour le clair et le sombre. La fonction tinh() dérive les autres arrière-plans, textes, bordures et nuances d'accent. Les couleurs de statut et d'étiquette restent telles qu'elles sont dans le thème. Un nouveau thème doit être ajouté au tableau THEMES dans cette page. Les choix de l'utilisateur sont stockés dans le navigateur (clé phoi-mau).

Aperçu

Servez le dossier themes avec n'importe quel serveur statique :

python -m http.server 8766 -d themes

Tableau de palette : http://localhost:8766/bang-chon.html
Un thème : http://localhost:8766/<theme>/vi-du.html?mode=dark&accent=cam
Une page de sujet : http://localhost:8766/saas-sang/chu-de/<topic>.html?mode=dark&lang=en

Démo en direct : https://huydp93.github.io/ui-theme-skill/themes/bang-chon.html

Noms de jetons partagés

Un nouveau thème doit définir tous ces éléments, clair et sombre. La liste complète annotée se trouve dans themes/_mau/tokens.css.

Groupe	Jetons
Arrière-plan, texte	`--bg --side --surface --sunk --hover --line --line-strong --fg --fg2 --fg3`
Accent	`--acc --acc-hover --acc-fg --acc-soft --acc-line --ink --ink-fg`
Statut	`--ok --bad --err-fg --err-bg --code-bg --code-fg`
Ombre	`--shadow --shadow-pop`
Étiquettes de type	`--k-tip --k-tool --k-trend --k-opp --k-news --k-fg`
Pastilles de statut	`--s-new --s-watch --s-sent --s-seen` et une version `-bg` de chacune
Rayon	`--r-card --r-btn --r-btn-sm --r-badge --r-pill`
Hauteur	`--h-btn --h-btn-sm --h-field`
Disposition	`--w-side --h-top --w-page`
Police	`--font-sans --font-mono --icon-stroke`

Les classes partagées (.card, .btn, .nav...) sont dans le components.md de chaque thème.

Appliquer un thème

Chargez toujours dans cet ordre : police → tokens.css → components.css → mau-nhan.css. Le lien de police est en haut du tokens.css de chaque thème.

a) Canvas .dc.html

Collez tokens.css, components.css et mau-nhan.css dans <helmet><style>. Un canvas ne peut pas charger de fichiers externes.
Ajoutez le <link> Google Fonts à <helmet>.
Enveloppez le tableau dans <div class="t {{mode}}" data-accent="{{accent}}">. Une propriété dark dans DCLogic définit mode sur dark ou vide. Supprimez data-accent pour utiliser l'accent par défaut.
La classe .t réinitialise les couleurs claires à l'intérieur, de sorte que le tableau suit sa propriété même lorsque le canvas lui-même est sombre.

b) HTML simple ou Artifact

Copiez le CSS dans une balise <style> (un Artifact doit conserver le CSS dans la page) ou utilisez <link> si la page se trouve à côté du dossier du thème.
Utilisez :root ; aucun wrapper .t n'est nécessaire. Mettez data-theme="light|dark" et data-accent="..." sur <html>. Sans data-theme, il suit le système.
Disposition : partez du vi-du.html du thème (ou d'une page de sujet saas-sang) et supprimez ce dont vous n'avez pas besoin.

c) React + Tailwind

Copiez tokens.css, components.css, mau-nhan.css dans le projet et importez-les une fois dans le fichier CSS racine.

Associez les couleurs Tailwind aux jetons ; ne copiez pas les codes hexadécimaux :

Tailwind v4, dans le CSS racine :

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

Mettez les classes partagées dans @layer components pour que les classes Tailwind puissent toujours les remplacer.
Un commutateur clair/sombre ou accent n'a besoin que de définir data-theme et data-accent sur document.documentElement.

Règles

Les icônes sont des SVG en trait, stroke-width provenant de --icon-stroke. Pas d'emoji comme icônes.
Les nombres, heures et codes utilisent .mono.
Pas de codes hexadécimaux dans les pages. Besoin d'une nouvelle couleur ? Ajoutez un jeton au thème.
Le rouge est réservé aux erreurs uniquement (--bad). Ne faites jamais du rouge un accent.
Les accents clairs doivent être suffisamment sombres pour que le texte des boutons blancs atteigne un contraste de 4,5.
Les données de maquette sont des exemples de données. N'utilisez jamais de données réelles ni ne les lisez à partir de .env ou d'une base de données.
Suivez les conventions de copie dans du-an.md (langue, comment s'adresser à l'utilisateur).
Vérifiez à la fois le clair et le sombre avant de montrer à l'utilisateur.

Ajouter un thème

Voir them-theme.md.

huydp93/theme-giao-dien

Qu'est-ce que theme-giao-dien ?

Demander à votre IA préférée

Documentation