Dunkler Modus

DayFlow Calendar unterstützt den dunklen Modus von Haus aus vollständig. Der Kalender passt sein Erscheinungsbild automatisch an Ihre Theme-Einstellung an – einschließlich aller UI-Komponenten, Terminfarben und interaktiven Elemente.

Funktionen

Drei Theme-Modi: hell, dunkel und automatisch (Systemeinstellung)
Automatische Farbanpassung: Terminfarben, die auf hellem wie dunklem Grund funktionieren
Nahtloses Umschalten: sofortiger Theme-Wechsel ohne Flackern
Systemabgleich: Der Automatikmodus folgt der Theme-Einstellung des Betriebssystems
Eigene Farben: getrennte Farben für hellen und dunklen Modus festlegen

Schnellstart

Grundeinrichtung

Aktivieren Sie den dunklen Modus über die theme-Konfiguration:

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

Theme-Modi

Heller Modus

Voreingestelltes Theme mit hellen Hintergründen und dunkler Schrift.

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

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

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

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

Dunkler Modus

Dunkles Theme mit dunklen Hintergründen und heller Schrift.

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

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

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

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

Automatikmodus

Folgt automatisch der Theme-Einstellung des Systems und aktualisiert sich, sobald diese wechselt.

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

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

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

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

Theme wechseln

Theme programmgesteuert ändern

Über die Kalender-API wechseln Sie das Theme dynamisch:

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>

Theme-Änderungen abonnieren

Hören Sie auf Theme-Wechsel, um Ihre Oberfläche zu aktualisieren:

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>

Eigene Theme-Farben

Legen Sie je Kalendertyp unterschiedliche Farben für den hellen und den dunklen Modus fest:

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',
      },
    },
  ],
});

Farbempfehlungen

Für optimale Lesbarkeit und Barrierefreiheit:

Heller Modus:

Linienfarben: kräftige, gesättigte Farben (#0066cc, #16a34a)
Terminfarben: helle Tönungen (#e6f2ff, #dcfce7)
Textfarben: dunkle Töne für Kontrast (#003d7a, #14532d)

Dunkler Modus:

Linienfarben: hellere, leuchtendere Varianten (#4da6ff, #4ade80)
Terminfarben: dunkle, entsättigte Hintergründe (#1a3d5c, #1e4d2b)
Textfarben: helle Töne für gute Lesbarkeit (#b3d9ff, #bbf7d0)

Standardfarben der Kalendertypen

DayFlow bringt 10 Standard-Kalendertypen mit vorkonfigurierten Farben für den dunklen Modus mit:

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

Theme-Konfiguration

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

Methoden der Kalender-App

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

Farben der Kalendertypen

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

Beispiele

Einfacher Theme-Umschalter

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>