テーマ・動的配色

m3-baseui は Material Color Utilities（HCT）でシード色から配色スキームを生成します。 ThemeProvider が --md-sys-color-* CSS 変数を書き込み、全コンポーネントがトークン経由で色を参照します。

参考: Material Design 3 公式ガイドライン m3.material.io/styles/color/system/overview

このドキュメントサイト左側の Navigation rail 下部のテーマ設定（モバイルではメニューから開くドロワー下部）から、シード色（カラー）とライト / ダークモードを切り替えられます。選択内容は localStorage に保存され、サイト全体へリアルタイムに反映されます。

ThemeProvider

<ThemeProvider
  seed="#6750A4"
  scheme="tonalSpot"
  mode="system"
  contrast="standard"
>
  {children}
</ThemeProvider>

Prop	型	既定値	説明
`seed`	`string`	—	16 進シード色。設定すると動的配色が有効になります
`scheme`	`SchemeVariant`	`tonalSpot`	tonalSpot / vibrant / expressive / neutral / content / fidelity
`mode`	`'light' \| 'dark' \| 'system'`	`system`	ライト / ダーク / OS 設定に追従
`contrast`	`'standard' \| 'medium' \| 'high'`	`standard`	コントラストレベル

useTheme でモード切替

import { IconButton, useTheme } from '@AkimasaSugai/m3-baseui-react-tailwind';

function ModeToggle() {
  const { resolvedMode, setMode } = useTheme();
  const dark = resolvedMode === 'dark';
  return (
    <IconButton
      variant="tonal"
      aria-label={dark ? 'ライトモード' : 'ダークモード'}
      onClick={() => setMode(dark ? 'light' : 'dark')}
    >
      …
    </IconButton>
  );
}

トークンと CSS 変数

色はチャンネル三値（例: 103 80 164）で保持され、 rgb(var(--md-sys-color-primary)) のように参照します。トークンの単一ソースは packages/tokens/src/tokens.ts です。

Tailwind 利用時は @AkimasaSugai/m3-baseui-tokens/theme.css が @theme プリセットへマップし、bg-primary 等のユーティリティが使えます。

ポータルと動的配色

Dialog / Menu / Select などポータル描画するコンポーポントは、 ThemeProvider の外側 DOM にマウントされる場合があります。アプリ全体で動的配色を使う場合は、生成された CSS 変数が document.documentElement まで届くよう layout 設計に注意してください。