🎨 テーマカスタマイズ - 唯一無二の Vant スタイルを作る

🌈 テーマカスタマイズの世界へようこそ！

アプリに独自のビジュアルスタイルを持たせたいですか？Vant は強力で柔軟なテーマカスタマイズ機能を提供し、まるでカラーパレットのように思い通りの配色を作り上げられます！

こんなニーズにも対応できます：

🎯 ブランドカラーへの最適化
🌙 ダークモード対応
🎨 個性的なスタイル表現
📱 マルチテーマ切り替え

Vant ならすべて簡単に実現できます！

⚡ クイックスタート

🎯 方法1：CSS 変数の上書き（推奨）

最も簡単で直接的な方法です。服を着替えるように、手軽に切り替えできます！

css

/* グローバルスタイルファイルで */
:root {
  /* 🎨 メインカラー - アプリのブランド色 */
  --van-primary-color: #07c160;
  
  /* 🔴 危険色 - 警告や削除に使用 */
  --van-danger-color: #ee0a24;
  
  /* 🟠 警告色 - 注意喚起に使用 */
  --van-warning-color: #ff976a;
  
  /* ✅ 成功色 - 成功状態の表示に使用 */
  --van-success-color: #07c160;
  
  /* ℹ️ 情報色 - 一般の情報提示に使用 */
  --van-info-color: #1989fa;
}

✨ 即時反映：保存後、アプリに新しいテーマカラーが適用されます！

🎨 方法2：Less/Sass 変数のカスタマイズ

Less や Sass を使用している場合、より強力なカスタマイズが可能です：

less

// theme.less
@primary-color: #1890ff;
@success-color: #52c41a;
@warning-color: #faad14;
@danger-color: #f5222d;

// Vant のスタイルをインポート
@import '~vant/lib/index.less';

🌟 コアテーマ変数

🎨 カラースキーム

Vant のカラースキームは丁寧に設計されており、各色には明確な意味付けがあります：

css

:root {
  /* 🎯 メインカラー系 - ブランドの核となる色 */
  --van-primary-color: #1989fa;
  --van-primary-color-dark: #0960bd;
  --van-primary-color-light: #73b3fa;
  
  /* 🔴 危険カラー系 - エラーと警告 */
  --van-danger-color: #ee0a24;
  --van-danger-color-dark: #ad0e23;
  --van-danger-color-light: #f54e2e;
  
  /* 🟠 警告カラー系 - 注意が必要な情報 */
  --van-warning-color: #ff976a;
  --van-warning-color-dark: #ed6a0c;
  --van-warning-color-light: #ffad85;
  
  /* ✅ 成功カラー系 - 成功状態 */
  --van-success-color: #07c160;
  --van-success-color-dark: #059a4c;
  --van-success-color-light: #39d374;
  
  /* ℹ️ 情報カラー系 - 一般情報 */
  --van-info-color: #1989fa;
  --van-info-color-dark: #0960bd;
  --van-info-color-light: #73b3fa;
}

📐 サイズスケール

統一されたサイズ規格で、インターフェースの一貫性を高めます：

css

:root {
  /* 📏 基本サイズ */
  --van-base-font-size: 14px;
  --van-font-size-xs: 10px;
  --van-font-size-sm: 12px;
  --van-font-size-md: 14px;
  --van-font-size-lg: 16px;
  --van-font-size-xl: 18px;
  
  /* 📦 スペーシングスケール */
  --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-radius-sm: 2px;
  --van-radius-md: 4px;
  --van-radius-lg: 8px;
  --van-radius-max: 999px;
}

🌫️ グレースケール

緻密に調整されたグレースケールで、心地よい階調を演出します：

css

:root {
  /* 🖤 文字色 */
  --van-text-color: #323233;
  --van-text-color-2: #646566;
  --van-text-color-3: #969799;
  
  /* 🔘 枠線色 */
  --van-border-color: #ebedf0;
  --van-border-color-light: #f7f8fa;
  
  /* 🎨 背景色 */
  --van-background: #f7f8fa;
  --van-background-2: #fafafa;
}

🌙 ダークモード

🔧 ダークモードを有効化

Vant は完全なダークモード対応を内蔵しています。クラス名を追加するだけで有効化できます：

html

<!-- アプリ全体でダークモードを有効化 -->
<div class="van-theme-dark">
<!-- アプリのコンテンツ -->
</div>

🎨 ダークモード用変数

css

