domo-app-theme

Domo カスタムアプリのテーマ

Domo のカスタムアプリ全体で使用される、すっきりとしたプロフェッショナルなダッシュボードテーマです。モダンで読みやすく、Domo プラットフォームに自然になじむデザインを目指しています。企業向けでありながら無機質ではなく、色ではなくフォントの太さや控えめなシャドウによって階層を表現します。Domo らしさを保ちつつ、Salesforce に近い雰囲気です。

作者：David Johnson

テーマ化されたデザインシステム（DESIGN.md）

このスキルでは、一貫性を保つ必要がある3つのスタイリングレイヤーを扱います。

1. デザインの意図 — ムード、パレット、タイポグラフィ、コンポーネントのレシピ（「どのような印象にするか」）
2. App Studio Theme JSON — c1～c60 のカラー枠、f1～f8 のフォント、ca1～ca8 のカードスタイルを備えた、Domo ネイティブのスキーマ
3. プロコード CSS — カスタムプロパティ、インラインスタイル、Recharts／Chart.js の色

厳選された各テーマには、references/themes/ に専用の DESIGN.md ファイルがあります。これは3つのレイヤーすべてにおける唯一の信頼できる情報源です。DESIGN.md には次の内容が含まれます。

• ビジュアルテーマと雰囲気 — ムード、密度、理念（ありきたりな出力を防ぎます）
• スロット対応表付きのカラーシステム — すべての色について、セマンティックな役割、16進数、OKLCH、テーマスロット（c の番号）、CSS 変数を1行にまとめています。ネイティブ JSON とプロコード CSS をつなぐロゼッタストーンです。
• フォントスロット対応表付きのタイポグラフィ — 書体のスケールを f1～f8 のテーマスロットに対応付けています。
• カードとコンポーネントのスタイル — カード、ボタン、入力欄、ナビゲーション、テーブルと、ca／b スロットの参照先
• チャートパレット — colorRange のインデックス対応を含む系列の色
• 推奨事項と禁止事項 — テーマ固有のガードレール（例：c60 のダークモード修正）
• エージェント向けクイックリファレンス — コピー＆ペースト可能な CSS ブロック、COLORS オブジェクト、プロンプト例
• インポート可能なテーマ JSON — App Studio に直接インポートできる完全な JSON

利用可能なテーマ

テーマ	ファイル	モード	アクセント	最適な用途
コアテーマ
Charcoal Ember Dark	charcoal-ember-dark.DESIGN.md	ダーク	暖色系オレンジ	ベンチマーク、パフォーマンス、技術分野
Emerald Dark	emerald-dark.DESIGN.md	ダーク	鮮やかなエメラルドグリーン	SaaS、分析、開発ツール
Neon Magenta Dark	neon-magenta-dark.DESIGN.md	ダーク	鮮やかなピンク／マゼンタ	CRM、エンゲージメント、消費者向け
Corporate Light	corporate-light.DESIGN.md	ライト	クールなブルーグレー	経営幹部、企業向け、汎用
パンクサブジャンルのテーマ
Cyberpunk	cyberpunk.DESIGN.md	ダーク	ネオンシアン	技術監視、サイバーセキュリティ、リアルタイム
Steampunk	steampunk.DESIGN.md	ダーク	磨き上げた真鍮色	製造、物流、伝統産業
Solarpunk	solarpunk.DESIGN.md	ライト	リーフグリーン	サステナビリティ、ESG、ウェルネス
Dieselpunk	dieselpunk.DESIGN.md	ダーク	錆びたオレンジ	軍事、産業、サプライチェーン
Biopunk	biopunk.DESIGN.md	ダーク	生物発光グリーン	バイオテクノロジー、製薬、ゲノミクス、研究室
Dreadpunk	dreadpunk.DESIGN.md	ダーク	深いクリムゾン	リスク、セキュリティ、監査、コンプライアンス
Dungeonpunk	dungeonpunk.DESIGN.md	ダーク	神秘的な琥珀色	ゲーム、ファンタジー、クリエイティブ、在庫管理
Atompunk	atompunk.DESIGN.md	ライト	アトミックオレンジ	エネルギー、航空宇宙、イノベーション、研究開発

