ダークモード

DayFlow にはライト/ダーク/自動の 3 つのテーマモードが標準搭載されており、ビューやサイドバー、イベントカード、ダイアログまで一貫して切り替わります。システム設定に合わせたり、アプリ独自のトグルから制御するのも簡単です。

特徴

3 モード対応：light / dark / auto
シームレスな切替：ちらつきやレイアウト崩れなし
システム連動：auto で OS のテーマと同期
イベントカラー最適化：背景に応じたコントラスト調整
API 完備：getTheme / setTheme / subscribeThemeChange
カレンダー単位の色替え：各 calendarId にライト/ダーク用の色を設定可能

クイックスタート

import { DayFlowCalendar, useCalendarApp } from '@dayflow/core';

function MyCalendar() {
  const calendar = useCalendarApp({
    theme: { mode: 'dark' }, // 'light' | 'dark' | 'auto'
  });

  return <DayFlowCalendar calendar={calendar} />;
}

モードを切り替えるときは mode を変更するだけです。

useCalendarApp({ theme: { mode: 'light' } }); // ライト
useCalendarApp({ theme: { mode: 'dark' } }); // ダーク
useCalendarApp({ theme: { mode: 'auto' } }); // OS に追従

プログラムからの切り替え

const calendar = useCalendarApp({ theme: { mode: 'light' } });

const toggleTheme = () => {
  const current = calendar.app.getTheme();
  calendar.app.setTheme(current === 'light' ? 'dark' : 'light');
};

購読 API を使えば、アプリ全体でテーマを共有できます。

useEffect(() => {
  const handler = (mode: ThemeMode) => setTheme(mode);
  calendar.app.subscribeThemeChange(handler);
  return () => calendar.app.unsubscribeThemeChange(handler);
}, [calendar.app]);

カレンダータイプごとの色を調整

const calendars = [
  {
    id: 'work',
    name: '仕事',
    colors: {
      lineColor: '#0066cc',
      eventColor: '#e6f2ff',
      eventSelectedColor: '#cce4ff',
      textColor: '#003d7a',
    },
    darkColors: {
      lineColor: '#4da6ff',
      eventColor: '#1a3d5c',
      eventSelectedColor: '#2a5a8a',
      textColor: '#b3d9ff',
    },
  },
];

const calendar = useCalendarApp({
  theme: { mode: 'auto' },
  calendars,
});

darkColors を省略するとライトモードの色がそのまま使われます。暗い背景でも読みやすいよう、必ずトーンを調整しましょう。

デフォルト色セット

ブルー

#3b82f6

ライト

#60a5fa

ダーク

グリーン

#22c55e

ライト

#4ade80

ダーク

パープル

#a855f7

ライト

#c084fc

ダーク

イエロー

#eab308

ライト

#facc15

ダーク

レッド

#ef4444

ライト

#f87171

ダーク

オレンジ

#f97316

ライト

#fb923c

ダーク

ピンク

#ec4899

ライト

#f472b6

ダーク

ティール

#14b8a6

ライト

#2dd4bf

ダーク

インディゴ

#6366f1

ライト

#818cf8

ダーク

グレー

#6b7280

ライト

#9ca3af

ダーク

ヒント： すべての色はWCAG AAコントラスト基準を満たしており、明暗どちらの背景でも読みやすくなっています。

API リファレンス

interface ThemeConfig {
  mode: 'light' | 'dark' | 'auto';
}

app.getTheme(): ThemeMode;
app.setTheme(mode: ThemeMode): void;
app.subscribeThemeChange((mode: ThemeMode) => void): void;
app.unsubscribeThemeChange((mode: ThemeMode) => void): void;

Tailwind / CSS 変数との併用

Tailwind で darkMode: 'class' にしている場合、ページのルートに付与している dark クラスと DayFlow の theme.mode を同期させると整合性が取れます。
--dayflow-bg-primary などの CSS カスタムプロパティを上書きすれば、より細かいトークンレベルでブランドカラーを適用できます（テーマカスタマイズガイド参照）。

テストのヒント

ライト/ダークの両方でイベント文字のコントラストが十分か確認する（4.5:1 以上が目安）。
ドラッグ&ドロップ、ポップアップ、サイドバーなど動的 UI がモード切り替え時に崩れないかテストする。
auto モードを使う場合は、OS のテーマ変更イベントを実機で試し、即時反映されるかチェックする。

この仕組みを使えば、DayFlow を既存アプリのテーマ戦略にスムーズに統合できます。

カラー推奨事項

読みやすさとアクセシビリティを最適化するために：

ライトモード：

線の色：鮮やかで彩度の高い色 (#0066cc、#16a34a)
イベント色：明るいティント (#e6f2ff、#dcfce7)
テキスト色：コントラストのための暗い色調 (#003d7a、#14532d)

ダークモード：

線の色：より明るく発光感のある色 (#4da6ff、#4ade80)
イベント色：暗く彩度を落とした背景 (#1a3d5c、#1e4d2b)
テキスト色：読みやすい明るい色調 (#b3d9ff、#bbf7d0)

使用例

シンプルなテーマ切り替え

import { DayFlowCalendar, useCalendarApp } from '@dayflow/core';
import { Sun, Moon } from 'lucide-react';

function SimpleThemeToggle() {
  const calendar = useCalendarApp({
    theme: { mode: 'light' },
  });

  const [isDark, setIsDark] = useState(false);

  const toggleTheme = () => {
    const nextTheme = isDark ? 'light' : 'dark';
    calendar.app.setTheme(nextTheme);
    setIsDark(!isDark);
  };

  return (
    <div>
      <button onClick={toggleTheme}>{isDark ? <Sun /> : <Moon />}</button>
      <DayFlowCalendar calendar={calendar} />
    </div>
  );
}