.van-theme-dark {
  /* 🌙 ダークモード専用カラー */
  --van-text-color: #f5f5f5;
  --van-text-color-2: #cccccc;
  --van-text-color-3: #999999;
  
  --van-background: #000000;
  --van-background-2: #1a1a1a;
  
  --van-border-color: #3a3a3c;
  --van-border-color-light: #2c2c2e;
}

🔄 テーマの動的切り替え

テーマ切り替え機能の実装：

javascript

// テーマ切り替えユーティリティ
class ThemeManager {
  constructor() {
    this.isDark = false;
    this.init();
  }
  
  init() {
    // 🔍 ローカルストレージのテーマ設定を確認
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
      this.enableDarkMode();
    }
  }
  
  // 🌙 ダークモードを有効化
  enableDarkMode() {
    document.documentElement.classList.add('van-theme-dark');
    this.isDark = true;
    localStorage.setItem('theme', 'dark');
  }
  
  // ☀️ ライトモードを有効化
  enableLightMode() {
    document.documentElement.classList.remove('van-theme-dark');
    this.isDark = false;
    localStorage.setItem('theme', 'light');
  }
  
  // 🔄 テーマ切り替え
  toggle() {
    if (this.isDark) {
      this.enableLightMode();
    } else {
      this.enableDarkMode();
    }
  }
}

// 使用例
const themeManager = new ThemeManager();

// ボタン押下でテーマを切り替え
document.getElementById('theme-toggle').addEventListener('click', () => {
  themeManager.toggle();
});

🎨 実際の適用シーン

🏢 企業ブランドのカスタマイズ

企業アプリ向けの専用テーマ：

css

/* 🏢 企業ブルーテーマ */
:root {
  --van-primary-color: #0052cc;
  --van-primary-color-dark: #003d99;
  --van-primary-color-light: #4285f4;
  
  /* 🎨 アクセントカラー */
  --van-success-color: #00875a;
  --van-warning-color: #ff8b00;
  --van-danger-color: #de350b;
  
  /* 📐 角丸の調整 - よりビジネスライクに */
  --van-radius-sm: 4px;
  --van-radius-md: 6px;
  --van-radius-lg: 8px;
}

🎮 ゲームスタイルのテーマ

ゲームアプリ向けのクールなテーマ：

css

/* 🎮 ゲームスタイルテーマ */
:root {
  --van-primary-color: #ff6b35;
  --van-primary-color-dark: #e55a2b;
  --van-primary-color-light: #ff8c69;
  
  /* ⚡ 高コントラスト配色 */
  --van-success-color: #00ff88;
  --van-warning-color: #ffdd00;
  --van-danger-color: #ff3366;
  
  /* 🔥 より大きな角丸 */
  --van-radius-md: 12px;
  --van-radius-lg: 16px;
  
  /* 💫 特殊効果 */
  --van-button-primary-background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
}

🌸 ピンクガーリースタイル

温かく可愛いピンクテーマ：

css

/* 🌸 ピンクガーリーテーマ */
:root {
  --van-primary-color: #ff69b4;
  --van-primary-color-dark: #e91e63;
  --van-primary-color-light: #ffb3d9;
  
  /* 💕 ウォームな配色 */
  --van-success-color: #ff9999;
  --van-warning-color: #ffcc99;
  --van-danger-color: #ff6666;
  
  /* 🎀 ソフトな背景 */
  --van-background: #fff5f8;
  --van-background-2: #ffe4e9;
}

🛠️ 上級カスタマイズのコツ

🎨 コンポーネント単位のカスタマイズ

特定コンポーネントを詳細にカスタマイズ：

css

/* 🔘 ボタンコンポーネントのカスタマイズ */
.van-button--primary {
  /* 🌈 グラデーション背景 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  
  /* ✨ シャドウ効果 */
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  
  /* 🎭 ホバー効果 */
  transition: all 0.3s ease;
}

.van-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

/* 📱 ナビゲーションバーのカスタマイズ */
.van-nav-bar {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  
  /* 🎨 文字色 */
  --van-nav-bar-title-text-color: #ffffff;
  --van-nav-bar-icon-color: #ffffff;
}

🌐 レスポンシブテーマ

画面サイズに応じてテーマを調整：

css

/* 📱 モバイル向け最適化 */
@media (max-width: 768px) {
  :root {
    --van-font-size-md: 16px;
    --van-padding-md: 12px;
    --van-radius-md: 6px;
  }
}

/* 💻 デスクトップ向け最適化 */
@media (min-width: 1024px) {
  :root {
    --van-font-size-md: 14px;
    --van-padding-md: 20px;
    --van-radius-md: 8px;
  }
}

🎯 テーマ変数の動的計算