Corporate Light の構造をベースに、チャート系列の色を変えた50種類のライトチャートパレットについては、palette-overlays.md を参照してください。

DESIGN.md を使用するタイミング

• 新しい App Studio アプリを構築する場合：まず DESIGN.md を用意します。ネイティブテーマの設定には Slot Mapping Table を、プロコードコンポーネントには CSS ブロックを使用します。
• ダークテーマを適用する場合：以下の一般的なダークモードのガイダンスではなく、DESIGN.md を使用します。DESIGN.md には、正確な c58／c60 の修正方法、コンポーネントのカラー、インポート可能な JSON が含まれています。
• 視覚的な不整合をデバッグする場合：Slot Mapping Table を確認します。セマンティックロールがテーマ JSON とプロコード CSS で異なる値に割り当てられている場合、両者の設定が一致していません。

このスキルとの関係

以下の内容では、デフォルトのライトテーマ（構造色、タイポグラフィのルール、コンポーネントのレシピ、間隔、シャドウ、トランジション、デザイン原則）を定義します。これらは、どの DESIGN.md が有効であっても適用される、テーマに依存しないパターンです。DESIGN.md ファイルはカラーシステムとコンポーネントのカラー値を上書きしますが、ここで説明するレイアウト、間隔、タイポグラフィの考え方、シャドウの構造、トランジションのタイミング、マイクロインタラクションのパターンは引き継ぎます。

App Studio Theme API の形式（重要）

DESIGN.md のインポートブロックと App Studio API のペイロードは、同じスキーマではありません。

• DESIGN／インポート形式（インデックスベース）：{"index": 1, "value": "#F0F4F8", "tag": "PRIMARY"}
• API PUT 形式（id とラップされた値）：{"id": "c1", "value": {"value": "#F0F4F8", "type": "RGB_HEX"}, "tags": ["THEME", "PRIMARY"]}

references/theme_transform.py を使用して、DESIGN 形式のカラー／フォント配列を API 互換の更新データに変換します。

API 側の注意点（検証済み）

• dropShadow の有効な値：null、"FLOATING"、"STANDARD"（"NONE" ではありません）。
• フォント：style は "Regular"（文字列）、size は整数（"22px" ではありません）である必要があります。
• カードの padding はオブジェクトである必要があります：{"left": 0, "right": 0, "top": 0, "bottom": 0}（単一の整数ではありません）。
• 大規模な一括更新は、詳細情報なしで 400 エラーになる場合があります。次の順序が安全です：
  1. カラーの PUT
  2. フォントの PUT
  3. カード／ナビゲーション／コンポーネントの PUT

CSS カスタムプロパティ

