テーマスタジオ

プリセットだけで満足できない？以下のスタジオでプリセットを起点に選び、トークンごとに自分の配色を調整すると、プレビュー領域にリアルタイムで反映されます。最後に scss ファイルをエクスポートしてプロジェクトにそのまま配置できます —— コンポーネントライブラリを再コンパイルする必要はありません。

主色

--lh-primary-color

--lh-primary-color-hover

--lh-primary-color-active

--lh-primary-color-bg

--lh-primary-color-border

主色衍生

--lh-color-on-primary

--lh-selected-color

功能色

--lh-success-color

--lh-warning-color

--lh-danger-color

--lh-info-color

文本

--lh-text-primary

--lh-text-regular

--lh-text-secondary

背景

--lh-bg-color

--lh-bg-color-page

边框

--lh-border-color-base

--lh-border-color-light

实时预览

标签标签标签

主要文字·常规文字·次要文字

编辑的令牌只作用于预览区（与 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;
}

エクスポートしたテーマの取り込み

スタジオがエクスポートするファイルはこのようになります（トークン元は @lh-ui/share/styles/theme/common/var.scss にあります）：

scss

@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);
  --lh-selected-color: color-mix(in srgb, var(--lh-primary-color) 40%, #fff);
}

2 つの取り込み方があります：

方式 1：静的インポート（推奨） —— エクスポートした lh-theme.scss をプロジェクトに配置し、エントリでインポートします：

// main.ts
import './lh-theme.scss'

@use '@lh-ui/share/styles/index.scss' にすべてのコンポーネントスタイルとテーマトークンが含まれているため一行で完了します。ダークブロックは share のプリセット機構と同源で、data-theme="dark" の下で自動的に切り替わります。

方式 2：ランタイム注入 —— LhConfigProvider の themeVars で局所的に上書きします（キーは省略形で、自動的に --lh- プレフィックスが補われる）。同一ページに複数のテーマを並べる場合に適しています：

vue

<script setup lang="ts">
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <LhConfigProvider :theme-vars="{ primaryColor: '#2B4C7C', onPrimary: '#FFFFFF' }">
    <LhButton type="primary">メインボタン</LhButton>
  </LhConfigProvider>
</template>

例のコードは統一して npm パッケージ名（@lh-ui/vue3 / @lh-ui/share）を使用しており、コピーするだけで使えます；本ドキュメントサイトの実際の実行はファミリーのローカルソースコードに基づいているため、変更が即座に確認できます。

注意事項

淡い主要色では --lh-color-on-primary を明示的に宣言する必要がある：淡い主要色の上の白文字は AA コントラスト（4.5:1）に達しないため、プリセットでは松花绿 / 藤黄はいずれも墨文字に切り替えています。スタジオの「主色背景の文字」フィールドがこのトークンに対応します。
--lh-selected-color が空の場合は --lh-primary-color-active のデフォルトの連鎖に従います。淡い主要色の下で選択文字として使う場合は单独で濃くする必要が生じることが多いです（プリセットにも同じように反映されています）。
コントラストのゲート：share の pnpm verify:theme が実際の消費ペアに基づいて各プリセットの AA コントラストを再計算します。カスタムテーマはプリセットテーマのコメントに照らして一通り自己確認することをお勧めします。

テーマスタジオ ​

エクスポートしたテーマの取り込み ​

注意事項 ​

テーマスタジオ

エクスポートしたテーマの取り込み

注意事項