CSS 関数でスマートなテーマを作成：

css

:root {
  /* 🎨 基本色相 */
  --base-hue: 210;
  
  /* 🌈 色の動的生成 */
  --van-primary-color: hsl(var(--base-hue), 100%, 50%);
  --van-primary-color-dark: hsl(var(--base-hue), 100%, 40%);
  --van-primary-color-light: hsl(var(--base-hue), 100%, 70%);
  
  /* 📐 動的サイズ */
  --scale-factor: 1;
  --van-font-size-md: calc(14px * var(--scale-factor));
  --van-padding-md: calc(16px * var(--scale-factor));
}

/* 🔧 JavaScript による制御 */
/* 
document.documentElement.style.setProperty('--base-hue', '120'); // グリーンテーマ
document.documentElement.style.setProperty('--scale-factor', '1.2'); // 20% 拡大
*/

📚 変数一覧

🎨 カラー変数

css

:root {
  /* メインカラー系 */
  --van-primary-color: #1989fa;
  --van-success-color: #07c160;
  --van-warning-color: #ff976a;
  --van-danger-color: #ee0a24;
  --van-info-color: #1989fa;
  
  /* 文字色 */
  --van-text-color: #323233;
  --van-text-color-2: #646566;
  --van-text-color-3: #969799;
  --van-text-link-color: #576b95;
  
  /* 枠線色 */
  --van-border-color: #ebedf0;
  --van-active-color: #f2f3f5;
  --van-active-opacity: 0.6;
  
  /* 背景色 */
  --van-background: #f7f8fa;
  --van-background-2: #fafafa;
}

📐 サイズ変数

css

:root {
  /* フォントサイズ */
  --van-font-size-xs: 10px;
  --van-font-size-sm: 12px;
  --van-font-size-md: 14px;
  --van-font-size-lg: 16px;
  --van-font-size-xl: 18px;
  
  /* フォントウェイト */
  --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-padding-base: 4px;
  --van-padding-xs: 8px;
  --van-padding-sm: 12px;
  --van-padding-md: 16px;
  --van-padding-lg: 24px;
  --van-padding-xl: 32px;
  
  /* 角丸 */
  --van-radius-sm: 2px;
  --van-radius-md: 4px;
  --van-radius-lg: 8px;
  --van-radius-max: 999px;
}

🔧 ビルドツール統合

📦 Webpack 設定

javascript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: {
                  // 🎨 ビルド時にテーマ変数を注入
                  'primary-color': '#1890ff',
                  'success-color': '#52c41a',
                  'warning-color': '#faad14',
                  'error-color': '#f5222d',
                },
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
};

⚡ Vite 設定

javascript

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          // 🎨 Vite のテーマ変数設定
          'primary-color': '#1890ff',
          'success-color': '#52c41a',
        },
        javascriptEnabled: true,
      },
    },
  },
});

🎯 ベストプラクティス

✅ 推奨事項

🎨 色の一貫性を保つ

css

/* ✅ 推奨：意味のある色を使用 */
--van-primary-color: #1989fa;
--van-primary-color-dark: #0960bd;
--van-primary-color-light: #73b3fa;

📐 デザイン規範に従う

css

/* ✅ 推奨：8px グリッドシステムを使用 */
--van-padding-sm: 8px;
--van-padding-md: 16px;
--van-padding-lg: 24px;

🔄 テーマ切り替えに対応

css

/* ✅ 推奨：ダークモード用の変数を準備 */
.van-theme-dark {
  --van-text-color: #ffffff;
  --van-background: #000000;
}

❌ 避けるべきこと

🚫 色をハードコードする

css

/* ❌ 非推奨 */
.my-button {
  background-color: #1989fa; /* 应该使用变量 */
}

/* ✅ 推奨 */
.my-button {
  background-color: var(--van-primary-color);
}

🚫 過度なカスタマイズ

css

/* ❌ 非推奨：変数を過度に変更 */
:root {
  --van-font-size-xs: 15px; /* 破坏了尺寸体系 */
  --van-padding-sm: 13px;   /* 不符合 8px 网格 */
}

🛠️ デバッグツール

🔍 テーマ変数ビューア

現在のテーマ変数を確認するための簡単なツール：

javascript

// テーマデバッグツール
function showThemeVariables() {
  const root = document.documentElement;
  const computedStyle = getComputedStyle(root);
  
  const themeVars = [
    '--van-primary-color',
    '--van-success-color',
    '--van-warning-color',
    '--van-danger-color',
    '--van-text-color',
    '--van-background',
  ];
  
  console.log('🎨 現在のテーマ変数：');
  themeVars.forEach(varName => {
    const value = computedStyle.getPropertyValue(varName);
    console.log(`${varName}: ${value}`);
  });
}

