Skip to Content
Welcome to DayFlow 🎉

Dark Mode

DayFlow Calendar includes comprehensive dark mode support out of the box. The calendar automatically adapts its appearance based on your theme preference, including all UI components, event colors, and interactive elements.

Features

  • Three Theme Modes: Light, Dark, and Auto (system preference)
  • Automatic Color Adjustment: Event colors optimized for both light and dark backgrounds
  • Seamless Switching: Instant theme changes without flickering
  • System Sync: Auto mode follows your operating system’s theme preference
  • Custom Colors: Define different colors for light and dark modes

Quick Start

Basic Setup

Enable dark mode by setting the theme configuration:

import { useCalendarApp, DayFlowCalendar } from '@dayflow/core';
 
function MyCalendar() {
  const calendar = useCalendarApp({
    theme: {
      mode: 'dark', // 'light' | 'dark' | 'auto'
    },
  });
 
  return <DayFlowCalendar calendar={calendar} />;
}

Theme Modes

Light Mode

Default theme with light backgrounds and dark text.

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

Dark Mode

Dark theme with dark backgrounds and light text.

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

Auto Mode

Automatically follows system theme preference and updates when system theme changes.

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

Theme Switching

Programmatic Theme Changes

Use the calendar API to change themes dynamically:

import { useCalendarApp } from '@dayflow/core';
 
function ThemeToggle() {
  const calendar = useCalendarApp({
    theme: { mode: 'light' },
  });
 
  const toggleTheme = () => {
    const currentTheme = calendar.app.getTheme();
    const nextTheme = currentTheme === 'light' ? 'dark' : 'light';
    calendar.app.setTheme(nextTheme);
  };
 
  return <button onClick={toggleTheme}>Toggle Theme</button>;
}

Subscribe to Theme Changes

Listen to theme changes to update your UI:

import { useEffect, useState } from 'react';
import type { ThemeMode } from '@dayflow/core';
 
function MyComponent({ calendar }) {
  const [theme, setTheme] = useState<ThemeMode>('light');
 
  useEffect(() => {
    const handleThemeChange = (newTheme: ThemeMode) => {
      setTheme(newTheme);
    };
 
    // Subscribe to theme changes
    calendar.app.subscribeThemeChange(handleThemeChange);
 
    // Cleanup
    return () => {
      calendar.app.unsubscribeThemeChange(handleThemeChange);
    };
  }, [calendar.app]);
 
  return <div>Current theme: {theme}</div>;
}

Custom Theme Colors

Define different colors for light and dark modes for your calendar types:

const calendar = useCalendarApp({
  theme: {
    mode: 'auto',
  },
  calendarTypes: [
    {
      id: 'work',
      name: 'Work',
      colors: {
        // Light mode colors
        lineColor: '#0066cc',
        backgroundColor: '#e6f2ff',
        textColor: '#003d7a',
      },
      darkColors: {
        // Dark mode colors
        lineColor: '#4da6ff',
        backgroundColor: '#1a3d5c',
        textColor: '#b3d9ff',
      },
    },
  ],
});

Color Recommendations

For optimal readability and accessibility:

Light Mode:

  • Line colors: Vibrant, saturated colors (#0066cc, #16a34a)
  • Background colors: Light tints (#e6f2ff, #dcfce7)
  • Text colors: Dark shades for contrast (#003d7a, #14532d)

Dark Mode:

  • Line colors: Lighter, more luminous variants (#4da6ff, #4ade80)
  • Background colors: Dark, desaturated backgrounds (#1a3d5c, #1e4d2b)
  • Text colors: Light shades for readability (#b3d9ff, #bbf7d0)

Default Calendar Type Colors

DayFlow includes 10 default calendar types with pre-configured dark mode colors:

Blue
#3b82f6
Light
#60a5fa
Dark
Green
#22c55e
Light
#4ade80
Dark
Purple
#a855f7
Light
#c084fc
Dark
Yellow
#eab308
Light
#facc15
Dark
Red
#ef4444
Light
#f87171
Dark
Orange
#f97316
Light
#fb923c
Dark
Pink
#ec4899
Light
#f472b6
Dark
Teal
#14b8a6
Light
#2dd4bf
Dark
Indigo
#6366f1
Light
#818cf8
Dark
Gray
#6b7280
Light
#9ca3af
Dark
Tip: All colors meet WCAG AA contrast requirements for both light and dark backgrounds, ensuring good readability.

API Reference

Theme Configuration

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

Calendar App Methods

// Get current theme mode
app.getTheme(): ThemeMode
 
// Set theme mode
app.setTheme(mode: ThemeMode): void
 
// Subscribe to theme changes
app.subscribeThemeChange(callback: (theme: ThemeMode) => void): void
 
// Unsubscribe from theme changes
app.unsubscribeThemeChange(callback: (theme: ThemeMode) => void): void

Calendar Type Colors

interface CalendarTypeColors {
  lineColor: string; // Border and accent color
  backgroundColor: string; // Background color
  textColor: string; // Text color
}
 
interface CalendarType {
  id: string;
  name: string;
  colors: CalendarTypeColors; // Light mode colors
  darkColors?: CalendarTypeColors; // Dark mode colors (optional)
}

Examples

Simple Theme Toggle

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>
  );
}
Custom Detail PanelTheme Customization Guide