> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# 製品テーマ

マーケティングブランドテーマを変更せずに、キットの製品クロームをあなたの SaaS 向けにパーソナライズする。

## インストールとセットアップ

手順の前に、[始める前に](https://supastack.dev/ja/docs/web/before-you-start.md) と [ターミナルの基本](https://supastack.dev/ja/docs/web/terminal-basics.md) をお読みください。これらの手順では、VS Code で完全な supastack モノリポジトリを開いたことが前提となっています。そのルート package.json はリポジトリのルートをマークします。 pnpm コマンドでは、ワークスペース パッケージはアプリまたは共有コード フォルダーです。この製品では、ワークスペースはチームのデータ コンテナであり、セキュリティ境界です。 corepack pnpm --filter ... コマンドがルートから実行されている間にモノリポジトリから 1 つのパッケージを選択します。同期されたモバイル フォルダーまたはデスクトップ フォルダーのみを開いた場合、そのフォルダーには Web バックエンド、Docker セットアップ、またはルート スクリプトが含まれていません。このモノリポジトリまたはアクセス可能なホスト サーバーからバックエンドを実行し、プラットフォーム フォルダー独自のスクリプトを使用します。環境変数は、ローカルの .env ファイルまたはホスティング ダッシュボードに保存される名前付き設定です。変更後に関連するアプリを再起動し、NEXT_PUBLIC_ および EXPO_PUBLIC_ 値にサーバー シークレットが含まれないようにします。

1. VS Code で、サインインした製品画面の場合は apps/web/app/app-theme.css を開き、カラー パックを追加する場合は apps/web/src/theme/catalog.ts を開きます。製品の色については apps/web/app/theme.css を編集しないでください。それはマーケティングブランドをコントロールします。

2. リポジトリのルートから corepack pnpm --filter @supastack/web dev を実行し、http://localhost:3000/settings/appearance. にアクセスします。

3. ローカル ブランチでトークンを変更し、プレビューを更新します。予想: ホームページが選択したマーケティング テーマを維持しながら、ダッシュボード コントロールが更新されます。

マーケティングブランドと製品テーマは別ファイルです。ダッシュボード・認証・設定・課金・チャット・組織クロームには apps/web/app/app-theme.css を編集します。カラーパックは apps/web/src/theme/catalog.ts に追加します。密度・半径・フォント・レイアウトの軸は apps/web/src/theme/presets.ts と app-theme.css の対応する html[data-*] ルールで拡張します。マーケティングアイデンティティは apps/web/app/theme.css を編集するのではなく apps/web/src/theme/marketing-theme.ts（MARKETING_THEME_MODE: locked | inherit | パック ID）で選びます — .marketing-theme:not(.app-theme):not([data-theme]):not([data-marketing-theme="inherit"]) によるブロックが、supastack ホームの Obsidian ブランドをデフォルトで保ちます。

実行時には、「設定 → 外観 → ThemePicker」がカラー、密度、角丸、フォント、レイアウトをブラウザの Cookie と localStorage に保存して theme-boot.ts が初回描画前にすべての軸を復元できるようにし、さらにサインイン済みユーザーの外観バンドル全体を user_appearance（GET/PUT /api/account/appearance）経由でブラウザ間で同期します。同じページにキットの UI ギャラリーがマウントされ、パックやプリセットの変更がボタン、入力欄、カード、バッジ、ダイアログに即座に反映されます。デザインの詳細とコピー＆ペースト例は docs/design/kit-product-theme.md と docs/design/kit-ui-gallery.md にあります。

```
/* Edit product chrome here — not theme.css */
.app-theme {
  --radius-card: 14px;
  background: var(--page);
  color: var(--text);
}
.app-theme .button-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

/* catalog.ts — append a ThemeDefinition with every THEME_TOKEN_NAMES entry */
{
  id: "coral",
  name: "Coral",
  colorScheme: "light",
  tokens: { "--page": "#fff7f4", "--accent": "#e06b4f" /* …full token set… */ }
}
```


## コピーするコマンド

コメントに従って、コマンドがどのフォルダーで実行されるかを確認します。 2 つのターミナルにラベルが付いている場合は、2 つのターミナル ウィンドウを開き、2 番目のコマンドを使用している間、最初のコマンドを実行し続けます。

```
corepack pnpm --filter @supastack/web dev

# In a second terminal, after changing a theme token:
corepack pnpm test -- apps/web/src/theme/contrast.test.ts
```


## 実装ワークフロー

アプリ消費者（app-theme.css、globals.css エイリアス、WorkspaceShell ルート）では var(--page|--section|--raised|--text|--muted|--border|--accent|…) を優先してください。ティール/淡いシェルを再導入したり、製品 UI に Obsidian の hex をハードコードしたりしないでください。

パックを追加するときは contrast.test.ts をグリーンに保ちます。プリセット ID を追加するときは presets.ts と app-theme.css の html[data-density|data-radius|data-font|data-layout] リマップを更新し、ThemePicker と anti-FOUC ブートが一致するようにします。

マーケティング面用に marketing/brand-geometry.ts の共有 4 タイルブランドジオメトリを維持してください。ヘッダーマークは透明のまま。favicon とアプリアイコンアセットは角丸黒背景を保持します。MARKETING_THEME_MODE が "locked"（キットのデフォルト）の間、純粋なマーケティングページは Obsidian のままです。製品は別のパックを固定するか訪問者の選択を継承できます。


## 検証とトラブルシューティング

色の変更がマーケティング ホームページに影響を与える場合は、app-theme.css を編集したことを確認し、apps/web/src/theme/marketing-theme.ts. を確認してください。テキストが読みにくくなった場合は、前の値に戻し、ルートから corepack pnpm test -- apps/web/src/theme/contrast.test.ts を実行してから再試行してください。

キットテーマのトークンやパックを変更した後、/settings/appearance の ThemePicker がキット UI ギャラリーと /dashboard、/auth、/billing、/chat、組織シェルを更新することを検証します。/ が Obsidian マーケティングロックのままであること（MARKETING_THEME_MODE が別を言わない限り）を確認します。テーマの単体コントラクト（catalog、presets、contrast、theme-ownership、kit-ui-gallery）と、利用可能なら Playwright application-theme を実行します。キーボードフォーカス、コントラスト、320 px、reduce motion をチェックしてください。


## 次へ

[UI キットとブロック](https://supastack.dev/ja/docs/web/ui-kit.md)