// コンソールで呼び出す
showThemeVariables();

🎨 リアルタイムテーマエディタ

html

<!-- シンプルなテーマエディタ -->
<div class="theme-editor">
  <h3>🎨 リアルタイムテーマエディタ</h3>
  
  <label>
    メインカラー：
    <input type="color" id="primary-color" value="#1989fa">
  </label>
  
  <label>
    成功色：
    <input type="color" id="success-color" value="#07c160">
  </label>
  
  <label>
    警告色：
    <input type="color" id="warning-color" value="#ff976a">
  </label>
</div>

<script>
document.getElementById('primary-color').addEventListener('input', (e) => {
  document.documentElement.style.setProperty('--van-primary-color', e.target.value);
});

document.getElementById('success-color').addEventListener('input', (e) => {
  document.documentElement.style.setProperty('--van-success-color', e.target.value);
});

document.getElementById('warning-color').addEventListener('input', (e) => {
  document.documentElement.style.setProperty('--van-warning-color', e.target.value);
});
</script>

🎉 まとめ

Vant のテーマカスタマイズ機能によって、次のことが可能になります：

🎨 簡単なカスタマイズ - CSS 変数で素早く調整
🌙 ダークモード - 完全対応を内蔵
🔄 動的切り替え - 実行時にテーマ変更
📱 レスポンシブ - 画面サイズに適応
🛠️ ツールフレンドリー - 各種ビルドツールと統合

さあ、独自のテーマづくりを始めましょう！あなたのアプリを際立たせましょう！

📚 関連コンテンツ

🎨 デザインとスタイル

デザインリソース - Sketch と Axure のリソース
スタイルガイド - Vant のスタイル規範
CSS 変数 - 完全な CSS 変数一覧
ダークモード - 実装ガイド

🔧 上級機能

按需導入 - バンドルサイズの最適化
国際化 - 多言語対応
カスタムコンポーネント - 独自コンポーネントの作成
プラグイン開発 - Vant プラグインの開発

🛠️ 開発ツール

ビルド設定 - 各種ビルドツールの設定
開発環境 - ローカル開発環境の構築
デバッグのコツ - テーマデバッグ手法
パフォーマンス最適化 - テーマの性能改善

💡 実践例

企業向けアプリ - 企業テーマのカスタマイズ事例
モバイル適応 - モバイルテーマ適応
マルチブランド対応 - 複数ブランドのテーマ切り替え
デザインシステム - 完全なデザインシステムの構築

📚 関連ドキュメント

🎨 スタイルとデザイン

スタイルガイド - Vant のベストプラクティス
デザインガイド - デザイン原則とビジュアル規範
ConfigProvider グローバル設定 - テーマの全体設定

🚀 クイックスタート

クイックスタート - 初期化と基本設定
高度な使い方 - 上級テクニック
よくある質問 - テーマに関する Q&A

🔧 開発ツール

国際化 - 多言語テーマ適応
遅延読み込み - パフォーマンス関連
移行ガイド V3→V4 - バージョン移行の適応
移行ガイド V2→V3 - 履歴バージョン移行

🎯 コンポーネントのテーマカスタマイズ

Button ボタン - ボタンのテーマカスタマイズ
Icon アイコン - アイコンテーマとカスタムアイコン
NavBar ナビバー - ナビバーのテーマ
Tabbar タブバー - ボトムタブバーのテーマ
Dialog ダイアログ - ダイアログのテーマ
Toast トースト - トーストのテーマ
Loading ローディング - ローディングのテーマ

🎨 ビジュアルコンポーネント

Badge バッジ - バッジのテーマ
Tag タグ - タグのテーマ
Progress 進捗バー - 進捗バーのテーマ
Circle 円形進捗 - 円形進捗のテーマ
Divider 仕切り線 - 仕切り線のテーマ
Empty 空状態 - 空状態ページのテーマ

🔄 アニメーションとインタラクション

Transition アニメーション - アニメーションのテーマ
Overlay オーバーレイ - オーバーレイのテーマ
PullRefresh プルリフレッシュ - プルリフレッシュのテーマ
Swipe スワイプ - スワイプのテーマ

🛠️ Composables API

vant/use イントロ - Composables API 概観
useWindowSize - ウィンドウサイズ対応
useToggle - テーマ切り替え状態管理
useEventListener - イベント監視

📱 モバイル適応

