Color Palettes

The 5 stock themes come with their own “palettes”, which define color values:

Monarch - choose from palettes/[name].css (More info)
Forma - choose from palettes/[name].css (More info)
Breezy - choose from palettes/[name].css (More info)
Pulse - choose from palettes/[name].css (More info)
Classic - there is only one - palette.css (More info)

Overriding a Color

If you’re using a stock theme palette, you can override a color while still receiving updates/bugfixes for other theme colors. This is especially useful for the “background” color each theme defines.

  import 'fullcalendar/skeleton.css'
  import 'fullcalendar/themes/monarch/theme.css'
  import 'fullcalendar/themes/monarch/palettes/purple.css'
+ import './my-color-overrides.css'

And then in my-color-overrides.css:

:root {
  --fc-monarch-background: #f8f9fa;
}
@media not print {
  [data-color-scheme=dark] {
    --fc-monarch-background: #0f172a;
  }
}

This will not work if you use a class name, custom selector, or media query to declare dark mode (see below). You would need to fork the palette file in that case.

Forking a Palette

Feel free to fork these CSS files into your own codebase and customize their color values! Here’s how to wire it up in your JS:

  import 'fullcalendar/skeleton.css'
  import 'fullcalendar/themes/monarch/theme.css'
- import 'fullcalendar/themes/monarch/palettes/purple.css'
+ import './my-forked-palette.css'

On themes.fullcalendar.io, if you click the “Code” button below any demo, it will help you with forking a theme.

Dark Mode

All stock themes support dark mode. There are three ways in which you can activate it:

Technique 1: Component Prop

You can easily activate darkmode for just your calendar component by applying the colorScheme prop:

<FullCalendar
  colorScheme='dark'
/>

However, when it comes to SSR, you might want to use technique 2 or 3 to avoid flickering.

Technique 2: Data Attribute

You can apply the data-color-scheme HTML attribute to the body or any other parent.

<body data-color-scheme="dark">

No other steps necessary! The calendar will automatically pick up on this.

Technique 3: Class Name or Other Selector

If you must apply a class name to the body or other parent, you can fork the palette file to leverage it:

<body class="dark">

CSS:

-  [data-color-scheme=dark] {
+  .dark {
    --fc-monarch-primary: #D0BCFF;
    --fc-monarch-primary-foreground: #381E72;

This technique works for any CSS selector.

Technique 4: Media Query

If you want to detect what the user-agent prefers for light/dark, fork the palette and leverage a media query:

-  [data-color-scheme=dark] {
+  @media (prefers-color-scheme: dark) {
    --fc-monarch-primary: #D0BCFF;
    --fc-monarch-primary-foreground: #381E72;

Need Help?

On themes.fullcalendar.io, if you click the “Code” button below any demo, it will help you with customize the dark-mode technique.