How to create a color palette switch カラーパレット切り替えの作り方
Theme system that switches color palettes with buttons. Choose from multiple presets. ボタンでカラーパレットを切り替えるテーマシステム。複数のプリセットから選択できます。
ライブデモ Live Demo
Color Palette Preview
This section demonstrates the active color palette.
概要・用途・特徴Overview, Usage & Features
何ができるかWhat it does
Theme system that switches color palettes with buttons. Choose from multiple presets.
ボタンでカラーパレットを切り替えるテーマシステム。複数のプリセットから選択できます。
どこで使うかWhere to use
dark mode support, user preferences, seasonal themes, brand customization
ポートフォリオサイト、ブランドカスタマイズ、アクセシビリティ設定、シーズナルテーマ
特徴Key features
Theme system with multiple preset color palettes selectable via buttons. CSS custom properties updated at :root level for instant global effect. Persists selection in localStorage. Supports detecting OS dark mode preference as default.
ボタンで選択できる複数プリセットカラーパレットのテーマシステム。:rootレベルでのCSSカスタムプロパティの即座のグローバル効果のための更新。localStorage に選択を保存。デフォルトとしてOSダークモード設定の検出をサポート。
調整可能パラメータ Adjustable Parameters
| Parameter | Default | Description |
|---|---|---|
palette colors | — | add or modify preset colors |
transition duration | — | color transition duration |
localStorage | — | save selection and restore on reload |
system preference | — | detect OS dark mode preference |
実装コード Implementation Code
// 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;
}import { useState } from "react";
import "./T-003.css";
const palettes = {
blue: { primary: "#5c6ac4", secondary: "#22d3ee", accent: "#ffa7c4", bg: "#f5f7ff", text: "#1d2242" },
purple: { primary: "#764ba2", secondary: "#a78bfa", accent: "#f472b6", bg: "#f3e8ff", text: "#2d1b3d" },
green: { primary: "#10b981", secondary: "#34d399", accent: "#6ee7b7", bg: "#ecfdf5", text: "#064e3b" },
orange: { primary: "#f59e0b", secondary: "#fbbf24", accent: "#fcd34d", bg: "#fffbeb", text: "#78350f" }
};
export default function ColorPaletteSwitch() {
const [activePalette, setActivePalette] = useState("blue");
const palette = palettes[activePalette];
return (
<div>
<div
className="palette-preview"
style={{
["--palette-primary"]: palette.primary,
["--palette-secondary"]: palette.secondary,
["--palette-accent"]: palette.accent,
["--palette-bg"]: palette.bg,
["--palette-text"]: palette.text
}}
>
<h3>Color Palette Preview</h3>
<p>This section demonstrates the active color palette.</p>
<button>Action Button</button>
</div>
<div className="palette-switcher">
{Object.keys(palettes).map((name) => (
<button
key={name}
className={`palette-btn ${activePalette === name ? "active" : ""}`}
onClick={() => setActivePalette(name)}
>
{name.charAt(0).toUpperCase() + name.slice(1)}
</button>
))}
</div>
</div>
);
}/* Palette preview styles are now in global.css */仕組みとカスタマイズHow It Works & Customization
仕組みHow it works
Each palette is a JavaScript object mapping CSS variable names to values. Clicking a palette button calls a function that updates all CSS custom properties on document.documentElement (the :root). The active class on palette buttons is updated visually. The selected palette name is saved to localStorage and restored on page load.
各パレットはCSS変数名を値にマッピングするJavaScriptオブジェクトです。パレットボタンのクリックがdocument.documentElement（:root）の全CSSカスタムプロパティを更新する関数を呼び出し。パレットボタンのアクティブクラスが視覚的に更新。選択したパレット名がlocalStorageに保存されてページロード時に復元。
カスタマイズ方法Customization
Add a custom palette input that accepts a brand color and auto-generates complementary shades. Animate the palette transition using CSS transition on the affected properties. Add a contrast ratio checker to ensure all palettes meet WCAG AA.
ブランドカラーを受け入れて補完的なシェードを自動生成するカスタムパレット入力を追加。影響を受けるプロパティのCSSトランジションを使用してパレットトランジションをアニメーション。全パレットがWCAG AAを満たすことを確認するコントラスト比チェッカーを追加。
注意点Caveats
Always test all palette combinations for sufficient color contrast (WCAG AA minimum 4.5:1 for text). Ensure interactive elements (buttons, links) remain clearly distinguishable across all palettes. Announce palette change to screen readers via aria-live.
常に全パレットの組み合わせで十分なカラーコントラスト（テキストのWCAG AA最低4.5:1）をテストしてください。全パレットでインタラクティブ要素（ボタン、リンク）が明確に区別可能であることを確認してください。aria-liveでスクリーンリーダーにパレット変更をアナウンスしてください。
よくある質問 Frequently Asked Questions
How to customize the color palette switch? Color Palette Switchをカスタマイズするには？
Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.
コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。
How to use the color palette switch in React? ReactでColor Palette Switchを使うには？
Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.
提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。
What are the performance implications of color palette switch? Color Palette Switchのパフォーマンスへの影響は？
This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.
この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。
AIへの指示テンプレート AI Prompt Template
以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.