メインコンテンツへスキップ

テーマカスタマイズ

@lh-ui/react のデザイントークンはすべて @lh-ui/share/theme に由来し、本ライブラリは一切のトークンの複製を持ちません。テーマのカスタマイズとは、これらの CSS カスタムプロパティを上書きすることです。

トークンの階層​

スタイルの優先順位は低い順に：

  1. theme.css —— @lh-ui/share が発行する基礎トークン（--lh-primary-color など）
  2. theme-dark.css —— 暗色変数（theme.css と排他、どちらかを選ぶ）
  3. LhConfigProvider の themeVars —— ラップした要素にかけられるカスケード変数
  4. コンポーネントの themeVars prop —— コンポーネントのルート要素にかかり、上位のすべてを上書き

ConfigProvider でカスタマイズする​

最も推奨される方法：アプリのルートで themeVars を渡します。キー名には --lh- 接頭辞をつけません（内部で自動的に付加されます）：

import { LhConfigProvider } from '@lh-ui/react'

export default function App() {
  return (
    <LhConfigProvider
      themeVars={{
        'primary-color': '#722ed1',
        'bg-color': '#faf9f7',
        'border-radius-base': '6px',
      }}
    >
      <YourApp />
    </LhConfigProvider>
  )
}

変数はラップした要素の style="--lh-primary-color: #722ed1; ..." として描画され、下にカスケードします。

使用可能なトークン​

キー説明
primary-colorメインカラー
success-color / warning-color / danger-color / info-colorセマンティックカラー
gold-color / vermilion-color / jade-color中華風専用カラー（金黄 / 朱砂 / 翡翠）
bg-color / text-color / border-colorニュートラルカラー
bg-pattern紋様背景の URL（例：var(--lh-pattern-willow)）
bg-pattern-opacity / bg-pattern-color紋様の不透明度と色
decoration-color装飾色

単一コンポーネントのカスタマイズ​

テーマをサポートするコンポーネントはどれも直接 themeVars を受け取り、自身にだけ影響します：

<LhButton themeVars={{ 'primary-color': '#13c2c2' }}>シアンのボタン</LhButton>

componentTheme でコンポーネント名ごとに一括設定もできます（キー名はファミリーの他のライブラリと共通）：

<LhConfigProvider
  componentTheme={{
    button: { 'primary-color': '#722ed1' },
    input: { 'border-color': '#d9d9d9' },
  }}
>
  <YourApp />
</LhConfigProvider>

優先順位：コンポーネント自身の props > componentTheme[コンポーネント名] > グローバル themeVars。

背景の紋様​

中華風の背景紋様はデフォルトでオフです。patternComponents のホワイトリストで有効化し、ホワイトリストにあるコンポーネントだけがグローバルな紋様を適用します：

<LhConfigProvider
  themeVars={{ 'bg-pattern': 'var(--lh-pattern-willow)' }}
  patternComponents={['dialog', 'card']}
>
  <YourApp />
</LhConfigProvider>

コンポーネントが自身の bgPattern prop で渡す紋様はホワイトリストの制限を受けません。

sx によるクイックレイアウト​

一部のコンポーネントは sx prop をサポートし、よく使うレイアウトスタイルをオブジェクトで書けます（セマンティクスは emotion / MUI の sx と同じ）：

<LhButton sx={{ marginTop: 2, width: '100%' }} block>
  全幅ボタン
</LhButton>

ランタイムでの切り替え​

テーマ切り替えの本質は CSS 変数を変えることなので、完全に動的にできます：

import { useState } from 'react'
import { LhConfigProvider } from '@lh-ui/react'

function App() {
  const [primary, setPrimary] = useState('#1677ff')
  return (
    <LhConfigProvider themeVars={{ 'primary-color': primary }}>
      <input type="color" onChange={(e) => setPrimary(e.target.value)} />
      <YourApp />
    </LhConfigProvider>
  )
}
CSS 変数の型アサーション

ソースコードで style="{ { '--lh-primary-color': x } }" と書くと TypeScript はエラーを出します（CSSProperties にカスタムプロパティのキーはない）。本ライブラリは cssVarsStyle() ユーティリティでキー名の変換とアサーションを一元的に処理しており、コンポーネント内部にカプセル化されているためユーザー層は気にする必要がありません。