テーマトグル

ThemeToggleコンポーネントは、ライトテーマとダークテーマを簡単に切り替えるためのインタラクティブなボタンコンポーネントです。カスタマイズ可能なアイコン、ラベル、サイズオプション、スムーズなトランジション効果を提供します。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

• サイズ: Small、Medium、Largeの3サイズ
• カスタムアイコン: ライト/ダークモードのアイコンをカスタマイズ可能
• カスタムラベル: アクセシビリティラベルをカスタマイズ可能
• テキストオンリー: アイコンなしのテキストのみモード
• 無効状態: 切り替えを無効化するオプション
• イベント発火: テーマ変更イベントをディスパッチ
• テーマ対応: ライトテーマとダークテーマの自動切り替え
• レスポンシブ: モバイルでは自動的にアイコンのみ表示

使用方法

---
import { ThemeToggle } from '@karan-monorepo/ui-core';
---

<kds-theme-toggle
  theme="light"
  size="md"
/>

プロパティ

プロパティ	型	デフォルト	説明
theme	'light' | 'dark'	'light'	現在のテーマ
size	'sm' | 'md' | 'lg'	'md'	ボタンのサイズ
disabled	boolean	false	ボタンを無効化
lightIcon	string	'☀️'	ライトモードアイコン
darkIcon	string	'🌙'	ダークモードアイコン
lightLabel	string	'Switch to dark mode'	ライトモード時のアクセシビリティラベル
darkLabel	string	'Switch to light mode'	ダークモード時のアクセシビリティラベル
textOnly	boolean	false	テキストのみモード（アイコンなし）

使用例

ThemeToggle Component

Interactive button component for switching between light and dark themes with smooth transitions.

Sizes

Small

Medium

Large

States

Light Theme

Dark Theme

Disabled

Variants

Icon + Label (Default)

Text Only

Custom Icons

Custom Emoji Icons

Custom Labels

Themes

Light Theme Toggle

Dark Theme Toggle

Usage Examples

Header Navigation

My App

Home About Contact

Settings Panel

Theme

Switch between light and dark mode

Floating Action Button

サイズバリエーション

ThemeToggleコンポーネントは3つのサイズをサポートします：

• sm: コンパクトな小型ボタン
• md: 標準的な中型ボタン
• lg: 大きな大型ボタン

<!-- 小さなサイズ -->
<kds-theme-toggle size="sm" theme="light" />

<!-- 標準サイズ -->
<kds-theme-toggle size="md" theme="light" />

<!-- 大きなサイズ -->
<kds-theme-toggle size="lg" theme="light" />

カスタマイズ

カスタムアイコン

<kds-theme-toggle
  theme="light"
  light-icon="🌞"
  dark-icon="🌜"
/>

カスタムラベル

<kds-theme-toggle
  theme="light"
  light-label="ライトモードに切り替え"
  dark-label="ダークモードに切り替え"
/>

テキストオンリーモード

<kds-theme-toggle
  theme="light"
  text-only={true}
/>

イベント

theme-change

テーマが変更されたときに発火します。

const toggle = document.querySelector('kds-theme-toggle');
toggle.addEventListener('theme-change', (event) => {
  console.log('New theme:', event.detail.theme);
  // Update application theme
  document.documentElement.setAttribute('data-theme', event.detail.theme);
});

使用ケース

ヘッダーナビゲーション

<header>
  <div class="logo">My App</div>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
  <kds-theme-toggle theme="light" size="sm" />
</header>

設定パネル

<div class="settings">
  <div class="setting-item">
    <div class="setting-label">
      <strong>テーマ</strong>
      <p>ライトモードとダークモードを切り替え</p>
    </div>
    <kds-theme-toggle theme="light" size="md" />
  </div>
</div>

フローティングアクションボタン

<div class="fab-container">
  <kds-theme-toggle theme="light" size="lg" />
</div>

テーマの統合

Reactでの使用例

import { useEffect, useState } from 'react';
import '@karan-monorepo/ui-core';

function App() {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    const toggle = document.querySelector('kds-theme-toggle');
    const handleThemeChange = (event) => {
      setTheme(event.detail.theme);
      document.documentElement.setAttribute('data-theme', event.detail.theme);
    };

    toggle?.addEventListener('theme-change', handleThemeChange);
    return () => toggle?.removeEventListener('theme-change', handleThemeChange);
  }, []);

  return (
    <div>
      <kds-theme-toggle theme={theme} size="md" />
    </div>
  );
}

Vueでの使用例

<template>
  <div>
    <kds-theme-toggle
      :theme="theme"
      size="md"
      @theme-change="handleThemeChange"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import '@karan-monorepo/ui-core';

const theme = ref('light');

const handleThemeChange = (event) => {
  theme.value = event.detail.theme;
  document.documentElement.setAttribute('data-theme', event.detail.theme);
};

onMounted(() => {
  const toggle = document.querySelector('kds-theme-toggle');
  toggle?.addEventListener('theme-change', handleThemeChange);
});
</script>

Svelteでの使用例

<script>
  import { onMount } from 'svelte';
  import '@karan-monorepo/ui-core';

  let theme = 'light';

  onMount(() => {
    const toggle = document.querySelector('kds-theme-toggle');
    const handleThemeChange = (event) => {
      theme = event.detail.theme;
      document.documentElement.setAttribute('data-theme', event.detail.theme);
    };

    toggle?.addEventListener('theme-change', handleThemeChange);
    return () => toggle?.removeEventListener('theme-change', handleThemeChange);
  });
</script>

<kds-theme-toggle {theme} size="md" />

スタイリング

ThemeToggleコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

• タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
• カラー: ライト/ダークテーマに対応したカラートークン
• スペーシング: デザインシステムのスペーシングトークン
• トランジション: スムーズなホバーとクリック効果
• シャドウ: 洗練されたボックスシャドウ

アクセシビリティ

ThemeToggleコンポーネントには適切なアクセシビリティ機能が含まれています：

• セマンティックなbutton要素
• aria-label属性でアクセシビリティラベル
• キーボードナビゲーションサポート
• フォーカス表示
• 無効状態の適切な処理
• スクリーンリーダー対応

ベストプラクティス

1. テーマの永続化でユーザー設定をlocalStorageに保存する
2. システム設定の尊重でprefers-color-schemeメディアクエリを使用する
3. 適切な配置でユーザーが簡単にアクセスできる場所に配置する
4. 明確なフィードバックでテーマ変更を視覚的に確認できるようにする
5. 両方のテーマでテストしてすべてのコンポーネントが適切に表示されることを確認する
6. スムーズなトランジションでテーマ変更時にちらつきを防ぐ

レスポンシブデザイン

ThemeToggleコンポーネントはレスポンシブで設計されています：

• デスクトップ: アイコン + ラベル表示
• モバイル: 自動的にアイコンのみ表示（円形ボタン）
• タッチデバイス対応
• 適切なタップターゲットサイズ

ブラウザサポート

ThemeToggleコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

• CSS Custom Properties
• Web Components (Lit)
• CSS Flexbox
• CSS Transforms and Transitions
• CustomEvent API