:root {
  /* Typography — system sans stack for modern, minimal feel */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Core Colors (OKLCH primary, hex fallback in comments) */
  --text-primary: oklch(0.374 0.014 256);    /* #3F454D */
  --text-secondary: oklch(0.510 0.016 249);  /* #68737F */
  --bg: oklch(0.962 0.011 240);              /* #F1F6FA */
  --surface: oklch(1 0 0);                   /* #FFFFFF */
  --border: oklch(0.800 0.015 240);          /* #B7C1CB */
  --border-light: oklch(0.908 0.009 240);    /* #DCE4EA */
  --hover-bg: oklch(0.908 0.009 240);        /* #DCE4EA */
  --subtle-hover: oklch(0.979 0.004 240);    /* #F8FAFC */
  --accent-hover: oklch(0.816 0.065 230);    /* #99CCEE */

  /* Status Colors */
  --on-track: oklch(0.835 0.065 155);        /* #ADD4C1 */
  --on-track-bg: oklch(0.943 0.025 155);     /* #e8f3ec */
  --on-track-text: oklch(0.520 0.060 155);   /* #4a7a5a */
  --at-risk: oklch(0.740 0.155 60);          /* #FF9922 */
  --at-risk-bg: oklch(0.960 0.035 75);       /* #fff0dd */
  --at-risk-text: oklch(0.580 0.110 60);     /* #c47a10 */
  --behind: oklch(0.545 0.100 290);          /* #776CB0 */
  --behind-bg: oklch(0.930 0.025 290);       /* #eae7f3 */
  --behind-text: oklch(0.440 0.080 290);     /* #5a5094 */
  --complete: oklch(0.816 0.065 230);        /* #99CCEE */
  --complete-bg: oklch(0.940 0.025 230);     /* #e0f0fa */
  --complete-text: oklch(0.660 0.060 230);   /* #5a9abe */

  /* Summary Card Values */
  --on-track-value: oklch(0.620 0.070 155);  /* #6a9f7a */
  --at-risk-value: oklch(0.740 0.155 60);    /* #FF9922 */
  --behind-value: oklch(0.545 0.100 290);    /* #776CB0 */
  --complete-value: oklch(0.816 0.065 230);  /* #99CCEE */
  --total-value: oklch(0.374 0.014 256);     /* #3F454D */

  /* Accent / Highlight */
  --alert: oklch(0.590 0.160 20);            /* #e45f5f */
  --avatar-bg: oklch(0.374 0.014 256);       /* #3F454D */
  --avatar-text: oklch(1 0 0);               /* #FFFFFF */

  /* Shadows — three-layer depth for natural lift */
  --shadow:
    0px 0px 0px 1px oklch(0.374 0.014 256 / 0.06),
    0px 1px 2px -1px oklch(0.374 0.014 256 / 0.06),
    0px 2px 4px 0px oklch(0.374 0.014 256 / 0.04);
  --shadow-hover:
    0px 0px 0px 1px oklch(0.374 0.014 256 / 0.08),
    0px 2px 4px -1px oklch(0.374 0.014 256 / 0.08),
    0px 4px 12px 0px oklch(0.374 0.014 256 / 0.06);

  /* Border Radius — concentric: outer = inner + padding */
  --radius-card: 10px;   /* outer: card surface */
  --radius-btn: 6px;     /* inner: with 4px card padding clearance */
  --radius-badge: 4px;
  --radius-bar: 4px;

  /* Spacing */
  --page-padding: 24px;
  --max-width: 1400px;
  --grid-gap: 16px;
  --card-padding: 20px;
}

リセットとベースライン

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

タイポグラフィ

考え方：ウェイトで表現する

モダンでミニマルなタイポグラフィでは、階層を表現するために、サイズを大幅に変えるのではなく、ウェイトのコントラストを活用します。サイズは 5 種類（11、12、13、16、22）のみです。見出しには SemiBold（600）を使って存在感を持たせ、本文は Regular（400）で軽やかにします。補足テキストやキャプションには Light（300）を使い、データとラベルの間に余白を感じさせます。

UI テキストには Bold（700）や Black（900）を使用しないでください。ミニマルな印象を損なうほど強く目立ってしまいます。SemiBold は見出し、KPI 値、アクティブなボタンラベルにのみ使用します。それ以外はすべて Regular または Light にします。

文字サイズのスケール

役割	サイズ	ウェイト	補足
ページタイトル	22px	600	text-wrap: balance
カード／セクションのタイトル	16px	600	text-wrap: balance
本文／説明	13px	400	line-height 1.5、text-wrap: pretty
ラベル／キャプション	11px	400	大文字、letter-spacing 0.04em
グラフの軸テキスト	11px	400	CSS の color ではなく、fill の色を使用
バッジ／ステータステキスト	11px	600	小さなテキストにウェイトを使う唯一の箇所
KPI／概要の数値	28px	600	font-variant-numeric: tabular-nums
KPI ラベル	11px	300	大文字、letter-spacing 0.04em — 数値より目立たないようにする
マイクロテキスト（アバターのイニシャル）	9px	600	letter-spacing 0.5px
動的な数値	任意	—	font-variant-numeric: tabular-nums

フォントスタック

