テーマ切り替えデモ

コンポーネント一覧

すべてのコンポーネントが自動的にテーマに対応します

カードコンポーネント

テーマを切り替えると、背景色とテキスト色が自動的に変わります。

アラート

成功メッセージ

警告メッセージ

エラーメッセージ

バッジ

Primary Success Warning Danger Info

ボタン

フォーム

プログレス

アバター

実装コード（コピーして使えます）

基本的な実装

1. HTMLに data-theme 属性を追加

<html lang="ja" data-theme="light">

2. JavaScriptで切り替え関数を実装

<script>
// シンプルなトグル
function toggleTheme() {
    const html = document.documentElement;
    const current = html.getAttribute('data-theme');
    const newTheme = current === 'dark' ? 'light' : 'dark';
    html.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
}

// テーマを設定
function setTheme(theme) {
    if (theme === 'auto') {
        // システム設定に従う
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        theme = prefersDark ? 'dark' : 'light';
        localStorage.removeItem('theme'); // auto設定を保存
    }
    document.documentElement.setAttribute('data-theme', theme);
    if (theme !== 'auto') {
        localStorage.setItem('theme', theme);
    }
}

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

3. ボタンを追加

<button class="theme-toggle" onclick="toggleTheme()">テーマ切り替え</button>

高度な実装（フラッシュ防止）

ページ読み込み時のテーマフラッシュを防ぐため、<head>の最初にスクリプトを配置：

<head>
    <!-- 最初に実行してフラッシュを防ぐ -->
    <script>
        (function() {
            const savedTheme = localStorage.getItem('theme') || 'light';
            document.documentElement.setAttribute('data-theme', savedTheme);
        })();
    </script>

    <meta charset="UTF-8">
    <link rel="stylesheet" href="dist/asagiri.min.css">
</head>

システム設定との連携

<script>
// システムのダークモード設定を検出
function getPreferredTheme() {
    const saved = localStorage.getItem('theme');
    if (saved) return saved;

    // システム設定を確認
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

// システム設定の変更を監視
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    // ユーザーが手動設定していない場合のみ変更
    if (!localStorage.getItem('theme')) {
        const newTheme = e.matches ? 'dark' : 'light';
        document.documentElement.setAttribute('data-theme', newTheme);
    }
});

// 初期化
const theme = getPreferredTheme();
document.documentElement.setAttribute('data-theme', theme);
</script>

よくある質問

Q: テーマが保存されない

A: localStorage.setItem('theme', newTheme) を実行しているか確認してください。

Q: ページ読み込み時に一瞬別のテーマが表示される

A: テーマ復元スクリプトを<head>の最初に配置してください（CSSより前）。

Q: 一部のコンポーネントだけダークモードにならない

A: そのコンポーネントがCSS変数（var(--color-*)）を使用しているか確認してください。

Q: カスタムカラーを使いたい

A: CSS変数を上書きすることで簡単にカスタマイズできます：

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