カスタムカラーシステム

9色のパレットをRGBスライダーで自由に調整。和名も定義できます。

→
パレット選択
palette-1
--color-bg — 背景色
和名
Scales
▾
Method
Steps
Amount
Color scale
Sub Colors
▾
近い伝統色
仮パレット — Sub Colorsから配置・クリックでコピー
Key +
Sub +
Accent +
Live Preview
Live Preview — 伝統色ブラウザ上にフロート中
Live Preview
My App
Dashboard
Settings
Profile

カスタムテーマ

テキスト・背景・アクセント色を確認

カード見出し
補助テキストの見え方
Accent Success Warning Error Info
tertiary — 補助テキスト
disabled — 無効テキスト
Pie Menu Preview
Palette Roles ▾
色Role和名
CSS スニペット書き出し ▾
テーマ名
themes.css 正本フォーマット（palette-1..9 + セマンティック + 派生）。9色編集時に自動更新。
ライブ適用 (data-theme) ▾
適用先
状態 未適用
[data-theme] スコープで部分領域にも適用可能。ピッカーUIを壊さない場合は #livePreview を推奨。
名前付きテーマ保存 (SSOT) ▾
保存名
a11y 致命的違反がある間は保存できません。
  1. themes/themes.css 末尾へ追記
  2. npm run extract:ssot
  3. npm run build
  4. npm run ci
各言語エクスポート（簡易） ▾
形式
正式ルート: 機能Cで themes.css → extract:ssot → build。ここはビルド無しの即時コピー用。
⚙ アクセシビリティ診断 —
伝統色ブラウザ 621色