다크 모드

DayFlow Calendar는 별도 설정 없이도 다크 모드를 온전히 지원합니다. 테마 설정에 따라 모든 UI 컴포넌트, 이벤트 색상, 상호작용 요소를 포함해 캘린더 전체의 외형이 자동으로 맞춰집니다.

주요 기능

세 가지 테마 모드: 라이트, 다크, 자동(시스템 설정)
색상 자동 조정: 밝은 배경과 어두운 배경 모두에 최적화된 이벤트 색상
매끄러운 전환: 깜빡임 없이 즉시 바뀌는 테마
시스템 연동: 자동 모드는 운영체제의 테마 설정을 따릅니다
사용자 지정 색상: 라이트 모드와 다크 모드에 서로 다른 색상 지정

빠른 시작

기본 설정

theme 설정을 지정해 다크 모드를 켭니다:

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

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

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

<template>
  <DayFlowCalendar :calendar="calendar" />
</template>

<script setup>
import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';

const calendar = useCalendarApp({
  theme: {
    mode: 'dark', // 'light' | 'dark' | 'auto'
  },
});
</script>

import { Component } from '@angular/core';
import { DayFlowCalendarModule } from '@dayflow/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `<dayflow-calendar [calendar]="calendar"></dayflow-calendar>`
})
export class AppComponent {
  calendar = {
    theme: {
      mode: 'dark', // 'light' | 'dark' | 'auto'
    },
  };
}

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';

  const calendar = useCalendarApp({
    theme: {
      mode: 'dark', // 'light' | 'dark' | 'auto'
    },
  });
</script>

<DayFlowCalendar {calendar} />

테마 모드

라이트 모드

밝은 배경과 어두운 글자를 사용하는 기본 테마입니다.

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

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

calendar = {
  theme: {
    mode: 'light',
  },
};

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

다크 모드

어두운 배경과 밝은 글자를 사용하는 테마입니다.

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

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

calendar = {
  theme: {
    mode: 'dark',
  },
};

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

자동 모드

시스템 테마 설정을 자동으로 따르며, 시스템 테마가 바뀌면 함께 갱신됩니다.

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

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

calendar = {
  theme: {
    mode: 'auto',
  },
};

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

테마 전환

코드로 테마 바꾸기

캘린더 API를 사용하면 테마를 동적으로 바꿀 수 있습니다:

import { useCalendarApp } from '@dayflow/react';

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>;
}

<template>
  <button @click="toggleTheme()">Toggle Theme</button>
</template>

<script setup>
import { useCalendarApp } from '@dayflow/vue';

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

const toggleTheme = () => {
  const currentTheme = calendar.app.getTheme();
  const nextTheme = currentTheme === 'light' ? 'dark' : 'light';
  calendar.app.setTheme(nextTheme);
};
</script>

import { Component } from '@angular/core';

@Component({
  selector: 'app-theme-toggle',
  standalone: true,
  template: `<button (click)="toggleTheme()">Toggle Theme</button>`
})
export class ThemeToggleComponent {
  calendar = {
    theme: { mode: 'light' },
  };

  toggleTheme() {
    const currentTheme = this.calendar.app.getTheme();
    const nextTheme = currentTheme === 'light' ? 'dark' : 'light';
    this.calendar.app.setTheme(nextTheme);
  }
}

<script>
  import { useCalendarApp } from '@dayflow/svelte';

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

  function toggleTheme() {
    const currentTheme = calendar.app.getTheme();
    const nextTheme = currentTheme === 'light' ? 'dark' : 'light';
    calendar.app.setTheme(nextTheme);
  }
</script>

<button onclick={toggleTheme}>Toggle Theme</button>

테마 변경 구독하기

테마 변경을 감지해 직접 만든 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>;
}

<template>
  <div>Current theme: {{ theme }}</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  calendar: Object,
});

const theme = ref('light');

const handleThemeChange = (newTheme) => {
  theme.value = newTheme;
};

onMounted(() => {
  props.calendar.app.subscribeThemeChange(handleThemeChange);
});

onUnmounted(() => {
  props.calendar.app.unsubscribeThemeChange(handleThemeChange);
});
</script>

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import type { ThemeMode } from '@dayflow/core';

