T-003 Color Palette Switch | Vibe UI Pattern Library

ライブデモ Live Demo

ボタンでカラーパレットを切り替えると、背景、テキスト、ボタンの色が滑らかに変化します。複数のプリセットから選択できます。

Switch color palettes with buttons to smoothly change background, text, and button colors. Choose from multiple presets.

Color Palette Preview

This section demonstrates the active color palette.

パレット選択 Palette Selection

AI向け説明 AI Description

`T-003` はカラーパレットをオブジェクトで管理し、ボタンクリックで `style.setProperty()` を使ってCSS変数を更新します。`transition` で色の変化を滑らかにします。

`T-003` stores color palettes in objects and updates CSS variables via `style.setProperty()` on button clicks. `transition` smooths color changes.

調整可能パラメータ Adjustable Parameters

palette colors — プリセットカラーの追加・変更 add or modify preset colors
transition duration — 色変化のアニメーション時間 color transition duration
localStorage — 選択を保存して次回読み込み時に復元 save selection and restore on reload
system preference — OSのダークモード設定を検出 detect OS dark mode preference

実装 Implementation

HTML + CSS + JS

<div class="palette-preview" data-preview>
  <h3>Content</h3>
  <button>Action</button>
</div>
<button data-palette="blue">Blue</button>

<style>
:root {
  --palette-primary: #5c6ac4;
  --palette-bg: #f5f7ff;
  --palette-text: #1d2242;
}

.palette-preview {
  background: var(--palette-bg);
  color: var(--palette-text);
  transition: background 0.4s ease, color 0.4s ease;
}
</style>

<script>
const palettes = {
  blue: {
    primary: "#5c6ac4",
    bg: "#f5f7ff",
    text: "#1d2242"
  }
};

function setPalette(name) {
  const palette = palettes[name];
  document.documentElement.style.setProperty("--palette-primary", palette.primary);
  document.documentElement.style.setProperty("--palette-bg", palette.bg);
  document.documentElement.style.setProperty("--palette-text", palette.text);
}
</script>

React (JSX + CSS)

// react/T-003.jsx
import { useState } from "react";
import "./T-003.css";

const palettes = {
  blue: { primary: "#5c6ac4", bg: "#f5f7ff", text: "#1d2242" },
  purple: { primary: "#764ba2", bg: "#f3e8ff", text: "#2d1b3d" }
};

export default function ColorPaletteSwitch() {
  const [activePalette, setActivePalette] = useState("blue");
  const palette = palettes[activePalette];

  return (
    <div
      className="palette-preview"
      style={{
        ["--palette-primary"]: palette.primary,
        ["--palette-bg"]: palette.bg,
        ["--palette-text"]: palette.text
      }}
    >
      <h3>Content</h3>
      <button onClick={() => setActivePalette("purple")}>Switch</button>
    </div>
  );
}

/* react/T-003.css */
.palette-preview {
  background: var(--palette-bg);
  color: var(--palette-text);
  transition: background 0.4s ease, color 0.4s ease;
}

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

以下のUIパターンを実装してください。

- パターンID: T-003
- パターン名: カラーパレット切り替え
- 参照URL: https://devsnips.dev/animations/T-003.html
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮（キーボード操作、スクリーンリーダー）
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: T-003
- Pattern Name: Color Palette Switch
- Reference URL: https://devsnips.dev/animations/T-003.html
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]

注意とバリエーション Notes & Variations

`localStorage` でユーザーの選択を保存し、ページ読み込み時に復元してください。アクセシビリティのため、コントラスト比がWCAG基準を満たすパレットのみを提供してください。

Save user selection in `localStorage` and restore on page load. Ensure all palettes meet WCAG contrast requirements for accessibility.