フォントファミリーは、プロジェクトの DESIGN.md で指定するデザイン上の決定事項です。Domo App Studio は、3 種類のフォントファミリーに対応しています。

Domo ファミリー	プロコードの CSS font-family	印象
Sans（デフォルト）	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif	すっきりとモダンで、テクノロジーを感じさせる（GitHub、Stripe、Linear）
Serif	Georgia, "Times New Roman", "Palatino Linotype", serif	エディトリアルで温かみがあり、上質（NYT、Medium）
Slab	"Roboto Slab", "Rockwell", "Courier New", serif	大胆で構造的、インダストリアル

重要：App Studio のテーマの fonts[].family と、すべてのプロコード CSS の font-family には、同じファミリーを指定する必要があります。Sans のネイティブカードと Serif のプロコードコンポーネント（またはその逆）を混在させると、デザインの一体感が損なわれます。DESIGN.md でフォントファミリーが指定されている場合は、すべての箇所に適用してください。

App Studio のネイティブフォント設定

App Studio のテーマエディターでフォントスロットを設定します。上の表から選んだファミリーで {family} を置き換えてください。

スロット	スタイルプリセット	フォントファミリー	ウェイト	サイズ
カードタイトル	Heading 4	{family}	SemiBold	16px
カードの説明	Body	{family}	Regular	13px
期間	Paragraph	{family}	Light	11px
チャートのテキスト	Body	{family}	Regular	11px
サマリーの数値	Heading 5	{family}	SemiBold	28px
サマリーの数値ラベル	Paragraph	{family}	Light	11px

これにより、同じページ上のネイティブカードとプロコードカードの見た目に一貫性が生まれます。重要な設定項目は次のとおりです。

• カードタイトルは SemiBold — 重厚になりすぎず、信頼感を与えます
• 期間は Light — 目立たず控えめで、データを引き立てます
• サマリーの数値ラベルは Light — ラベルを控えめにして、数値を際立たせます
• チャートのテキストは Regular 11px — データの邪魔をしない、すっきりとした軸ラベルになります

ウェイト対応表（Domo App Studio ↔ CSS）

App Studio のウェイト	CSS font-weight	用途
Extra Light	200	標準 UI では使用しません。読みやすさに欠けます
Light	300	KPI ラベル、期間テキスト、補足キャプション
Regular	400	本文、説明、チャートの軸、テーブルのセル
SemiBold	600	見出し、KPI 値、アクティブなボタン、バッジ
Bold	700	避けてください。ミニマルな印象を損ないます
Black	900	使用しません。ダッシュボードのどの場面でも重すぎます

ルール

• 見出し（6 行以下）には text-wrap: balance を適用します。孤立した単語が残るのを防ぐため、本文の段落には text-wrap: pretty を適用します。
• 動的に更新される数値（カウンター、KPI 値、価格、タイマー、テーブルの列など）には、font-variant-numeric: tabular-nums を適用します。数字が変わる際のレイアウトシフトを防ぎます。
• 大文字のラベル（11px）には letter-spacing: 0.04em を使用します。大きなサイズでは 0.02em に減らすか、完全に削除します。
• 行の高さ：本文は 1.5、見出しは 1.2、KPI 数値は 1。

カラーパレット

厳選されたチャートおよびデータ可視化用のパレット（9 種類の調和タイプにわたる 50 パレット）については、color-palettes.md を参照してください。以下のパレットでは、テーマの構造色（背景、サーフェス、テキスト、ステータス表示色）を定義します。

基本の色

役割	Hex	用途
テキスト（主要）	#3F454D	見出し、カードのタイトル、メタラベル、アクティブなボタン
テキスト（補助）	#68737F	説明、キャプション、フィルターラベル
背景	#F1F6FA	ページの背景
サーフェス	#FFFFFF	カード、コンテナー、入力欄
枠線	#B7C1CB	入力欄の枠線、ボタンの枠線
枠線（薄）	#DCE4EA	区切り線、進捗バーのトラック、行の枠線
ホバー時の背景	#DCE4EA	ボタン／行のホバー時
控えめなホバー背景	#F8FAFC	テーブル／リスト行のホバー時
アクセントのホバー色	#99CCEE	ホバー時の枠線の強調表示（入力欄、ボタン）

