テーマスタジオ

テーマスタジオはインタラクティブなツールです：プリセットを選び、トークンごとに色を変え、リアルタイムにプレビューし、最後にそのまま使える SCSS ファイルをエクスポートします。

プリセット

主色

悬停

按压

主色底

主色边框

主色衍生

主色底文字

选中态文字

功能色

成功

警告

危险

信息

文本

主要文字

常规文字

次要文字

背景

容器背景

页面背景

边框

基础边框

浅边框

リアルタイムプレビュー

プライマリタグ成功タグ危険タグ

選択済み

主要テキスト·通常テキスト·補助テキスト

編集したトークンはプレビュー領域にのみ適用されます（ConfigProvider と同じ仕組み）。エクスポートされたファイルにはダークモード適用も含まれます。

SCSS をエクスポート

/* lh-ui 自定义主题 —— 由主题定制台生成（2026-10-15）
 * 令牌定义见 @lh-ui/share/styles/theme/common/var.scss；暗色块与预设机制同源
 *（浅主色下 --lh-color-on-primary / --lh-selected-color 需显式声明，否则白字不达 AA） */
@use '@lh-ui/share/styles/index.scss';

:root {
  --lh-primary-color: #2B4C7C;
  --lh-primary-color-hover: #3D649E;
  --lh-primary-color-active: #1F3A5F;
  --lh-primary-color-bg: #E8EDF3;
  --lh-primary-color-border: #D4DCE8;
  --lh-color-on-primary: #FFFFFF;
  --lh-success-color: #5B8C5A;
  --lh-warning-color: #C4A35A;
  --lh-danger-color: #B23A3A;
  --lh-info-color: #7A7A7A;
  --lh-text-primary: #2C2C2C;
  --lh-text-regular: #5A5A5A;
  --lh-text-secondary: #8A8A8A;
  --lh-bg-color: #FAF6F0;
  --lh-bg-color-page: #F5F0EB;
  --lh-border-color-base: #D8D3CC;
  --lh-border-color-light: #E5E0D8;
}

[data-theme='dark'],
.dark {
  --lh-primary-color-bg: color-mix(in srgb, var(--lh-primary-color) 25%, transparent);
  --lh-selected-color: color-mix(in srgb, var(--lh-primary-color) 40%, #fff);
  --lh-primary-color: color-mix(in srgb, #2B4C7C 55%, #fff);
  --lh-primary-color-hover: color-mix(in srgb, var(--lh-primary-color) 70%, #fff);
  --lh-primary-color-active: color-mix(in srgb, var(--lh-primary-color) 85%, #000);
  --lh-color-on-primary: #101410;
}

使い方

プリセットを選ぶ：上部のドロップダウンで 5 セットの内蔵カラーパレット（青花瓷 / 松花绿 / 朱砂 / 水墨 / 藤黄）を切り替えます。プリセットは自身が宣言するトークンだけを上書きし、それ以外は現在の値を保ちます。
トークンを変える：各トークングループにカラーピッカーと hex テキストボックスがあり、両者は同期します。「デフォルトチェーンに追従」と印されたオプショントークン（例：--lh-selected-color）は空のままにするとスタイルシートのデフォルトの派生関係に従います。
プレビュー：プレビュー領域はリアルな lh-ui コンポーネントで描画され、トークンは局所的な CSS 変数として注入されます（LhConfigProvider と同じ機構）。プレビュー領域自身にだけ作用し、サイトには影響しません。明 / 暗を切り替えて暗色対応の効果を確認できます。
エクスポート：コピーまたはダウンロードした SCSS テキストには :root トークンブロックと [data-theme='dark'] 暗色ブロックが含まれます。暗色のロジックは share のプリセット機構と完全に同源です（濃いメインカラーのプリセットは暗色で自動的にメインカラーを明るくしないと、ボタンと背景が一体になってしまうため）。

エクスポートテキストの構造

/* lh-ui カスタムテーマ —— テーマスタジオが生成（2026-01-01） */
@use '@lh-ui/share/styles/index.scss';

:root {
  --lh-primary-color: #2B4C7C;
  /* ... */
}

[data-theme='dark'],
.dark {
  --lh-primary-color-bg: color-mix(in srgb, var(--lh-primary-color) 25%, transparent);
  /* ... */
}

@use が全量のトークン基準を読み込み、:root ブロックは変更したトークンだけを上書きします。
暗色ブロックは buildPresetDarkVars が推導し、プレビュー領域で見たものと完全に一致します。

注意事項

<style> 要素にしか書けない

プリセット変数を適用する時は <style> 要素（特異性 0,1,0）に書き、「documentElement」のインライン style には書かないでください —— インラインの特異性 1,0,0,0 はすべてのスタイルシートより高く、var-dark.scss の暗色変数の全区間を圧倒し、暗色モードの配色が歪みます。ライブラリ内の useLhPresetTheme も本サイトの FOUC 防止スクリプトもこの約束に従っています。

浅いメインカラーのコントラスト

浅いメインカラーのプリセット（松花绿など）では --lh-color-on-primary（メインカラーを地色にする時に墨色の文字にする）と --lh-selected-color（選択状態の文字を別途濃くする）を明示的に宣言する必要があります。そうでないと白い文字が浅いメインカラーの上で AA コントラストに達しません。内蔵プリセットはすでに処理済みで、カスタマイズする時は自分で確認してください。

Vue 版との関係

本ページのツールは lh-ui-plus の ThemeStudio から移植され、トークンのデフォルト値、グループ分け、暗色の推導ロジックはすべて一致しています。エクスポートした SCSS は 2 つのライブラリで共通に使えます（トークン定義は共有層 @lh-ui/share/styles/theme/common/var.scss にあります）。

使い方​

エクスポートテキストの構造​

注意事項​

使い方

エクスポートテキストの構造

注意事項