テーマカスタマイズガイド

クイックスタート

CSS変数をオーバーライドするだけで、簡単にテーマをカスタマイズできます。

<!DOCTYPE html>
<html lang="ja" data-theme="light">
<head>
    <link rel="stylesheet" href="dist/asagiri.min.css">
    <style>
        /* カスタムテーマ */
        :root,
        [data-theme="light"] {
            --color-primary: #8b5cf6;      /* 紫色をプライマリカラーに */
            --color-secondary: #ec4899;    /* ピンクをセカンダリに */
            --border-radius: 1rem;         /* 角を丸く */
        }

        [data-theme="dark"] {
            --color-primary: #a78bfa;
            --color-secondary: #f472b6;
            --color-bg: #1a1a2e;
            --color-box: #16213e;
        }
    </style>
</head>
<body>
    <!-- ここにコンテンツ -->
</body>
</html>

これだけ！ CSS変数を変更するだけで、すべてのコンポーネントに反映されます。

利用可能なCSS変数一覧

カラー変数

--color-primary

プライマリカラー

--color-secondary

セカンダリカラー

--color-success

成功

--color-danger

危険・エラー

--color-warning

警告

--color-info

情報

--color-bg

背景色

--color-box

サーフェス

Text

--color-text

テキスト色

サイズ・スペーシング変数

--border-radius: 0.375rem;      /* ボーダーの丸み */
--spacing-1: 0.25rem;           /* 4px */
--spacing-2: 0.5rem;            /* 8px */
--spacing-3: 0.75rem;           /* 12px */
--spacing-4: 1rem;              /* 16px */
--spacing-5: 1.25rem;           /* 20px */
--spacing-6: 1.5rem;            /* 24px */
--spacing-8: 2rem;              /* 32px */
--spacing-10: 2.5rem;           /* 40px */
--spacing-12: 3rem;             /* 48px */

--font-size-xs: 0.75rem;        /* 12px */
--font-size-sm: 0.875rem;       /* 14px */
--font-size-base: 1rem;         /* 16px */
--font-size-lg: 1.125rem;       /* 18px */
--font-size-xl: 1.25rem;        /* 20px */
--font-size-2xl: 1.5rem;        /* 24px */
--font-size-3xl: 1.875rem;      /* 30px */
--font-size-4xl: 2.25rem;       /* 36px */

プリセットテーマ

以下のテーマをコピーして、すぐに使えます。

ピンクテーマ

バッジ

:root {
    --color-primary: #ec4899;
    --color-secondary: #f472b6;
    --color-success: #a855f7;
    --color-info: #f9a8d4;
}

🌿 グリーンテーマ

バッジ

:root {
    --color-primary: #10b981;
    --color-secondary: #34d399;
    --color-success: #059669;
    --color-info: #6ee7b7;
}

🔥 オレンジテーマ

バッジ

:root {
    --color-primary: #f97316;
    --color-secondary: #fb923c;
    --color-warning: #fdba74;
    --color-info: #fbbf24;
}

🌌 ダークパープルテーマ

バッジ

:root {
    --color-primary: #8b5cf6;
    --color-secondary: #a78bfa;
    --color-success: #c084fc;
    --color-info: #e9d5ff;
}

[data-theme="dark"] {
    --color-bg: #1a1a2e;
    --color-box: #16213e;
    --color-text: #f1f5f9;
}

🏢 企業ブランドカラーの適用

既存のブランドカラーをAsagiriに適用する方法

<style>
/* 例: 自社のブランドカラーを使用 */
:root {
    /* ブランドカラー */
    --brand-primary: #your-brand-color;
    --brand-secondary: #your-secondary-color;

    /* Asagiriの変数にマッピング */
    --color-primary: var(--brand-primary);
    --color-secondary: var(--brand-secondary);

    /* プライマリカラーから派生色を自動生成（オプション） */
    --color-primary-light: color-mix(in srgb, var(--color-primary) 80%, white);
    --color-primary-dark: color-mix(in srgb, var(--color-primary) 80%, black);
}
</style>

完全カスタムテーマの作成

独自のテーマファイルを作成する方法

custom-theme.css を作成：

/* custom-theme.css */

/* ============================================
   カスタムテーマ: "My Brand"
   ============================================ */

:root,
[data-theme="light"] {
    /* カラーパレット */
    --color-primary: #your-primary-color;
    --color-primary-dark: #your-primary-dark;
    --color-primary-light: #your-primary-light;

    --color-secondary: #your-secondary-color;
    --color-secondary-dark: #your-secondary-dark;
    --color-secondary-light: #your-secondary-light;

    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;

    /* レイアウト */
    --color-bg: #ffffff;
    --color-box: #f9fafb;
    --color-text: #1f2937;
    --color-text-secondary: #6b7280;
    --color-border: #e5e7eb;

    /* スペーシング */
    --spacing-unit: 0.25rem;
    --border-radius: 0.5rem;

    /* フォント */
    --font-family: 'Your Custom Font', -apple-system, sans-serif;
    --font-size-base: 16px;
}

[data-theme="dark"] {
    --color-primary: #your-primary-color-dark;
    --color-secondary: #your-secondary-color-dark;

    --color-bg: #0f172a;
    --color-box: #1e293b;
    --color-text: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-border: #334155;
}

/* カスタムコンポーネントスタイル */
.btn {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

HTMLで読み込む：

<link rel="stylesheet" href="dist/asagiri.min.css">
<link rel="stylesheet" href="custom-theme.css">

🔄 複数テーマの切り替え

ユーザーが複数のテーマから選べるようにする

テーマを選択：

<style>
/* テーマ定義 */
[data-color-theme="default"] {
    --color-primary: #3b82f6;
    --color-secondary: #8b5cf6;
}

[data-color-theme="pink"] {
    --color-primary: #ec4899;
    --color-secondary: #f472b6;
}

[data-color-theme="green"] {
    --color-primary: #10b981;
    --color-secondary: #34d399;
}

[data-color-theme="purple"] {
    --color-primary: #8b5cf6;
    --color-secondary: #a78bfa;
}
</style>

<script>
function applyTheme(themeName) {
    document.documentElement.setAttribute('data-color-theme', themeName);
    localStorage.setItem('color-theme', themeName);
}

// ページ読み込み時にテーマを復元
const savedColorTheme = localStorage.getItem('color-theme') || 'default';
document.documentElement.setAttribute('data-color-theme', savedColorTheme);
</script>

ベストプラクティス

推奨事項

コントラスト比を確保： WCAG AA基準（4.5:1以上）を満たす
一貫性を保つ： カラーパレットは5-8色に絞る
意味のある色使い： 成功=緑、エラー=赤など、ユーザーの期待に沿う
ダークモード対応： ライトとダーク両方のテーマを定義
アクセシビリティ： 色だけで情報を伝えない

カラーコントラストチェックツール

テーマジェネレーターツール

カラーパレットを自動生成するツール：

Coolors - カラーパレット生成
ColorSpace - グラデーション生成
Palettte - UI カラーパレット
Tailwind Colors - カラーシステム参考