@Component({
  selector: 'app-my-component',
  standalone: true,
  template: `<div>Current theme: {{ theme }}</div>`
})
export class MyComponent implements OnInit, OnDestroy {
  @Input() calendar!: any;
  theme: ThemeMode = 'light';

  handleThemeChange = (newTheme: ThemeMode) => {
    this.theme = newTheme;
  };

  ngOnInit() {
    this.calendar.app.subscribeThemeChange(this.handleThemeChange);
  }

  ngOnDestroy() {
    this.calendar.app.unsubscribeThemeChange(this.handleThemeChange);
  }
}

<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import type { ThemeMode } from '@dayflow/core';

  let { calendar } = $props<{ calendar: any }>();
  let theme = $state<ThemeMode>('light');

  const handleThemeChange = (newTheme: ThemeMode) => {
    theme = newTheme;
  };

  onMount(() => {
    calendar.app.subscribeThemeChange(handleThemeChange);
  });

  onDestroy(() => {
    calendar.app.unsubscribeThemeChange(handleThemeChange);
  });
</script>

<div>Current theme: {theme}</div>

사용자 지정 테마 색상

캘린더 타입마다 라이트 모드와 다크 모드에 서로 다른 색상을 지정할 수 있습니다:

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

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

calendar = {
  theme: {
    mode: 'auto',
  },
  calendars: [
    {
      id: 'work',
      name: 'Work',
      colors: {
        // Light mode colors
        lineColor: '#0066cc',
        eventColor: '#e6f2ff',
        eventSelectedColor: '#cce4ff',
        textColor: '#003d7a',
      },
      darkColors: {
        // Dark mode colors
        lineColor: '#4da6ff',
        eventColor: '#1a3d5c',
        eventSelectedColor: '#2a5a8a',
        textColor: '#b3d9ff',
      },
    },
  ],
};

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

색상 권장 사항

가독성과 접근성을 최대한 확보하려면:

라이트 모드:

선 색상: 선명하고 채도가 높은 색(#0066cc, #16a34a)
이벤트 색상: 옅은 톤(#e6f2ff, #dcfce7)
글자 색상: 대비를 위한 어두운 톤(#003d7a, #14532d)

다크 모드:

선 색상: 더 밝고 환한 변형(#4da6ff, #4ade80)
이벤트 색상: 어둡고 채도가 낮은 배경(#1a3d5c, #1e4d2b)
글자 색상: 읽기 쉬운 밝은 톤(#b3d9ff, #bbf7d0)

캘린더 타입 기본 색상

DayFlow는 다크 모드 색상이 미리 설정된 10가지 기본 캘린더 타입을 제공합니다:

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 레퍼런스

테마 설정

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

캘린더 앱 메서드

// 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

캘린더 타입 색상

interface CalendarTypeColors {
  lineColor: string; // Border and accent color
  eventColor: string; // Event background color
  eventSelectedColor: string; // Selected event background color
  textColor: string; // Text color
}

interface CalendarType {
  id: string;
  name: string;
  colors: CalendarTypeColors; // Light mode colors
  darkColors?: CalendarTypeColors; // Dark mode colors (optional)
}

예시

간단한 테마 토글

import { DayFlowCalendar, useCalendarApp } from '@dayflow/react';
import { useState } from 'react';
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>
  );
}

<template>
  <div>
    <button @click="toggleTheme()">
      <Sun v-if="isDark" />
      <Moon v-else />
    </button>
    <DayFlowCalendar :calendar="calendar" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
import { Sun, Moon } from 'lucide-vue-next';

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

const isDark = ref(false);

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

import { Component } from '@angular/core';
import { DayFlowCalendarModule } from '@dayflow/angular';

@Component({
  selector: 'app-theme-toggle',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <div>
      <button (click)="toggleTheme()">
        {{ isDark ? 'Sun' : 'Moon' }}
      </button>
      <dayflow-calendar [calendar]="calendar"></dayflow-calendar>
    </div>
  `
})
export class SimpleThemeToggleComponent {
  calendar = {
    theme: { mode: 'light' },
  };
  isDark = false;

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

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import { Sun, Moon } from 'lucide-svelte';

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

  let isDark = $state(false);

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

<div>
  <button onclick={toggleTheme}>
    {#if isDark}
      <Sun />
    {:else}
      <Moon />
    {/if}
  </button>
  <DayFlowCalendar {calendar} />
</div>