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)

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'

Dark Mode

All stock themes support dark mode, but your app must explicitly opt-in via the data-color-scheme="dark" HTML attribute:

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

If you want to use a custom selector for toggling dark mode, you must fork one of the above palette CSS files and rewrite the selector:

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

Similarly, if you want the user’s system to decide dark mode, modify the selector like this:

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