--- title: Color Palettes --- The 5 stock themes come with their own "palettes", which define color values: - **Monarch** - choose from `palettes/[name].css` ([More info](https://github.com/fullcalendar/fullcalendar-workspace/tree/v7-dev/standard/packages/preact/src/themes/monarch/palettes)) - **Forma** - choose from `palettes/[name].css` ([More info](https://github.com/fullcalendar/fullcalendar-workspace/tree/v7-dev/standard/packages/preact/src/themes/forma/palettes)) - **Breezy** - choose from `palettes/[name].css` ([More info](https://github.com/fullcalendar/fullcalendar-workspace/tree/v7-dev/standard/packages/preact/src/themes/breezy/palettes)) - **Pulse** - choose from `palettes/[name].css` ([More info](https://github.com/fullcalendar/fullcalendar-workspace/tree/v7-dev/standard/packages/preact/src/themes/pulse/palettes)) - **Classic** - there is only one - `palette.css` ([More info](https://github.com/fullcalendar/fullcalendar-workspace/tree/v7-dev/standard/packages/preact/src/themes/classic/palette.css)) ## 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: ```diff 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](https://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: ```jsx ``` However, when it comes to SSR, you might want to use technique 2 or 3 [to avoid flickering](https://ayc0.github.io/posts/light-dark-mode-avoid-flickering-on-reload/). ### Technique 2: Data Attribute You can apply the `data-color-scheme` HTML attribute to the body or any other parent. ```html ``` 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: ```html ``` CSS: ```diff - [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: ```diff - [data-color-scheme=dark] { + @media (prefers-color-scheme: dark) { --fc-monarch-primary: #D0BCFF; --fc-monarch-primary-foreground: #381E72; ``` ### Need Help? On [themes.fullcalendar.io](https://themes.fullcalendar.io), if you click the "Code" button below any demo, it will help you with customize the dark-mode technique.