UIテーマ
English | Tiếng Việt
各テーマは themes/ 内のフォルダです。テーマには、カラートークン、共有クラス、アクセントカラーのセット、サンプルページが含まれます。
すべてのテーマは同じトークン名を使用します。テーマの切り替えはCSSファイルを交換するだけで、HTMLを編集する必要はありません。
フォルダ名とファイル名はベトナム語です（このキットはベトナムで作られました）。READMEに用語集があります。
いつ使うか
- モックアップを描くとき、または新しいページやアプリ画面を構築するとき。
- ユーザーがスクリーンショット、プロダクト名、URLを送り、そのデザインを再現したいとき。them-theme.md を参照。
- ユーザーが「テーマXを使って」「アクセントをYに切り替えて」「ダークモード」と言ったとき。
オーナーのスタイル
新しいテーマを描いたり作成したりする前に、phong-cach-owner.md を読んでください。要約すると、明るくコンパクトなSaaSダッシュボードで、たくさんの数字と1つのアクセントカラー（青または紫）が特徴です。元ネタはオーナーが参考として保存したアプリ群です。
テーマ
| テーマ | 見た目 | ステータス |
|---|---|---|
| clickup-radar | ClickUp風サイドバー、シナリオライブラリカード、明るくコンパクト、紫アクセント | 2026-11-03 承認 |
| saas-sang | オーナースタイル：明るいSaaS、大きな数字、青アクセント、トピック別サンプルページ1つ | 2026-11-04 承認 |
themes/_mau は新しいテーマ用の空のテンプレートです。これを使って描かないでください。
どのプロジェクトがどのテーマを使うか
このフォルダに du-an.md があれば読んでください。これはオーナーのプライベートファイル（gitignored）で、プロジェクトとテーマ、トピック、アクセントをマッピングし、コピー規則（UI言語、ユーザーへの呼びかけ方）を保持しています。再度尋ねずに従ってください。
du-an.md がない場合：オーナーがプロジェクトのテーマを決めたら、du-an.example.md を du-an.md にコピーし、記入してください。オーナーがプロジェクトのテーマを確定したら、すぐに du-an.md を更新してください。
トピックとサンプルページ（テーマ saas-sang）
新しいページには、最も近いトピックを選び、そのサンプルページをコピーしてから不要な部分を削除してください。
| トピック | サンプルページ | デフォルトアクセント | 適している用途 |
|---|---|---|---|
| レポート、分析 | themes/saas-sang/chu-de/bao-cao.html | 青 (xanh-duong) | ダッシュボード、KPI、トラフィック・プロダクト分析 |
| タスク | themes/saas-sang/chu-de/cong-viec.html | 紫 (tim) | タスクボード、チケット、プロジェクト追跡 |
| 営業 | themes/saas-sang/chu-de/ban-hang.html | 藍色 (cham) | ショップ管理、注文、支払い、在庫 |
| ニュース、読書 | themes/saas-sang/chu-de/tin-tuc.html | 青 (xanh-duong) | ニュースレター、ブログ、キュレーションフィード |
| ランディングページ | themes/saas-sang/chu-de/landing.html | 藍色 (cham) | プロダクト・マーケティングページ |
| サインイン、サインアップ | themes/saas-sang/chu-de/dang-ky.html | 藍色 (cham) | 任意のアプリの認証画面 |
- インデックスページ：
themes/saas-sang/vi-du.html。 chu-de/chung.jsはサンプルページ専用です。?mode=と?accent=を読み取り、<i data-i>からアイコンを描画し、右下に Giao diện（外観）ボタン（ライト/ダーク/システム、8つのアクセント、言語、bang-chon.htmlへのリンク）を追加します。選択内容は localStoragesaas-sang-xemに保存されます。実際のプロジェクトにページをコピーする際は、chung.jsを削除してください。SVGをインライン化するかLucideを使用し、tokens.cssでプロジェクト独自のテーマ切り替えを構築してください。- saas-sang には追加のトークン（
--chart --chart-2 --grid --acc2 --acc2-soft --deep* --scrim）があります。テーマのREADMEを参照してください。 - 新しいクラス（KPI、チャート、グループ化テーブル、ダイアログ、ニュース、ランディング、サインイン）は themes/saas-sang/components.md にあります。
言語
- UIコピーはプロジェクトの言語（
du-an.mdで設定）に従います。設定がない場合は、ユーザーが書いている言語を使用します。 - サンプルページはベトナム語で書かれています。
themes/i18n.jsと辞書themes/i18n-en.jsにより、ブラウザ上で英語に翻訳されます。 - 表示言語：最初に
?lang=en|vi、次に localStorageui-lang、最後にブラウザの言語（vi*はベトナム語、それ以外は英語）。 - 切り替え：saas-sang ページの Giao diện パネル内の「Ngôn ngữ / Language」行、および
bang-chon.htmlのトップバーにある VI | EN ボタン。これらはプレビューに?lang=を渡します。 - 翻訳対象：テキスト、
placeholder、title、aria-label、ページタイトル。後から追加されたコンテンツも監視します。 - サンプルページに新しいベトナム語テキストを追加した場合、その文字列と英語を
themes/i18n-en.jsに追加し、?lang=enでページを開いてベトナム語が残っていないか確認してください。 - i18nはデモ専用です。実際のプロジェクトでは
i18n.jsをコピーせず、プロジェクト固有の言語で記述してください。
テーマの選択
- プロジェクトが
du-an.mdにある場合：そのテーマとアクセントを使用します。再度尋ねないでください。 - ユーザーがメッセージでテーマまたはアクセントを指定した場合：それに従います。
- どちらでもない場合：チャットで短い質問を1つ、すべての選択肢を含めてユーザーの言語で行います。例：
このプロジェクトにはまだテーマがありません。clickup-radar（明るくコンパクト、紫アクセント）、saas-sang（あなたのスタイル、青アクセント）のいずれか、または別のデザインのスクリーンショットを送りますか？ clickup-radar のアクセント：紫、青、スカイ、ティール、緑、オレンジ、ピンク、チャコール。saas-sang のアクセント：青、紫、藍色、スカイ、ティール、緑、オレンジ、チャコール。
- ユーザーが色を選んで調整したい場合：パレットボード（下記）を開きます。
パレットボード
themes/bang-chon.html。パレットとは、ウェブサイトのすべての色であり、1つのカードの色ではありません。
- レイアウト： 左側にパレット、右側に縮小されたウェブサイトのプレビュー。トピックページを持つテーマ（saas-sang は
THEMESでtrangとmacDinhを宣言）は選択された目的に応じたページをプレビューし、他のテーマはvi-du.htmlを表示します。トップバーにはテーマピッカー、ライト/ダーク、VI | EN、編集リセット、パレットコピーがあります。 - 目的別提案： 上部に2列のボタン「サイトの目的は？」（営業、タスク、レポート、ランディングページ、ニュース）と「どのような見た目に？」（ミニマル、プロフェッショナル、ウォーム、ブライト、ボールド、エレガント）。これらを選択すると、最適な3つのパレットが理由付きで先頭に移動します。色が編集されていない場合は最初のパレットが適用されます。ボタンをもう一度クリックすると解除されます。提案はページ内のルールテーブル
GOI_Yから取得されます（目的一致2点、スタイル一致1点）。AIは呼び出しません。目的やスタイルを追加するには、MUC、KIEU、GOI_Yを編集してください。 - 選択： 各パレットは5つのメインカラーと16進数コードを表示します。クリックするとウェブサイト全体が変わります。別のパレットを選択すると編集は破棄されます。
- 現在のパレットを編集： ストリップのスウォッチをクリックするか、「サイトのすべての色」を開いてグループ別（背景、テキストとボーダー、アクセント、ステータス、ラベル）にカラーピッカーまたは16進数コードで編集します。サイトは即座に更新されます。各スウォッチはコントラスト比を表示し、4.5未満の場合は赤くなります。編集した色には「リセット」ボタンが表示されます。
- ライトとダークは別々に編集します。
- パレットのコピー： ライトとダークのCSSと、Claudeに貼り付けるための文章を提供します。受け取ったら、them-theme.md の「パレットボードから」セクションに従ってください。
PHOI 配列内の各パレットは、ライト用とダーク用にそれぞれ4つのベースカラー（ページ、カード、テキスト、アクセント）のみを保存します。関数 tinh() が他の背景色、テキスト色、ボーダー色、アクセント階調を導出します。ステータス色とラベル色はテーマのままです。
新しいテーマは、このページの THEMES 配列に追加する必要があります。ユーザーの選択はブラウザ（キー phoi-mau）に保存されます。
プレビュー
任意の静的サーバーで themes フォルダを提供します：
python -m http.server 8766 -d themes
- パレットボード：
http://localhost:8766/bang-chon.html - 1つのテーマ：
http://localhost:8766/<theme>/vi-du.html?mode=dark&accent=cam - トピックページ：
http://localhost:8766/saas-sang/chu-de/<topic>.html?mode=dark&lang=en
ライブデモ：https://huydp93.github.io/ui-theme-skill/themes/bang-chon.html
共有トークン名
新しいテーマは、ライト用とダーク用にこれらのすべてを定義する必要があります。完全な注釈付きリストは themes/_mau/tokens.css にあります。
| グループ | トークン |
|---|---|
| 背景、テキスト | --bg --side --surface --sunk --hover --line --line-strong --fg --fg2 --fg3 |
| アクセント | --acc --acc-hover --acc-fg --acc-soft --acc-line --ink --ink-fg |
| ステータス | --ok --bad --err-fg --err-bg --code-bg --code-fg |
| シャドウ | --shadow --shadow-pop |
| タイプラベル | --k-tip --k-tool --k-trend --k-opp --k-news --k-fg |
| ステータスピル | --s-new --s-watch --s-sent --s-seen およびそれぞれの -bg 版 |
| 半径 | --r-card --r-btn --r-btn-sm --r-badge --r-pill |
| 高さ | --h-btn --h-btn-sm --h-field |
| レイアウト | --w-side --h-top --w-page |
| フォント | --font-sans --font-mono --icon-stroke |
共有クラス（.card、.btn、.nav...）は各テーマの components.md にあります。
テーマの適用
常に次の順序で読み込みます：フォント → tokens.css → components.css → mau-nhan.css。
フォントリンクは各テーマの tokens.css の先頭にあります。
a) Canvas .dc.html
tokens.css、components.css、mau-nhan.cssを<helmet><style>に貼り付けます。キャンバスは外部ファイルを読み込めません。- Google Fonts の
<link>を<helmet>に追加します。 - ボードを
<div class="t {{mode}}" data-accent="{{accent}}">でラップします。DCLogicのdarkプロップがmodeをdarkまたは空に設定します。data-accentを省略するとデフォルトのアクセントが使用されます。 .tクラスは内部のライトカラーをリセットするため、キャンバス自体がダークでもボードはそのプロップに従います。
b) プレーンHTMLまたはArtifact
- CSSを
<style>タグにコピーするか（ArtifactはCSSをページ内に保持する必要があります）、ページがテーマフォルダの隣にある場合は<link>を使用します。 :rootを使用します。.tラッパーは不要です。data-theme="light|dark"とdata-accent="..."を<html>に設定します。data-themeがない場合はシステム設定に従います。- レイアウト：テーマの
vi-du.html（またはsaas-sangのトピックページ）から始め、不要な部分を削除します。
c) React + Tailwind
tokens.css、components.css、mau-nhan.cssをプロジェクトにコピーし、ルートCSSファイルで一度だけインポートします。- Tailwindの色をトークンにマッピングします。16進数コードはコピーしないでください：
- Tailwind v4の場合、ルート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の場合、
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)' } } }
- Tailwind v4の場合、ルートCSSで：
- 共有クラスを
@layer componentsに配置すると、Tailwindクラスで上書きできるようになります。 - ライト/ダークまたはアクセントの切り替えは、
document.documentElementにdata-themeとdata-accentを設定するだけで済みます。
ルール
- アイコンはストロークSVG、
stroke-widthは--icon-strokeを使用します。絵文字をアイコンとして使用しないでください。 - 数字、時間、コードは
.monoを使用します。 - ページ内に16進数コードを記述しないでください。新しい色が必要ですか？テーマにトークンを追加してください。
- 赤はエラーのみに使用します（
--bad）。決して赤をアクセントにしないでください。 - 明るいアクセントは、白いボタンテキストのコントラスト比が4.5に達するのに十分な暗さでなければなりません。
- モックアップデータはサンプルデータです。実際のデータや
.env、データベースからの読み取りは絶対に行わないでください。 du-an.mdのコピー規則（言語、ユーザーへの呼びかけ方）に従ってください。- ユーザーに見せる前に、ライトとダークの両方を確認してください。
テーマの追加
them-theme.md を参照してください。