テーマ・カラーの変更

テーマ・カラーのカスタマイズは、UIライブラリのデフォルト色をプロジェクトのブランドカラーやデザインシステムに合わせて変更する設定。全コンポーネントに統一感を持たせたい場面や、ダークモードに対応したい場面で必要になる。

Provider コンポーネントにテーマオブジェクトを渡すことで全体に適用する方式が主流。shadcn/ui は CSS 変数ベースのため、クラス切り替えだけでダークモードに対応できる。

主なバリエーション

•プライマリーカラーの変更
•ダークモード／ライトモードの切り替え
•カラーパレットの定義（primary / secondary / error 等）
•個別コンポーネントの色オーバーライド
•CSS変数によるテーマトークンの上書き
•テーマのネスト（部分的なテーマ適用）

ライブラリ横断比較

機能	Mantine	Ant Design	shadcn/ui	MUI
プライマリーカラーの変更	○ primaryColor	○ token	○ CSS変数	○ palette.main
ダークモード切り替え	○ ColorSchemeScript	○ darkAlgorithm	○ next-themes	○ palette.mode
カラーパレット定義	○ colors[10段階]	○ token	○ CSS変数	○ palette.*
個別コンポーネントの色オーバーライド	○ color prop	○ components.*	○ className	○ styleOverrides
CSS変数によるテーマトークン	○ 自動生成	△ v5以降	○ ネイティブ	△ CSSVarsProvider
テーマのネスト（部分適用）	○ Provider入れ子	○ ConfigProvider入れ子	△ CSSスコープ	○ ThemeProvider入れ子

○ = 対応　△ = 部分対応・制限あり　× = 非対応

ライブラリ別コード例

各ライブラリでテーマ・カラーを変更する際の設定部分を抜粋しています。動くデモは各比較ページでご確認ください。

Mantine

// MantineProvider でテーマを定義
import { MantineProvider, createTheme } from '@mantine/core';

const theme = createTheme({
  primaryColor: 'violet',   // 組み込みカラー名を指定
  colors: {
    // カスタムカラーパレットを追加（10段階）
    brand: [
      '#f0f4ff', '#dce6ff', '#b9ccff', '#93afff',
      '#6b8ffe', '#4b6ef5', '#3b5be8', '#2e4bd6',
      '#2340c4', '#1534b2',
    ],
  },
  primaryShade: { light: 6, dark: 8 },
});

export default function App() {
  return (
    <MantineProvider theme={theme}>
      <YourApp />
    </MantineProvider>
  );
}

// ダークモード切り替え
import { useMantineColorScheme } from '@mantine/core';
function ToggleButton() {
  const { toggleColorScheme } = useMantineColorScheme();
  return <button onClick={toggleColorScheme}>テーマ切り替え</button>;
}

→ ボタンのデモの動くデモを見る → バッジ・タグのデモの動くデモを見る → モーダルのデモの動くデモを見る

Ant Design

// ConfigProvider でトークンをカスタマイズ
import { ConfigProvider, theme } from 'antd';

export default function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#6b8ffe',   // プライマリーカラー
          colorSuccess: '#52c41a',
          colorWarning: '#faad14',
          colorError: '#ff4d4f',
          borderRadius: 8,
        },
        // コンポーネント個別オーバーライド
        components: {
          Button: {
            colorPrimary: '#4b6ef5',
            algorithm: true,  // トークンから派生色を自動計算
          },
        },
      }}
    >
      <YourApp />
    </ConfigProvider>
  );
}

// ダークモード（algorithm で切り替え）
<ConfigProvider
  theme={{ algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm }}
>

→ ボタンのデモの動くデモを見る → バッジ・タグのデモの動くデモを見る → モーダルのデモの動くデモを見る

shadcn/ui

/* globals.css — CSS変数でテーマを定義 */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;      /* プライマリーカラー (HSL) */
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --destructive: 0 84.2% 60.2%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    /* ... ダーク用の値 */
  }
}

// ダークモード切り替え（next-themes）
import { ThemeProvider } from 'next-themes';
export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

→ ボタンのデモの動くデモを見る → バッジ・タグのデモの動くデモを見る → モーダルのデモの動くデモを見る

MUI

// createTheme でテーマを定義
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme({
  palette: {
    primary: {
      main: '#6b8ffe',       // プライマリーカラー
      light: '#93afff',
      dark: '#3b5be8',
      contrastText: '#fff',
    },
    secondary: { main: '#f50057' },
    mode: 'light',           // 'dark' でダークモード
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: { textTransform: 'none' },  // 大文字を無効化
      },
    },
  },
});

// ダークモード切り替え（state で mode を変更）
const [mode, setMode] = useState<'light' | 'dark'>('light');
const theme = useMemo(
  () => createTheme({ palette: { mode } }),
  [mode]
);

→ ボタンのデモの動くデモを見る → バッジ・タグのデモの動くデモを見る → モーダルのデモの動くデモを見る

まとめ・選び方のヒント

•プライマリーカラーだけ変えたい → MUI（palette.primary.main 一か所で変更）・Mantine（primaryColor で組み込みカラー名を指定）
•ダークモードを簡単に実装したい → shadcn/ui（CSS変数＋next-themes でクラス切り替えのみ）・Mantine（ColorSchemeScript でフラッシュ防止まで対応）
•設定オブジェクトでトークンを細かく管理したい → Ant Design（token で全デザイントークンを一元管理）・MUI（palette ＋ components.MuiXxx.styleOverrides）
•CSS変数ベースで柔軟にカスタマイズしたい → shadcn/ui（globals.css の CSS 変数を直接書き換え）
•特定の領域だけ別テーマを適用したい → Mantine・MUI・Ant Design（Provider 入れ子で部分適用可能）

他の逆引きリファレンス

このサイトについて使用ライブラリ一覧

Zenn ☕ Buy Me a Coffee