ConfigProvider グローバル設定 - Vant 4

⚙️ 紹介

ConfigProvider は Vant コンポーネントライブラリの「魔法のカラーパレット」のようなものです！🎨 それはアプリ全体の視覚スタイルの指揮官であり、不思議な変身能力を持っています。優雅なダークモード、個性的な虹色のテーマなど、あらゆるニーズに簡単に応えることができます。

魔法の杖を軽く振るだけで、アプリ全体が瞬時に衣装を着替えることを想像してください！爽やかなライトモードから目に優しいダークモードへ、デフォルトの青色テーマから活気あふれるオレンジ色スタイルへ。ConfigProvider によって、テーマカスタマイズは非常に簡単で楽しいものになります。それはただの設定ツールではなく、ユニークなユーザーエクスペリエンスを構築するための強力な助手です！

📦 導入

以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。

import { createApp } from 'vue';
import { ConfigProvider } from 'vant';

const app = createApp();
app.use(ConfigProvider);

🌙 ダークモード

🌙 ダークモードを有効にする - 夜型人間のための福音

ConfigProvider コンポーネントの theme 属性を dark に設定すると、アプリにファッショナブルなサングラスをかけたようになります！😎

ダークモードはアプリの「夜間警護者」のようなもので、すべての Vant コンポーネントを優しいダークカラーで包み込みます。深夜に残業するプログラマーや、暗い環境でスマホを使用するユーザーは誰でも、この目に優しくてクールな視覚体験を楽しむことができます。一つのボタンで、世界全体が瞬時に優雅で神秘的なものに変わります！

html

<van-config-provider theme="dark">
  <div class="config-provider-dark">
    <van-button type="primary">ダークモードボタン</van-button>
    <van-cell-group>
      <van-cell title="タイトル" value="コンテンツ" />
    </van-cell-group>
  </div>
</van-config-provider>

Vant のダークモードを有効にすると、Vant コンポーネントの UI にのみ影響し、グローバルなテキストカラーや背景色には影響しないことに注意してください。グローバルスタイルを設定するには、以下の CSS を参照してください：

```css
.van-theme-dark body {
  color: #f5f5f5;
  background-color: black;
}

🔄 動的切り替え - カメレオンのような柔軟性

theme 属性を動的に設定することで、アプリはカメレオンのような超能力を獲得します！🦎 明るい太陽のライトスタイルと星屑がきらめくダークスタイルの間を自由に行き来することができます。

魔法使いが魔法の杖を振るように、ユーザーは現在の環境、気分、または時間に応じて最適なテーマを選択することができます。日中の仕事では集中度を高めるために爽やかなライトモードを選び、夜のレジャーでは視力を保護するために優しいダークモードに切り替えます。この思いやりのあるデザインによって、ユーザーエクスペリエンスはより人間的になります！

html

<van-config-provider :theme="theme">
  <div class="config-provider-demo">
    <van-button type="primary">テーマボタン</van-button>
    <van-switch v-model="theme" true-value="dark" false-value="light" />
  </div>
</van-config-provider>

```js
import { ref } from 'vue';

export default {
  setup() {
    const theme = ref('light');
    
    setTimeout(() => {
      theme.value = 'dark';
    }, 1000);
    
    return { theme };
  },
};

🎨 テーマカスタマイズ - あなた専用のカラーパレット

🌈 紹介 - 無限の創造性を解き放つ

Vant コンポーネントは注意深くデザインされた「レゴブロックの城」のようなもので、各コンポーネントは豊富な CSS 変数を通じてその視覚的な外観を構築しています。これらの CSS 変数は城の「魔法の宝石」のようなもので、異なる色の宝石に置き換えるだけで、城全体が新鮮な見た目に変わります！

これらの CSS 変数を巧妙に上書きすることで、パーソナライズされたテーマカスタマイズ、リアルタイムの動的テーマ切り替えなど、驚くべき効果を簡単に実現できます。企業のブランドカラー、祝日のテーマカラー、ユーザーの個人的な好みの色など、どんなものでも完璧に表現できます！

例

Button コンポーネントを例にとると、コンポーネントのスタイルを見ると、.van-button--primary クラス名には以下の変数が存在します：

css

.van-button--primary { color: var(--van-button-primary-color); background-color: var(--van-button-primary-background); }

これらの変数のデフォルト値は :root ノードで定義されており、HTML 内のすべての子ノードからこれらの変数にアクセスできます：

