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

DayFlow カレンダーの見た目は、--df-color-* という名前空間付き CSS カスタムプロパティで管理されています。すべてのトークンは @layer df-theme の内側で定義されているため、ホストアプリケーションは !important を使わずに上書きできます。Tailwind を使っていない環境でも同様です。

DayFlow の共有基盤 CSS は、トークン、コンポーネント基礎スタイル、そして df-fill-primary や df-focus-ring などの df-* セマンティック補助クラスの単一ソースです。

カレンダータイプのカスタムカラー

基本設定

1 つの calendarId ごとにライト／ダークの配色を定義できます。

const calendar = useCalendarApp({
  calendars: [
    {
      id: 'personal',
      name: '個人',
      colors: {
        lineColor: '#0891b2',
        eventColor: '#cffafe',
        eventSelectedColor: '#a5f3fc',
        textColor: '#164e63',
      },
      darkColors: {
        lineColor: '#22d3ee',
        eventColor: '#164e63',
        eventSelectedColor: '#083344',
        textColor: '#cffafe',
      },
    },
  ],
});

各色の役割

lineColor：イベントカード左側のアクセントやボーダー
eventColor：イベント本体の背景
eventSelectedColor：選択されたイベントの背景
textColor：タイトルや時刻テキスト

ブランドカラーを当てはめる

const brandPalette = {
  lineColor: '#6366f1',
  eventColor: '#e0e7ff',
  eventSelectedColor: '#c7d2fe',
  textColor: '#312e81',
};

const brandDarkPalette = {
  lineColor: '#a5b4fc',
  eventColor: '#312e81',
  eventSelectedColor: '#1e1b4b',
  textColor: '#e0e7ff',
};

ヘルパーで色生成

interface ColorSet {
  lineColor: string;
  eventColor: string;
  eventSelectedColor: string;
  textColor: string;
}

export const buildLightColors = (base: string): ColorSet => ({
  lineColor: base,
  eventColor: lighten(base, 0.88),
  eventSelectedColor: lighten(base, 0.8),
  textColor: darken(base, 0.45),
});

export const buildDarkColors = (base: string): ColorSet => ({
  lineColor: lighten(base, 0.25),
  eventColor: darken(base, 0.55),
  eventSelectedColor: darken(base, 0.65),
  textColor: lighten(base, 0.8),
});

CSS 変数リファレンス

DayFlow のすべてのテーマトークンは --df-color- プレフィックスを持ち、ホストアプリの変数との衝突を防ぎます。

変数	用途
`--df-color-background`	カレンダーの背景
`--df-color-foreground`	主テキスト色
`--df-color-hover`	ホバー時の背景
`--df-color-border`	ボーダーと区切り線
`--df-color-card`	カード・パネルの背景
`--df-color-card-foreground`	カード内テキスト色
`--df-color-muted`	控えめな背景エリア
`--df-color-muted-foreground`	補助テキスト色
`--df-color-primary`	主アクセント（ボタン、選択状態など）
`--df-color-primary-foreground`	プライマリ背景上のテキスト
`--df-color-secondary`	セカンダリアクセント
`--df-color-secondary-foreground`	セカンダリ背景上のテキスト
`--df-color-destructive`	削除など破壊的アクション
`--df-color-destructive-foreground`	デストラクティブ背景上のテキスト

セマンティック補助クラス

CSS 変数に加えて、DayFlow はテーマ連動の df-* セマンティック補助クラスも公開しています。slot 内の独自 UI やプラグインコンポーネントを、内蔵 UI と同じ見た目に揃えたいときに便利です。

クラス名	意味
`df-fill-primary`	プライマリ塗りつぶし面 + 自動前景文字色
`df-fill-secondary`	セカンダリ塗りつぶし面 + 自動前景文字色
`df-fill-destructive`	破壊的アクション面 + 自動前景文字色
`df-tint-primary`	控えめなプライマリ選択ティント
`df-hover-primary`	プライマリ系ホバー状態
`df-hover-primary-solid`	塗りつぶしプライマリボタン用ホバー状態
`df-text-primary`	プライマリ文字色
`df-border-primary`	プライマリ border 色
`df-ring-primary`	プライマリ ring トークン
`df-focus-ring`	`:focus` 時にプライマリ border と ring を適用

テーマ調整では、これらの df-* クラスまたは --df-color-* を優先し、bg-primary、text-primary、hover:bg-primary/90 などの旧来の内部 Tailwind セマンティック名には依存しないでください。

上書き方法

方法 1 — コンテナへの直接指定（全環境対応）

.df-calendar-container に変数を直接設定します。この規則はどの @layer にも属さないため、ライブラリのデフォルト値に対して常に優先されます。

実際には、.df-calendar-container と .df-portal を一緒に対象にすることが多くなります。

