Theme Toggle

スムーズなアニメーションと共にライト/ダークモードを切り替えることができるモダンなトグルボタンです。

✨ アニメーション効果

🔄 回転アニメーション

テーマ切り替え時にアイコンが 360 度回転してスムーズに変更されます。

🎯 ホバー効果

マウスホバー時に 1.05 倍拡大、背景色と影の変更

👆 クリックフィードバック

クリック時に 0.95 倍縮小後復元で即座のフィードバック

♿ アクセシビリティ

スクリーンリーダー、キーボードナビゲーション、フォーカスインジケーター完璧サポート

🎨 デザイン特徴

🎨 基本スタイル ✨ ホバー効果 🌙 ダークモード

/* 主なスタイル特徴 */
.theme-toggle-button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  transition: all 0.2s ease-in-out;
}

.theme-toggle-button:hover {
  transform: scale(1.05);
  background-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .theme-toggle-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

🌙 アイコン切り替え

テーマ	アイコン	状態
Light	🌙 Moon	表示
Dark	☀️ Sun	表示
Auto	🌙/☀️	システム設定に従う

アクセシビリティ

テーマトグルは完全なアクセシビリティをサポートしています：

• aria-label: スクリーンリーダーサポート
• キーボードナビゲーション: Tab でフォーカス可能
• フォーカスインジケーター: 明確なフォーカスリング
• 状態通知: aria-live で変更通知

使用方法

テーマトグルはヘッダーに自動的に含まれており、追加設定なしで即座に使用できます。

手動テーマ設定

JavaScript で手動にテーマを変更することもできます：

// ダークモードに変更
document.documentElement.dataset.theme = "dark";

// ライトモードに変更
document.documentElement.dataset.theme = "light";

// システム設定に従う
document.documentElement.dataset.theme = "auto";