Watermark 透かし - 透かしのテーマ
FloatingBubble フローティングバブル - フローティングコンポーネントのテーマ
FloatingPanel フローティングパネル - フローティングパネルのテーマ
BackTop トップへ戻る - トップへ戻るボタンのテーマ

📋 フォームコンポーネント

Form フォーム - フォームのテーマ
Field 入力欄 - 入力欄のテーマ
Picker ピッカー - ピッカーのテーマ
DatePicker 日付選択 - 日付選択のテーマ
Switch スイッチ - スイッチのテーマ
Checkbox チェックボックス - チェックボックスのテーマ
Radio ラジオボタン - ラジオボタンのテーマ

📖 変更履歴

変更履歴 - テーマ関連の更新記録
V4 リリースノート - V4 の新機能
貢献ガイド - テーマ機能への参加方法

🎨 テーマカスタマイズ - 唯一無二の Vant スタイルを作る ​

🌈 テーマカスタマイズの世界へようこそ！ ​

⚡ クイックスタート ​

🎯 方法1：CSS 変数の上書き（推奨） ​

🎨 方法2：Less/Sass 変数のカスタマイズ ​

🌟 コアテーマ変数 ​

🎨 カラースキーム ​

📐 サイズスケール ​

🌫️ グレースケール ​

🌙 ダークモード ​

🔧 ダークモードを有効化 ​

🎨 ダークモード用変数 ​

🔄 テーマの動的切り替え ​

🎨 実際の適用シーン ​

🏢 企業ブランドのカスタマイズ ​

🎮 ゲームスタイルのテーマ ​

🌸 ピンクガーリースタイル ​

🛠️ 上級カスタマイズのコツ ​

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

🌐 レスポンシブテーマ ​

🎯 テーマ変数の動的計算 ​

📚 変数一覧 ​

🎨 カラー変数 ​

📐 サイズ変数 ​

🔧 ビルドツール統合 ​

📦 Webpack 設定 ​

⚡ Vite 設定 ​

🎯 ベストプラクティス ​

✅ 推奨事項 ​

❌ 避けるべきこと ​

🛠️ デバッグツール ​

🔍 テーマ変数ビューア ​

🎨 リアルタイムテーマエディタ ​

🎉 まとめ ​

📚 関連コンテンツ ​

🎨 デザインとスタイル ​

🔧 上級機能 ​

🛠️ 開発ツール ​

💡 実践例 ​

📚 関連ドキュメント ​

🎨 スタイルとデザイン ​

🚀 クイックスタート ​

🔧 開発ツール ​

🎯 コンポーネントのテーマカスタマイズ ​

🎨 ビジュアルコンポーネント ​

🔄 アニメーションとインタラクション ​

🛠️ Composables API ​

📱 モバイル適応 ​

📋 フォームコンポーネント ​

📖 変更履歴 ​

🎨 テーマカスタマイズ - 唯一無二の Vant スタイルを作る

🌈 テーマカスタマイズの世界へようこそ！

⚡ クイックスタート

🎯 方法1：CSS 変数の上書き（推奨）

🎨 方法2：Less/Sass 変数のカスタマイズ

🌟 コアテーマ変数

🎨 カラースキーム

📐 サイズスケール

🌫️ グレースケール

🌙 ダークモード

🔧 ダークモードを有効化

🎨 ダークモード用変数

🔄 テーマの動的切り替え

🎨 実際の適用シーン

🏢 企業ブランドのカスタマイズ

🎮 ゲームスタイルのテーマ

🌸 ピンクガーリースタイル

🛠️ 上級カスタマイズのコツ

🎨 コンポーネント単位のカスタマイズ

🌐 レスポンシブテーマ

🎯 テーマ変数の動的計算

📚 変数一覧

🎨 カラー変数

📐 サイズ変数

🔧 ビルドツール統合

📦 Webpack 設定

⚡ Vite 設定

🎯 ベストプラクティス

✅ 推奨事項

❌ 避けるべきこと

🛠️ デバッグツール

🔍 テーマ変数ビューア

🎨 リアルタイムテーマエディタ

🎉 まとめ

📚 関連コンテンツ

🎨 デザインとスタイル

🔧 上級機能

🛠️ 開発ツール

💡 実践例

📚 関連ドキュメント

🎨 スタイルとデザイン

🚀 クイックスタート

🔧 開発ツール

🎯 コンポーネントのテーマカスタマイズ

🎨 ビジュアルコンポーネント

🔄 アニメーションとインタラクション

🛠️ Composables API

📱 モバイル適応

📋 フォームコンポーネント

📖 変更履歴