.df-calendar-container はカレンダー本体のルートコンテナです
.df-portal は DayFlow が document.body 配下に portal 描画する浮動 UI のルートクラスで、ダイアログ、ドロップダウン、一部の picker パネルなどに使われます

.df-calendar-container だけを上書きすると、本体は新しいテーマになっても portal ベースの浮動 UI はデフォルトのトークンを使い続けることがあります。

/* styles/globals.css */
.df-calendar-container,
.df-portal {
  --df-color-primary: #6366f1;
  --df-color-background: #f9fafb;
  --df-color-border: #e0e7ff;
}

/* ダークモード — 祖先要素に .dark クラスがあるとき */
.dark .df-calendar-container,
.dark .df-portal {
  --df-color-primary: #a5b4fc;
  --df-color-background: #1e1e2e;
  --df-color-border: #312e81;
}

ほとんどのプロジェクトにはこの方法を推奨します。変数はカレンダー内部にのみ影響し、外部には漏れません。

Tailwind v4 との連携

Tailwind v4 はすべて CSS で設定します。tailwind.config.js は不要です。DayFlow が配布する CSS には共有基盤スタイルが含まれているため、テーマトークンと df-* セマンティッククラスはインポート直後から利用できます。

CSS ファイルの選択

DayFlow は 2 種類の CSS バンドルを提供します。

ファイル	内容	使用場面
`styles.css`	Tailwind preflight（CSS リセット）を含む完全バンドル	Tailwind を使わない場合
`styles.components.css`	コンポーネントスタイルのみ、CSS リセットなし	すでに Tailwind を使用している場合

最小構成

/* app.css — Tailwind プロジェクト向け */
@import '@dayflow/core/dist/styles.components.css';
@import 'tailwindcss';

Tailwind を使用していない場合は、完全バンドルをインポートしてください。

/* app.css — Tailwind を使わないプロジェクト向け */
@import '@dayflow/core/dist/styles.css';

ダークモード

DayFlow は祖先要素（<html> を含む）の .dark クラスを参照します。JavaScript で切り替えてください。

document.documentElement.classList.toggle('dark', isDark);

クラスなしでもシステム設定のダークモードが自動的に適用されます。

Tailwind v4 で theme.mode を使う場合

DayFlow が配布する CSS には、theme.mode に必要な .dark variant がすでに含まれています。Tailwind v4 プロジェクトでは、@dayflow/core/dist/styles.components.css を読み込むだけで、DayFlow 自身は <html> 上の .dark クラス切り替えに追従します。

アプリ側で自分の Tailwind dark: ユーティリティも同じクラス切り替えに合わせたい場合だけ、CSS エントリーファイルに次を追加してください：

@import '@dayflow/core/dist/styles.components.css';
@import 'tailwindcss';

/* 任意: アプリ側の Tailwind dark: ユーティリティにも必要な場合のみ */
@variant dark (.dark &);

この設定がなくても DayFlow は theme.mode で正しく切り替わります。影響を受けるのは、アプリ側で書いた Tailwind dark: ユーティリティが Tailwind 既定のメディアクエリ挙動のままになる点だけです。

実践ガイド

通常は次の優先順位でテーマを調整するのがおすすめです。

.df-calendar-container、.df-portal、または自前のラッパーで --df-color-* を上書きする
カスタム slot / プラグイン UI で df-fill-primary や df-focus-ring などの df-* 補助クラスを再利用する
テーマではなくレイアウトを変えたい場合だけ、低レベルの utility を直接上書きする

Tailwind ユーティリティでラップする

function ThemedCalendar({ calendar }) {
  return (
    <div className='rounded-2xl shadow-xl ring-1 ring-gray-200 dark:ring-gray-700'>
      <DayFlowCalendar calendar={calendar} />
    </div>
  );
}

カスタムテーマの組み立て

export const oceanTheme = {
  mode: 'auto' as const,
  calendars: [
    {
      id: 'deep-ocean',
      name: 'Deep Ocean',
      colors: {
        lineColor: '#0284c7',
        eventColor: '#e0f2fe',
        eventSelectedColor: '#bae6fd',
        textColor: '#0f172a',
      },
      darkColors: {
        lineColor: '#38bdf8',
        eventColor: '#0f172a',
        eventSelectedColor: '#020617',
        textColor: '#e0f2fe',
      },
    },
  ],
};

const calendar = useCalendarApp({ theme: oceanTheme });

CSS 変数の上書きと組み合わせると、見た目を完全に統一できます。

/* Ocean テーマ CSS トークン */
.df-calendar-container {
  --df-color-primary: #0369a1;
  --df-color-background: #f0f9ff;
  --df-color-border: #bae6fd;
}

.dark .df-calendar-container {
  --df-color-primary: #7dd3fc;
  --df-color-background: #0c1220;
  --df-color-border: #0c4a6e;
}