For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ja/docs/web/theming.md (or send Accept: text/markdown).

製品テーマ

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

このガイドについて質問

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

手順の前に、始める前にとターミナルの基本をお読みください。これらの手順では、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

実装ワークフロー

パックを追加するときは 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 をチェックしてください。