Mode sombre

DayFlow Calendar prend en charge le mode sombre de manière complète, dès l'installation. Le calendrier adapte automatiquement son apparence à votre préférence de thème : tous les composants d'interface, les couleurs d'événement et les éléments interactifs suivent.

Fonctionnalités

Trois modes de thème : clair, sombre et automatique (préférence système)
Ajustement automatique des couleurs : des couleurs d'événement optimisées pour les fonds clairs comme sombres
Bascule fluide : changement de thème instantané, sans scintillement
Synchronisation système : le mode automatique suit la préférence de thème du système d'exploitation
Couleurs personnalisées : définissez des couleurs distinctes pour les modes clair et sombre

Démarrage rapide

Configuration de base

Activez le mode sombre en définissant la configuration 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} />

Modes de thème

Mode clair

Thème par défaut, avec des fonds clairs et un texte sombre.

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

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

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

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

Mode sombre

Thème sombre, avec des fonds sombres et un texte clair.

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

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

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

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

Mode automatique

Suit automatiquement la préférence de thème du système et se met à jour lorsque celle-ci change.

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

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

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

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

Changer de thème

Changements de thème par programmation

Utilisez l'API du calendrier pour changer de thème dynamiquement :

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>

S'abonner aux changements de thème

Écoutez les changements de thème pour mettre à jour votre interface :

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>

Couleurs de thème personnalisées

Définissez des couleurs distinctes pour les modes clair et sombre sur chaque type de calendrier :

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

Recommandations de couleurs

Pour une lisibilité et une accessibilité optimales :

Mode clair :

Couleurs de trait : des couleurs vives et saturées (#0066cc, #16a34a)
Couleurs d'événement : des teintes claires (#e6f2ff, #dcfce7)
Couleurs de texte : des tons foncés pour le contraste (#003d7a, #14532d)

Mode sombre :

Couleurs de trait : des variantes plus claires et lumineuses (#4da6ff, #4ade80)
Couleurs d'événement : des fonds sombres et désaturés (#1a3d5c, #1e4d2b)
Couleurs de texte : des tons clairs pour rester lisibles (#b3d9ff, #bbf7d0)

Couleurs par défaut des types de calendrier

DayFlow fournit 10 types de calendrier par défaut, avec des couleurs de mode sombre préconfigurées :

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.

Référence de l'API

Configuration du thème

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

Méthodes de l'application calendrier

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

Couleurs des types de calendrier

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

Exemples

Bascule de thème simple

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>

Documentation associée

Configurer l'application de calendrier : configuration principale du calendrier
Types de calendrier : catégorisation et couleurs des événements
Guide de personnalisation des thèmes : thématisation avancée