ステータスの色

ステータス	メイン色	背景色	テキスト色	用途
順調	#ADD4C1	#e8f3ec	#4a7a5a	バー、枠線、バッジ
要注意	#FF9922	#fff0dd	#c47a10	バー、枠線、バッジ
遅延	#776CB0	#eae7f3	#5a5094	バー、枠線、バッジ
完了	#99CCEE	#e0f0fa	#5a9abe	バー、枠線、バッジ

サマリーカードの値

カテゴリー	色
順調	#6a9f7a
要注意	#FF9922
遅延	#776CB0
完了	#99CCEE
合計	#3F454D

アクセント／強調表示

役割	Hex	用途
アラート／今日	#e45f5f	今日を示す線、アラート色
アバターの背景	#3F454D	イニシャル表示のフォールバックアバター
アバターのテキスト	#FFFFFF	イニシャルのテキスト

余白とレイアウト

• ページのパディング：24px
• 最大幅：1400px、中央揃え
• グリッドの間隔：16px
• カードグリッド：repeat(auto-fill, minmax(320px, 1fr))
• セクション間隔：セクション間の縦方向の間隔は16px～24px
• カードのパディング：20px
• 入力欄／ボタンのパディング：6px 12px（入力欄）、6px 14px（フィルターボタン）、8px 20px（タブボタン）

シャドウ

自然な奥行きを表現する3層のシャドウです。第1層は1pxの枠線リングとして機能し、第2層は控えめな浮き上がりを加え、第3層は周囲に奥行きを与えます。シャドウの色には、どの背景でも統一感が保たれるよう、--text-primary を低い不透明度で使用します。

奥行きが必要なボタン、カード、コンテナーには、単色の枠線よりも box-shadow を優先してください。シャドウは透明度によってどの背景にもなじみますが、単色の枠線はそうではありません。レイアウトの区切り（border-b、border-t）とフォーム入力欄のアウトライン（アクセシビリティのため）には、単色の枠線を使用します。

