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)

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-monarch-color-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.