# テーマスタジオ

プリセットだけで済ませたくない場合は、以下のスタジオでプリセットを起点に選び、トークンごとに自分の配色へ調整してください。プレビュー領域にリアルタイムで反映され、最後に 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/share/styles/theme/common/var.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);
}

採用方法は二つあります。

方法一：静的読み込み（推奨）——エクスポートした lh-theme.scss をプロジェクトに置き、エントリで読み込みます。

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

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

方法二：ランタイム注入——LhConfigProvider の themeVars で部分的に上書きします（キーは短縮形で、自動的に --lh- 接頭辞が補われます）。同一ページに複数のテーマを並べる場合に適しています。

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

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue2'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

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

# 注意事項

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

← テーマ