css

:root { --van-white: #fff; --van-blue: #1989fa; --van-button-primary-color: var(--van-white); --van-button-primary-background: var(--van-primary-color); }

カスタム CSS 変数

CSS での上書き

コード内で直接これらの CSS 変数を上書きすることができ、Button コンポーネントのスタイルはそれに応じて変化します：

css

/* このスタイルを追加すると、Primary Button が赤になります */
:root:root {
  --van-button-primary-background: red;
}

注意：なぜ :root を2回繰り返すのですか？
vant のテーマ変数も :root で宣言されているため、優先度の問題でうまく上書きできない場合があります。root:root を使用することで、記述内容の優先度を明確に高め、テーマ変数の成功した上書きを確保することができます。

ConfigProvider による上書き

ConfigProvider コンポーネントは CSS 変数を上書きする機能を提供します。ルートノードで ConfigProvider コンポーネントをラップし、theme-vars 属性を使用していくつかのテーマ変数を設定する必要があります。

html

<van-config-provider :theme-vars="themeVars">
  <div class="config-provider-theme">
    <van-rate v-model="rate" />
    <van-slider v-model="slider" />
    <van-button type="primary">カスタムボタン</van-button>
  </div>
</van-config-provider>

```js
import { ref, reactive } from 'vue';

export default {
  setup() {
    const rate = ref(4);
    const slider = ref(50);
    
    // themeVars 内の値は対応する CSS 変数に変換されます
    // たとえば sliderBarHeight は `--van-slider-bar-height` に変換されます
    const themeVars = reactive({
      rateIconFullColor: '#07c160',
      sliderBarHeight: '4px',
      sliderButtonWidth: '20px',
      sliderButtonHeight: '20px',
      sliderActiveBackground: '#07c160',
      buttonPrimaryBackground: '#07c160',
      buttonPrimaryBorderColor: '#07c160',
    });
    
    return { rate, slider, themeVars };
  },
};

CSS 変数の適用範囲

デフォルトでは、themeVars によって生成される CSS 変数はコンポーネントのルートノードに設定されるため、その子コンポーネントのスタイルにのみ影響し、ページ全体には影響しません。

theme-vars-scope 属性を使用して、CSS 変数の適用範囲を変更することができます。たとえば、theme-vars-scope を global に設定すると、themeVars によって生成される CSS 変数は HTML のルートノードに設定され、ページ内のすべてのコンポーネントに効果が及びます。

html

<van-config-provider :theme-vars="themeVars" theme-vars-scope="global">
  <div class="config-provider-scope">
    <van-button type="primary">グローバルボタン</van-button>
  </div>
</van-config-provider>

#### TypeScript での使用

TypeScript で themeVars を定義する場合、Vant が提供する `ConfigProviderThemeVars` 型を使用することをお勧めします。これにより、完全な型ヒントが提供されます：

```ts
import type { ConfigProviderThemeVars } from 'vant';

const themeVars: ConfigProviderThemeVars = {
  sliderBarHeight: '4px',
};

ダークモードと CSS 変数の組み合わせ

ダークモードまたはライトモードでのみ CSS 変数を個別に定義する必要がある場合は、theme-vars-dark および theme-vars-light 属性を使用できます。

theme-vars-dark: ダークモードでのみ有効な CSS 変数。theme-vars で定義された変数よりも優先されます。
theme-vars-light: ライトモードでのみ有効な CSS 変数。theme-vars で定義された変数よりも優先されます。

例

以下の buttonPrimaryBackground 変数を例にとると、ダークモードでは値が blue、ライトモードでは値が green になります。

html

<van-config-provider
  :theme-vars="themeVars"
  :theme-vars-dark="themeVarsDark"
  :theme-vars-light="themeVarsLight"
  :theme="theme"
>
  <div class="config-provider-theme">
    <van-button type="primary">モード対応ボタン</van-button>
    <van-switch v-model="theme" true-value="dark" false-value="light" />
  </div>
</van-config-provider>

```js
import { ref, reactive } from 'vue';

export default {
  setup() {
    const theme = ref('light');
    const themeVars = reactive({ buttonPrimaryBackground: 'red' });
    const themeVarsDark = reactive({ buttonPrimaryBackground: 'blue' });
    const themeVarsLight = reactive({ buttonPrimaryBackground: 'green' });
    
    return { theme, themeVars, themeVarsDark, themeVarsLight };
  },
};

クラス名の使用

さらに、.van-theme-light および .van-theme-dark という2つのクラス名セレクタを使用して、ライトモードまたはダークモードでの基本変数とコンポーネント変数を個別に変更することもできます。

css

.van-theme-light {
  --van-white: white;
}

.van-theme-dark {
  --van-white: black;
}

テーマ変数

変数の種類

Vant の CSS 変数は 基本変数 と コンポーネント変数 に分類されます。コンポーネント変数は基本変数を継承するため、基本変数を変更すると、関連するすべてのコンポーネントに影響します。

変数の変更

CSS 変数には継承関係があり、コンポーネント変数は最も近い親の基本変数を継承します。

したがって、基本変数の変更には一定の制限があります。基本変数を変更するには、root セレクタまたは ConfigProvider コンポーネントのグローバルモードを使用する必要があります。そうしないと、コンポーネント変数が基本変数を正しく継承できない可能性があります。

--van-primary-color という基本変数を例にとる：

root セレクタを使用して変更できます：

css

:root { --van-primary-color: red; }

ConfigProvider コンポーネントのグローバルモードを使用して変更できます：

html

ConfigProvider コンポーネントのデフォルトの local モードでは変更できません：

html

コンポーネント変数には上記の制限はなく、任意の方法で変更できます。

基本変数リスト

以下はすべての基本変数です：

less

// カラーパレット--van-black: #000; --van-white: #fff; --van-gray-1: #f7f8fa; --van-gray-2: #f2f3f5; --van-gray-3: #ebedf0; --van-gray-4: #dcdee0; --van-gray-5: #c8c9cc; --van-gray-6: #969799; --van-gray-7: #646566; --van-gray-8: #323233; --van-red: #ee0a24; --van-blue: #1989fa; --van-orange: #ff976a; --van-orange-dark: #ed6a0c; --van-orange-light: #fffbe8; --van-green: #07c160; // グラデーションカラー--van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24); --van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917); // コンポーネントカラー--van-primary-color: var(--van-blue); --van-success-color: var(--van-green); --van-danger-color: var(--van-red); --van-warning-color: var(--van-orange); --van-text-color: var(--van-gray-8); --van-text-color-2: var(--van-gray-6); --van-text-color-3: var(--van-gray-5); --van-active-color: var(--van-gray-2); --van-active-opacity: 0.6; --van-disabled-opacity: 0.5; --van-background: var(--van-gray-1); --van-background-2: var(--van-white); // パディング--van-padding-base: 4px; --van-padding-xs: 8px; --van-padding-sm: 12px; --van-padding-md: 16px; --van-padding-lg: 24px; --van-padding-xl: 32px; // フォント--van-font-size-xs: 10px; --van-font-size-sm: 12px; --van-font-size-md: 14px; --van-font-size-lg: 16px; --van-font-bold: 600; --van-line-height-xs: 14px; --van-line-height-sm: 18px; --van-line-height-md: 20px; --van-line-height-lg: 22px; --van-base-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; --van-price-font: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif; // アニメーション--van-duration-base: 0.3s; --van-duration-fast: 0.2s; --van-ease-out: ease-out; --van-ease-in: ease-in; // ボーダー--van-border-color: var(--van-gray-3); --van-border-width: 1px; --van-radius-sm: 2px; --van-radius-md: 4px; --van-radius-lg: 8px; --van-radius-max: 999px;

各コンポーネントのドキュメントの下部にある表でコンポーネント変数を確認できます。

API

Props

パラメータ	説明	タイプ	デフォルト値
theme	テーマスタイル、`dark` に設定するとダークモードが有効になります、グローバルに効果があります	ConfigProviderTheme	`light`
theme-vars	カスタムテーマ変数、ローカルに効果があります	object	-
theme-vars-dark	ダークモードでのみ有効なテーマ変数、`theme-vars` よりも優先されます	object	-
theme-vars-light	ライトモードでのみ有効なテーマ変数、`theme-vars` よりも優先されます	object	-
theme-vars-scope	デフォルトでは子コンポーネントのスタイルのみに影響します、`global` に設定するとページ全体に効果があります	ConfigProviderThemeVarsScope	`local`
tag	ルートノードに対応する HTML タグ名	string	`div`
z-index	すべてのポップアップ型コンポーネントの z-index を設定します、この属性はグローバルに効果があります	number	`2000`
icon-prefix	すべてのアイコンのクラス名プレフィックス、Icon コンポーネントの class-prefix 属性と同等です	string	`van-icon`

型定義

コンポーネントは以下の型定義をエクスポートしています：

importtype { ConfigProviderProps, ConfigProviderTheme, ConfigProviderThemeVars, ConfigProviderThemeVarsScope, } from'vant';

🎯 ベストプラクティス

🎨 テーマデザイン原則

一貫性を維持する - アプリ全体のテーマスタイルが統一され、調和していることを確認します
アクセシビリティを考慮する - 文字が明確に読めるように、十分なコントラストのある色の組み合わせを選択します
ユーザーの好みに対応する - システムテーマの追従をサポートし、手動切り替えオプションを提供します
パフォーマンスを最適化する - 頻繁なテーマ切り替えを避け、キャッシュメカニズムを適切に使用します

🔧 テーマ変数管理のコツ

javascript

// 推奨：テーマ変数を集中管理
const lightTheme = {
  primaryColor: '#1989fa',
  successColor: '#07c160',
  warningColor: '#ff976a',
  dangerColor: '#ee0a24'
}

const darkTheme = {
  primaryColor: '#3291ff',
  successColor: '#4fc08d',
  warningColor: '#fcbd71',
  dangerColor: '#f56c6c'
}

// 動的にテーマを切り替える
const currentTheme = computed(() => 
  isDark.value ? darkTheme : lightTheme
)

📱 レスポンシブテーマ対応

css

/* システムテーマに従う */
@media (prefers-color-scheme: dark) {
  :root {
    --van-primary-color: #3291ff;
    --van-background: #1a1a1a;
  }
}

/* モバイル対応 */
@media (max-width: 768px) {
  :root {
    --van-font-size-md: 16px;
    --van-padding-md: 20px;
  }
}

❓ よくある質問と解決策

🔍 テーマ変数が効かない？

問題：テーマ変数を設定したが、スタイルが変わらない 解決策：

CSS 変数名が正しいか確認する（--van- プレフィックスに注意）
変数の適用範囲設定を確認する（local vs global）
優先度を高めるために :root:root を使用する

🌙 ダークモードのフリッカー問題

問題：ダークモードに切り替えると白いフラッシュが表示される 解決策：

css

/* フリッカーを避けるためにダーク背景を事前に設定 */
html {
  background-color: #1a1a1a;
  color-scheme: dark light;
}

🎨 カスタムテーマカラーの統一性のない問題

問題：一部のコンポーネントにカスタムテーマカラーが適用されていない 解決策：

コンポーネント変数ではなく基本変数を使用する
コンポーネントがそのテーマ変数をサポートしているか確認する
CSS クラス名での上書きを検討する

💡 高度な使い方の例

🌈 マルチテーマ切り替えシステム

vue

<template>
  <ConfigProvider :theme-vars="currentThemeVars">
    <div class="theme-selector">
      <button 
        v-for="theme in themes" 
        :key="theme.name"
        @click="switchTheme(theme)"
        :class="{ active: currentTheme === theme.name }"
      >
        {{ theme.label }}
      </button>
    </div>
    <YourApp />
  </ConfigProvider>
</template>

<script setup>
const themes = [
  { name: 'default', label: 'デフォルトブルー', vars: { primaryColor: '#1989fa' } },
  { name: 'green', label: '清新グリーン', vars: { primaryColor: '#07c160' } },
  { name: 'orange', label: '活力オレンジ', vars: { primaryColor: '#ff976a' } },
  { name: 'purple', label: '神秘パープル', vars: { primaryColor: '#7232dd' } }
]

const currentTheme = ref('default')
const currentThemeVars = computed(() => 
  themes.find(t => t.name === currentTheme.value)?.vars || {}
)

const switchTheme = (theme) => {
  currentTheme.value = theme.name
  // オプション：ユーザーの好みを保存
  localStorage.setItem('preferred-theme', theme.name)
}
</script>

🎭 祝日テーマの自動切り替え

javascript

// 日付に基づいて祝日テーマを自動的に適用
const getSeasonalTheme = () => {
  const now = new Date()
  const month = now.getMonth() + 1
  const day = now.getDate()
  
  // 春節テーマ
  if (month === 1 || month === 2) {
    return { primaryColor: '#ff4757', successColor: '#ffa502' }
  }
  // クリスマステーマ
  if (month === 12) {
    return { primaryColor: '#2ed573', dangerColor: '#ff4757' }
  }
  // デフォルトテーマ
  return {}
}

🎨 デザインのインスピレーション

🌟 人気のテーマカラースキーム

テクノロジーブルー - 専門的、信頼性が高い

css

--van-primary-color: #0066cc;
--van-success-color: #00cc66;

温かいオレンジ - 友好的、活気がある

css

--van-primary-color: #ff6b35;
--van-warning-color: #ffa726;

優雅なパープル - 創造的、高級感

css

--van-primary-color: #6c5ce7;
--van-success-color: #00b894;

🎯 業界別テーマの提案

金融系アプリ：落ち着いた青色 + 安全な緑色
EC系アプリ：活気のオレンジ色 + プロモーションの赤色
教育系アプリ：知識の青色 + 成長の緑色
医療系アプリ：医療の青色 + 健康の緑色

📚 関連ドキュメント

Icon アイコン - アイコンコンポーネントの使用方法について
Style 組み込みスタイル - Vant の組み込みスタイル変数を確認
高度な使い方 - コンポーネント登録のより多くの方法を学ぶ
クイックスタート - Vant の使い始め

🔗 関連リンク

CSS カスタムプロパティ (変数) - MDN 公式ドキュメント
ダークモードデザインガイド - Apple デザインガイドライン
Material Design テーマシステム - Google デザインガイドライン
アクセシビリティデザインのカラーコントラスト - オンラインコントラストチェックツール

ConfigProvider グローバル設定 - Vant 4 ​

⚙️ 紹介 ​

📦 導入 ​

🌙 ダークモード ​

🌙 ダークモードを有効にする - 夜型人間のための福音 ​

🔄 動的切り替え - カメレオンのような柔軟性 ​

🎨 テーマカスタマイズ - あなた専用のカラーパレット ​

🌈 紹介 - 無限の創造性を解き放つ ​

例 ​

カスタム CSS 変数 ​

CSS での上書き ​

ConfigProvider による上書き ​

CSS 変数の適用範囲 ​

ダークモードと CSS 変数の組み合わせ ​

例 ​

クラス名の使用 ​

テーマ変数 ​

変数の種類 ​

変数の変更 ​

基本変数リスト ​

API ​

Props ​

型定義 ​

🎯 ベストプラクティス ​

🎨 テーマデザイン原則 ​

🔧 テーマ変数管理のコツ ​

📱 レスポンシブテーマ対応 ​

❓ よくある質問と解決策 ​

🔍 テーマ変数が効かない？ ​

🌙 ダークモードのフリッカー問題 ​

🎨 カスタムテーマカラーの統一性のない問題 ​

💡 高度な使い方の例 ​

🌈 マルチテーマ切り替えシステム ​

🎭 祝日テーマの自動切り替え ​

🎨 デザインのインスピレーション ​

🌟 人気のテーマカラースキーム ​

🎯 業界別テーマの提案 ​

📚 関連ドキュメント ​

🔗 関連リンク ​

ConfigProvider グローバル設定 - Vant 4

⚙️ 紹介

📦 導入

🌙 ダークモード

🌙 ダークモードを有効にする - 夜型人間のための福音

🔄 動的切り替え - カメレオンのような柔軟性

🎨 テーマカスタマイズ - あなた専用のカラーパレット

🌈 紹介 - 無限の創造性を解き放つ

例

カスタム CSS 変数

CSS での上書き

ConfigProvider による上書き

CSS 変数の適用範囲

ダークモードと CSS 変数の組み合わせ

例

クラス名の使用

テーマ変数

変数の種類

変数の変更

基本変数リスト

API

Props

型定義

🎯 ベストプラクティス

🎨 テーマデザイン原則

🔧 テーマ変数管理のコツ

📱 レスポンシブテーマ対応

❓ よくある質問と解決策

🔍 テーマ変数が効かない？

🌙 ダークモードのフリッカー問題

🎨 カスタムテーマカラーの統一性のない問題

💡 高度な使い方の例

🌈 マルチテーマ切り替えシステム

🎭 祝日テーマの自動切り替え

🎨 デザインのインスピレーション

🌟 人気のテーマカラースキーム

🎯 業界別テーマの提案

📚 関連ドキュメント

🔗 関連リンク