.card {
  box-shadow: var(--shadow);
  transition-property: box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.card:hover {
  box-shadow: var(--shadow-hover);
}

コンポーネント

ボタン（フィルター／タブ）

状態	背景色	枠線	テキスト
デフォルト	#FFFFFF	#B7C1CB	#68737F
ホバー	#DCE4EA	#99CCEE	#3F454D
アクティブ	#3F454D	#3F454D	#FFFFFF

• 全体を通してゴースト／アウトラインスタイルを採用し、デフォルトのボタンは塗りつぶしません
• 角丸：6px
• トランジション：transition-property: scale, background-color, border-color, box-shadow; transition-duration: 150ms; transition-timing-function: ease-out;
• 押下時のフィードバック：:active で scale(0.96) を適用し、0.95 未満にはしません

カード

• 背景は白、角丸は10px、控えめなシャドウ
• 左側の4pxの枠線はステータスに応じた色
• ホバー時にシャドウで浮き上がらせます
• パディング：20px

ステータスバッジ

• 11pxの大文字テキスト、ウェイト600、文字間隔0.5px
• パディング：3px 8px、角丸4px
• ステータスの色の表に従い、背景は色味を付け、対応する濃い色のテキストを使用します

進捗バー

• トラック：#DCE4EA、高さ8px、角丸4px
• 塗りつぶし：ステータスに応じた色、width のトランジションは0.3s ease

オーナーのアバター

• デフォルトサイズ：22pxの円形（カード）、18pxの円形（コンパクト表示／ガントチャート表示）
• 画像：border-radius: 50%、object-fit: cover
• フォールバック：#3F454Dの円に白いイニシャル（デフォルトは9px、コンパクト表示では8px）
• つぶれないよう、常にflex-shrink: 0を指定します
• 名前と組み合わせて、6pxの間隔を空けたフレックス行に配置します

セレクト入力

• 白い背景、#B7C1CBの境界線、角丸6px
• 13pxのテキスト、太さ600、テキストカラーは#3F454D
• ホバー時：境界線を#99CCEEにします

サマリーカード

• 白い背景、角丸10px、控えめなシャドウ
• flex: 1、最小幅140px
• ラベル：大文字のセカンダリテキスト、12px
• 値：太さ700の28px、色はステータスに応じて指定（サマリーカードの値の表を参照）

ガントチャート

• コンテナ：白い背景、角丸10px、控えめなシャドウ
• 行の高さ：最小40px
• 行の区切り線：1pxの実線、#F1F6FA
• 行のホバー時：#F8FAFC
• ヘッダーの区切り線：2pxの実線、#DCE4EA
• バー：高さ24px、角丸4px、ステータスに応じた色と、進捗を示す濃い色の塗りつぶしレイヤー
• 今日の線：2pxの#e45f5fの破線、その上に10pxのラベル

トランジション

transition: allやtransition-property: allは使用しないでください。プロパティを必ず正確に指定します。allを指定すると、意図していない色、パディング、シャドウなど、すべてのプロパティがブラウザーによる監視対象となり、予期しないトランジションが発生します。

要素	トランジション
ボタン／コントロール	transition-property: scale, background-color, border-color, box-shadow 150ms ease-out
進捗バー	transition-property: width 300ms ease
カードのホバーシャドウ	transition-property: box-shadow 150ms ease-out
ガントチャートのバー	transition-property: opacity 150ms ease（ホバー時に0.85）

インタラクティブな状態変化（ホバー、切り替え、開閉）にはCSSトランジションを使用してください。アニメーションの途中で中断できます。CSSキーフレームアニメーションは、読み込みスピナーや登場アニメーションなど、一度だけ再生するシーケンスに使用します。

マイクロインタラクション

押下時の拡大・縮小

.button {
  transition-property: scale, background-color, border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.button:active { scale: 0.96; }

常に0.96を使用してください。0.95未満にはしないでください。それより小さい値は過剰に感じられます。動きが注意をそらすボタン（フォームの送信ボタンなど）では、data-static属性を追加して効果を無効にします。

画像のアウトライン

奥行きを一貫して表現するため、画像に控えめな1pxの内側アウトラインを追加します。

img {
  outline: 1px solid oklch(0.374 0.014 256 / 0.1);
  outline-offset: -1px;
}

outlineはレイアウトに影響しないため、幅や高さは追加されません。また、-1pxのオフセットにより内側に表示されます。

同心円状の角丸

角丸の要素を入れ子にする場合、外側の角丸の値は、内側の角丸の値に間隔を加えた値にする必要があります。outerRadius = innerRadius + padding。

このテーマでは、カードの角丸は10px、カードのパディングは20pxです。パディング（20px）が外側の角丸（10px）を上回るため、内側の要素は独立した面として扱います。それぞれに--radius-btn（6px）または--radius-badge（4px）を使用してください。同心円の計算が特に重要になるのは、パディングが小さく（24px未満）、入れ子の要素が外側の境界に視覚的に近い場合です。

ダークモード

上記のライトテーマがデフォルトです。ダークモードのアプリでは、references/themes/ にあるテーマ別の DESIGN.md ファイルを優先して使用してください。スロットのマッピング、インポート可能な JSON、エージェントですぐに使えるプロンプトを含む、完全なビジュアル仕様が記載されています。現在利用可能なテーマ：Charcoal Ember Dark。

完全な DESIGN.md が用意されていないパレットでは、color-palettes.md で定義されている、厳選された3つのダークテーマ（D1 Emerald Dark、D2 Neon Magenta Dark、D3 Charcoal Ember Dark）のいずれかを使用してください。それぞれ、構造用の変数（背景、サーフェス、テキスト、境界線、シャドウ）とチャートの系列色が含まれています。

ダークモードに切り替える際の主な調整：

プロパティ	ライトモード	ダークモード
ページの背景	oklch(0.96 0.01 H)	oklch(0.12–0.16 0.005–0.025 H)
カードのサーフェス	oklch(1 0 0)（白）	oklch(0.18–0.22 0.01–0.035 H)
主要テキスト	oklch(0.37 0.014 256)（暗色）	oklch(0.93–0.97 0.003–0.008 H)（ほぼ白）
セカンダリテキスト	oklch(0.51 0.016 249)	oklch(0.65–0.75 0.01–0.025 H)
境界線	oklch(0.80 0.015 H)	oklch(0.25–0.35 0.01–0.035 H)
シャドウ	oklch(text / 0.04–0.08)	oklch(0 0 0 / 0.20–0.35)（不透明度を上げる）
チャート系列 L	0.55–0.68	0.70–0.80（暗い背景でも明るく表示）
チャート系列 C	0.09–0.13	0.07–0.11（少し下げる）
ステータスバッジの背景	明るい色合い oklch(0.93+ ...)	暗い色合い oklch(0.20–0.25 ...)

コンポーネントの調整：

• ボタン：反転します。デフォルトの背景色をサーフェス色にし、テキストをほぼ白にして、ホバー時にサーフェスを明るくします
• カード：白い背景は使わず、ダークパレットの --surface を使用します。シャドウの不透明度を上げます
• ステータスバッジ：暗い色合いの背景に、より明るいテキスト（L 0.75 以上）を組み合わせます
• プログレスバーのトラック：--border-light ではなく --border を使用します
• アバター：円形の塗りつぶしには --text-primary ではなく、テーマのアクセントカラーを使用します

プロコードアプリへの適用： ダークパレットの --bg を html, body に設定します（または、App Studio のカードフレームがダークサーフェスを提供する場合は background: transparent を使用します）。color をダークパレットの --text-primary で上書きします。

重大 — ダークモードでの App Studio ネイティブ要素：

App Studio にダークモードのアプリを埋め込むと、Domo のネイティブ要素（ヒーローカード、フィルタードロップダウン、セクションヘッダー、ナビゲーションテキスト）は、フォント色にテーマの c60 AUTOMATIC_COLOR を使用します。c60 はダーク背景を確実に検出できず、デフォルトで暗いテキストを使うため、ダークなカードやページのサーフェス上ではネイティブテキストが見えなくなります。

必須の修正： ダークモードの色を設定した後、App Studio テーマ内の c60 を参照するフォント色をすべて c58（明るいテキスト色）に置き換えます。対象は cards[].fontColor、navigation[].titleFontColor、navigation[].linkFontColor、headers[].fontColor、および components[] 内のすべての *FontColor プロパティです。コードパターンの詳細は、app-studio スキルの「Dark Mode Theme」セクションを参照してください。

この修正を行わないと、左側のナビゲーション、ヒーローカードのラベル、フィルターラベル、セクションヘッダーが見えなくなります。

デザイン原則

• すべての色は、--text-primary（oklch 0.374 0.014 256）を基準とするクールグレーのパレットから導出しています
• すべての色の値に OKLCH を使用しています。16 進数の値はコメントとして記載しています。OKLCH を使うと、知覚的に均一なパレットを拡張できます。コントラストを調整するときは L を変更し、C と H は一定に保ちます
• ステータスカラーは、バーや境界線には意図的に彩度を抑えたパステルカラーを使用し、彩度の高いバリエーションは小さなテキストバッジにのみ使用しています
• 純粋な黒（oklch(0 0 0)）や純白の境界線は使用せず、すべてにわずかな青みがかったグレーの色合いを持たせています
• 主張の強いプライマリカラーは使用せず、アクセントには柔らかなブルー（--accent-hover）を控えめに使用しています
• 階層は色ではなく、フォントの太さと控えめなシャドウによって表現しています
• シャドウは単層の均一なものではなく、3 層の合成によって自然な奥行きを表現しています
• インタラクティブ要素には、少なくとも 40x40px のタップ領域を設けています。表示要素がそれより小さい場合は、疑似要素で領域を広げてください