テーマ Playground

ブランド色を選ぶと、createTheme() によって再計算されたテーマが以下の実部品（Card / Badge / Button / TextInput / Dialog）へ実際に反映されます。ダークモードの切り替えも試せます。

仕組み

このプレビューは @hirasaki1985/web-ui の実コンポーネントをReact island（client:only="react"）として読み込み、選んだ色から生成したテーマを ThemeProvider 経由で配信しています。ブランドを差し替える で説明した実際のAPI（createTheme({ colors: { primary: <10段> } } )）をそのまま使っており、見た目の変化はモックではありません。

client:only（client:loadではなく）を使っているのは、@hirasaki1985/web-uiのコンポーネントがstyled-componentsのタグ付きテンプレート（styled.span等）をモジュール直下で呼ぶため、Astroの静的ビルド（Node.js側）でこのモジュールを評価するとビルドが失敗するためです。実体（ThemePlaygroundImpl.tsx）はReact.lazy()でブラウザ側からのみdynamic importしており、ビルド時にはNode.js側で一切評価されません。

選択した1色から10段スケールを自動生成しているのはこのプレビュー内だけの処理です。web-ui本体の createTheme() は10段スケール全部を受け取る契約のままで、1色からの自動生成機能を持ちません（採用しなかった理由も同ページを参照）。

このコンポーネント（docs/src/components/ThemePlayground.tsx）はドキュメントサイト固有の実装のため、web-ui本体（src/）には含まれません。