テーマとダークモード

見た目はすべて @thl-ui/tokens が生成する CSS カスタムプロパティから決まります。コンポーネントは色をハードコードしないため、スキン、ダークモード、独自ブランドはどれもトークンの上書きにすぎません。

スキン

12 種類のスキンを内蔵しています: 6 つのブランドカラー × ライト / ダークのサイドバー。

スキン	テーマ	トップバーのグラデーション
default	#0277b9	#0078bc → #00beda
green	#2ecc71	#25bf67 → #3fdd82
yellow	#ffb136	#f2a225 → #ffbb51
red	#d6411d	#d93c17 → #ff704f
purple	#4a23ad	#4a23ad → #693fd5
black	#282f32	#282f32 → #4b555b

-dark を付ける（例: green-dark）と、ダークな #4F5467 のサイドバーになります。設定の theme、または実行時に set({ theme }) で指定します。このサイトのトップバーにあるスキンセレクターで試してみてください。

アクセシブルな色の組み合わせ

#2ecc71 のような明るい塗りは、WCAG AA の基準では白い文字を載せられません（2.1:1）。thl-ui は塗りには色相をそのまま使い、補助トークンを追加しています。

トークン	用途	例
--thl-on-{color}	--thl-color-{color} の塗りの上に描くテキスト / アイコン	primary 上は白、success / info / warning 上は濃いインク #1d2326
--thl-color-{color}-text	サーフェス上でテキストとして使う色	success のテキストは #18713d、danger のテキストは #b5361a
--thl-on-theme, --thl-theme-text	現在のスキン用の同じ組み合わせ	green と yellow のスキンではアクティブなタブに暗い文字を使います

すべての組み合わせはライトモードとダークモードで 4.5:1 以上です。これはユニットテストで保証しています（packages/core/src/core.test.ts → token contrast）。primary（#0277b9）と danger（#d6411d）は白い文字を載せられる十分な暗さです。

ダークモード

colorMode: 'dark' はサーフェス、テキスト、ボーダーのトークンを切り替えます。'auto' は OS の設定（prefers-color-scheme）に従い、リアルタイムで更新されます。このサイトでは VitePress の外観トグルを colorMode と同期しています。

トークン

特によく使うトークン（--thl-*）:

トークン	ライト	用途
--thl-theme	スキン	アクセント: アクティブなメニュー、フォーカス、ホバー時のリンク、primary の強調
--thl-topbar-1, --thl-topbar-2	スキン	トップバーのグラデーション
--thl-color-{primary,success,info,warning,danger,inverse,purple,…}	パレット	セマンティックカラー
--thl-body-bg	#f4f8f9	ページ背景
--thl-surface, --thl-surface-muted	#fff, #f7fafc	カード、入力欄、テーブルのストライプ
--thl-border-color	#e5ebec	ボーダー
--thl-text, --thl-text-strong, --thl-heading, --thl-link		文字色
--thl-sidebar-bg, --thl-sidebar-text, --thl-sidebar-active		サイドメニュー
--thl-font-family, --thl-font-size, --thl-line-height	Open Sans, 14px, 1.6
--thl-radius-sm, --thl-radius, --thl-radius-lg	2 / 4 / 6px	radius: 'sharp' → 0
--thl-topbar-height, --thl-sidebar-width, --thl-sidebar-mini-width	60 / 265 / 60px	レイアウト
--thl-z-base	1000	zIndex 設定から

全一覧: node_modules/@thl-ui/styles/dist/tokens.css。

独自ブランド

自分の CSS でトークンを上書きします。グローバルにもスキンごとにも指定できます。

:root {
  --thl-font-family: 'Inter', system-ui, sans-serif;
  --thl-color-primary: #6d28d9;
}

/* 新しいスキン: config.theme = 'brand' を設定 */
[data-thl-theme='brand'] {
  --thl-theme: #6d28d9;
  --thl-topbar-1: #5b21b6;
  --thl-topbar-2: #8b5cf6;
}

/* ダークモードだけを調整 */
[data-thl-color-mode='dark'] {
  --thl-body-bg: #0b0d12;
}

theme の型は ThlSkin です。カスタムスキンではキャストするか型を広げてください: set({ theme: 'brand' as never })。

スコープ付きテーマ

トークンはただの CSS 変数なので、任意のサブツリーで別の見た目を使えます。

<section data-thl-theme="red" style="--thl-radius: 12px">
  <!-- ここのコンポーネントは red スキンと大きめの角丸を使います -->
</section>

クラスの prefix

すべてのクラスは設定可能な prefix 付きの BEM に従います: .thl-btn、.thl-btn--primary、.thl-btn__icon。別の prefix で出荷するには、設定で prefix を指定し、さらに SCSS ソースを $p でコンパイルします。

@use '@thl-ui/styles/scss/index' with ($p: 'acme');

レイアウト

layout で AppLayout を 3 種類のシェルに切り替えます。

値	シェル
vertical	フルサイドバー（265px）
mini	アイコンのみのサイドバー（60px）、フライアウトのサブメニュー
horizontal	上部のメニューバー

1170px 未満ではサイドバーが自動的にミニになり、768px 未満ではオフキャンバスの drawer になります（components.Sidebar.breakpoint で設定可能）。