Open2

【UI/UXデザイン】shadcn/ui テーマカラー ColorPallet設定について📝

React
TypeScript
Tailwind CSS
shadcn/ui
UI/UX
まさぴょん🐱まさぴょん🐱

ライトモードとダークモードの色の設定📝

shadcn-uiとTailwindCSSを使ってライトモードとダークモードの色を決めるには、以下の手順で進めると効果的です。

1. TailwindCSSの設定

TailwindCSSでは、tailwind.config.jsでダークモードを有効化し、カスタムカラーを定義します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class', // ダークモードをclassベースで切り替え
  theme: {
    extend: {
      colors: {
        // ライトモードとダークモード用のカスタムカラー
        primary: {
          light: '#3b82f6', // ライトモードのプライマリカラー（例: 青）
          dark: '#60a5fa',  // ダークモードのプライマリカラー（例: 明るい青）
        },
        background: {
          light: '#ffffff', // ライトモードの背景
          dark: '#1f2937',  // ダークモードの背景
        },
        text: {
          light: '#1f2937', // ライトモードのテキスト
          dark: '#e5e7eb',  // ダークモードのテキスト
        },
      },
    },
  },
  plugins: [],
};
  • darkMode: 'class'を設定することで、HTMLのclass="dark"でダークモードを切り替え可能。
  • colorsでライト/ダーク用のカスタムカラーを定義。

2. CSSでのダークモード対応

shadcn-uiのコンポーネントはTailwindCSSベースなので、グローバルCSSでダークモードのスタイルを適用します。app/globals.cssなどに以下を追加：

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 255 255 255; /* ライトモードの背景（RGB） */
  --foreground: 31 41 55; /* ライトモードのテキスト（RGB） */
}

.dark {
  --background: 31 41 55; /* ダークモードの背景 */
  --foreground: 229 231 235; /* ダークモードのテキスト */
}

/* shadcn-uiコンポーネントのカスタマイズ例 */
.button {
  @apply bg-primary-light text-text-light;
}

.dark .button {
  @apply bg-primary-dark text-text-dark;
}
  • :rootでライトモードのデフォルトカラーを定義。
  • .darkクラスでダークモードのカラーを上書き。
  • shadcn-uiのコンポーネント（例: ボタン）にカスタムカラーを適用。

3. shadcn-uiのテーマ統合

shadcn-uiはTailwindCSSと相性が良いですが、カスタムテーマを適用するには、コンポーネントのクラスを調整します。例えば、ボタンコンポーネントを以下のようにカスタマイズ：

// components/ui/button.jsx
import { cn } from "@/lib/utils";

export function Button({ children, className, ...props }) {
  return (
    <button
      className={cn(
        "bg-primary-light text-text-light dark:bg-primary-dark dark:text-text-dark",
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
}
  • cnユーティリティでクラスを動的に結合。
  • dark:プレフィックスでダークモード用のスタイルを指定。

4. ダークモードの切り替え実装

ダークモードをユーザーが切り替えられるように、JavaScriptでdarkクラスをトグルします。例として、Next.jsでの実装：

// app/page.jsx
'use client';

import { useEffect, useState } from 'react';

export default function Home() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    if (isDark) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDark]);

  return (
    <div className="bg-background-light dark:bg-background-dark">
      <button
        onClick={() => setIsDark(!isDark)}
        className="bg-primary-light text-text-light dark:bg-primary-dark dark:text-text-dark"
      >
        テーマ切り替え
      </button>
      <h1 className="text-text-light dark:text-text-dark">こんにちは！</h1>
    </div>
  );
}
  • useEffectでdarkクラスをHTML要素に追加/削除。
  • コンポーネントにライト/ダーク用のTailwindクラスを適用。

5. カラーの選び方（ベストプラクティス）

  • コントラスト：WCAGガイドラインに基づき、テキストと背景のコントラスト比を4.5:1以上に。
    • 例: ライトモード #1f2937（濃いグレー）と#ffffff（白）は良好。
    • ダークモード #e5e7eb（薄いグレー）と#1f2937（濃いグレー）も良好。
  • ブランドカラー：プライマリカラー（例: 青）はライト/ダークでトーンを調整（例: #3b82f6 → #60a5fa）。
  • ツール活用：

6. テストと微調整

  • ブラウザのデベロッパーツールでライト/ダークモードを切り替えて確認。
  • ユーザビリティを考慮し、過度な色の変化を避ける（例: 派手すぎる蛍光色はNG）。
  • shadcn-uiのコンポーネント（Button, Card, Inputなど）を一通りチェックし、テーマが一貫しているか確認。

まとめ

  1. tailwind.config.jsでカスタムカラーを定義。
  2. グローバルCSSでライト/ダークモードの変数を設定。
  3. shadcn-uiコンポーネントにdark:プレフィックスでスタイル適用。
  4. テーマ切り替えロジックをJavaScriptで実装。
  5. コントラストやブランドに基づいたカラーを選ぶ。