Theming
Simple Calendar exposes several CSS variables that can be used to change its appearance. These variables are used by the built-in themes to control their appearance but can be overwritten to match a third party modules overall theme.
These variables are added to the .simple-calendar.{theme} classes. Example for the dark theme would be .simple-calendar.dark class will have the CSS variables. These classes are added by default to each Foundry VTT application to ensure all dialogs look correct.
Check out the contributing guide if you want to add your own theme to Simple Calendar for everyone to use!
Below is the list of all available CSS variables and what they target:
Application Windows
These are all the variables associated with changing how the Foundry VTT application windows look for Simple Calendar.
| CSS Variable | Description |
|---|---|
| --app-header-bg-color | The application header background color. |
| --app-header-bg-image | The application header background image. Links to images need to be wrapped in url(''). Choose unset if no image is wanted. |
| --app-header-color | The application header text color. |
| --app-header-border | The application header border css property. |
| --app-header-border-image | The application header border image. Links to images need to be wrapped in url(''). Choose unset if no image is wanted. |
| --app-header-height | The height of the application header. The height must include the units, rem is recommended. |
| --app-bg-color | The applications body background color. |
| --app-bg-image | The applications body background image. Links to images need to be wrapped in url(''). Choose unset if no image is wanted. |
| --app-border | The applications body border css property. |
| --app-border-image | The applications body border image. Links to images need to be wrapped in url(''). Choose unset if no image is wanted. |
| --app-color | The applications body text color. |
Application Window Sections
These are all the variables associated with changing how defined sections (calendar, clock) look within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --section-bg-color | The background color for the section. |
| --section-border-color | The border color for the section. |
| --section-color | The text color for the section. |
Buttons
These are all the variables associated with changing how buttons look within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --btn-bg-image | A background image to apply to all buttons. Links to images need to be wrapped in url(''). Choose unset if no image is wanted. |
| --btn-border | The border CSS property for the buttons. eg 1px solid green |
| --btn-border-image | The border image to apply to all buttons. Links to images need to be wrapped in url(''). Choose unset if no image is wanted. |
| --btn-grey-border-color | The border color that should be used for grey buttons. |
| --btn-grey-bg-color | The background color that should be used for grey buttons. |
| --btn-grey-color | The text color that should be used for grey buttons. |
| --btn-grey-bg-hover-color | The background color that should be used for grey buttons when they are hovered. |
| --btn-grey-disabled-bg-color | The background color that should be used for disabled grey buttons. |
| --btn-primary-border-color | The border color that should be used for the primary color buttons. |
| --btn-primary-bg-color | The background color that should be used for the primary color buttons. |
| --btn-primary-color | The text color that should be used for the primary color buttons. |
| --btn-primary-bg-hover-color | The background color that should be used for the primary color buttons when they are hovered. |
| --btn-primary-disabled-bg-color | The background color that should be used for disabled the primary color buttons. |
| --btn-secondary-border-color | The border color that should be used for the secondary color buttons. |
| --btn-secondary-bg-color | The background color that should be used for the secondary color buttons. |
| --btn-secondary-color | The text color that should be used for the secondary color buttons. |
| --btn-secondary-bg-hover-color | The background color that should be used for the secondary color buttons when they are hovered. |
| --btn-secondary-disabled-bg-color | The background color that should be used for disabled the secondary color buttons. |
| --btn-tertiary-border-color | The border color that should be used for the tertiary color buttons. |
| --btn-tertiary-bg-color | The background color that should be used for the tertiary color buttons. |
| --btn-tertiary-color | The text color that should be used for the tertiary color buttons. |
| --btn-tertiary-bg-hover-color | The background color that should be used for the tertiary color buttons when they are hovered. |
| --btn-tertiary-disabled-bg-color | The background color that should be used for disabled the tertiary color buttons. |
| --btn-delete-border-color | The border color that should be used for the delete color buttons. |
| --btn-delete-bg-color | The background color that should be used for the delete color buttons. |
| --btn-delete-color | The text color that should be used for the delete color buttons. |
| --btn-delete-bg-hover-color | The background color that should be used for the delete color buttons when they are hovered. |
| --btn-delete-disabled-bg-color | The background color that should be used for disabled the delete color buttons. |
| --btn-save-border-color | The border color that should be used for the save color buttons. |
| --btn-save-bg-color | The background color that should be used for the save color buttons. |
| --btn-save-color | The text color that should be used for the save color buttons. |
| --btn-save-bg-hover-color | The background color that should be used for the save color buttons when they are hovered. |
| --btn-save-disabled-bg-color | The background color that should be used for disabled the save color buttons. |
Calendar
These are all the variables associated with changing how the calendar display looks within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --cal-weekend-bg-color | The background color for days that are considered rest days/the weekend. |
| --cal-day-border-color | The border color of days in the calendar. |
| --cal-day-hover-color | The color of a day in the calendar when it is hovered over. |
| --cal-day-current-bg-color | The background color for the current day. |
| --cal-day-current-box-shadow-color | The box shadow color for the current day. |
| --cal-day-current-hover-bg-color | The background color for the current day when it is hovered over. |
| --cal-day-selected-bg-color | The background color for the selected day. |
| --cal-day-selected-box-shadow-color | The box shadow color for the selected day. |
| --cal-day-selected-hover-bg-color | The background color for the selected day when it is hovered over. |
| --cal-note-indicator-bg-color | The background color for the indicator that shows there are notes on a specific day. |
| --cal-note-reminder-indicator-bg-color | The background color for the indicator that shows there are notes on a specific day the players wants to be reminded about. |
| --cal-note-indicator-color | The text color for the note indicators. |
| --cal-moon-group-bg-color | The background color for the moon group popup that appears when there are too many moons to show directly on the calendar. |
| --cal-moon-group-border-color | The border color for the moon group popup that appears when there are too many moons to show directly on the calendar. |
| --cal-moon-group-box-shadow-color | The box shadow color for the moon group popup that appears when there are too many moons to show directly on the calendar. |
| --cal-moon-text-shadow | The text shadow color used when displaying moons on the calendar or in the moon group popup. |
Calendar List
These are all the variables associated with changing how the list of calendars appears within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --cal-list-color | The text color to use for the calendar list. |
| --cal-list-active-border-color | The border color of the currently active calendar in the list. |
| --cal-list-active-bg-color | The background color of the currently active calendar in the list. |
| --cal-list-visible-bg-color | The background color of the calendar currently being viewed, if different from the active calendar, in the list of calendars. |
| --cal-list-bg-hover-color | The background color of the calendar currently being viewed in the list of calendars when it is hovered over. |
Clock
These are all the variables associated with changing how the clock appears in Simple Calendar.
| CSS Variable | Description |
|---|---|
| --clock-started-color | The color of the clock icon when the real time clock is running. |
| --clock-stopped-color | The color of the clock icon when the real time clock is stopped. |
| --clock-paused-color | The color of the clock icon when the real time clock is paused. |
Configuration Dialog Menu
These are all the variables associated with changing how the configuration dialogs left menu looks.
| CSS Variable | Description |
|---|---|
| --config-menu-heading-color | The text color of the headings in the configuration dialogs left menu. |
| --config-menu-item-border-color | The border color of the divider between items in the menu. |
| --config-menu-item-color | The text color of all items in the menu. |
| --config-menu-item-hover-color | The text color of items in the menu when they are hovered over. |
| --config-menu-item-hover-bg-color | The background color of items in the menu when they are hovered over. |
| --config-menu-cal-settings-bg-color | The background color of the menu section specific to the selected calendars settings. |
| --config-menu-cal-selector-bg-color | The background color for the calendar selector dropdown. |
| --config-menu-cal-selector-hover-bg-color | The background color for the calendar selector dropdown when an item is hovered over. |
| --config-menu-cal-selector-color | The text color for the calendar selector dropdown. |
| --config-menu-cal-selector-hover-color | The text color for the calendar selector when an item is hovered over. |
Context Menu
These are all the variables associated with changing how the context menu (right click/command click menu) appears within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --context-menu-color | The text color for the context menu. |
| --context-menu-border-color | The border color for the context menu. |
| --context-menu-bg-color | The background color for the context menu. |
| --context-menu-action-hover-color | The color of actionable items (links, buttons, side menus) in the context menu when hovered over. |
| --context-menu-divider-color | The color of the divider line within the context menu. |
Font
These are all the variables associated with changing the fonts within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --font-family | This variable changes the font that is used throughout Simple Calendar. |
| --heading-font-family | This variable changes the font that is used for headings throughout Simple Calendar. |
Form Groups
These are all the variables associated with changing how form groups look within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --form-group-bg-color | This variable changes the form group background color. These are the boxes around each setting in the configuration dialog. |
| --form-group-bg-hover-color | This variable changes the form group background color when hovered over. These are the boxes around each setting in the configuration dialog. |
| --form-group-border-color | This variable changes the form group border color. These are the boxes around each setting in the configuration dialog. |
| --form-group-label-color | This variable changes the form group setting name color. These are the boxes around each setting in the configuration dialog. |
| --form-group-help-color | This variable changes the form group description/help text color. These are the boxes around each setting in the configuration dialog. |
| --form-group-input-bg-color | This variable changes the background color for the compact form group. These are used on the note sheet edit view. |
| --form-group-input-border-color | This variable changes the border color for the compact form group. These are used on the note sheet edit view. |
| --form-group-input-color | This variable changes the text color for the compact form group. These are used on the note sheet edit view. |
| --form-group-help-icon-color | This variable changes the text color for the help icon that appears on hover of a compact form group. These are used on the note sheet edit view. |
Headings
These are all the variables associated with changing how headings look within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --heading-border-color | This variable changes the color of the bottom border for headings. |
| --about-heading-border-color | Tis variable changes the color of the bottom order for the main heading in the about section of the configuration. |
Inputs
These are all the variables associated with changing how inputs (text, numeric, selects, etc.) look within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --input-bg-color | This variable changes the background color of all inputs (text, numeric select, etc). |
| --input-border-color | This variable changes the border color of all inputs (text, numeric select, etc). |
| --input-color | This variable changes the text color of all inputs (text, numeric select, etc). |
Links
These are all the variables associated with changing how links and entity links (links to entities within Foundry VTT like journals, actors etc.) look within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --link-color | This variable changes the color of hyper links. |
| --link-hover-color | This variable changes the color of hyper links when they are hovered over. |
| --entity-link-bg-color | This variable changes the background color of entity links. |
| --entity-link-border-color | This variable changes the border color of entity links. |
| --entity-link-icon-color | This variable changes the color of the icon shown with the entity link. |
| --entity-link-icon-hover-color | This variable changes the color of the icon shown with the entity link when the entity is hovered. |
Messages
These are all the variables associated with changing how message alerts appear within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --message-color | This variable changes the text color of all messages. |
| --message-warn-bg-color | This variable changes the warning message background color. |
| --message-warn-border-color | This variable changes the warning message border color. |
| --message-success-bg-color | This variable changes the success message background color. |
| --message-success-border-color | This variable changes the success message border color. |
| --message-info-bg-color | This variable changes the info message background color. |
| --message-info-border-color | This variable changes the info message border color. |
| --message-danger-bg-color | This variable changes the danger message background color. |
| --message-danger-border-color | This variable changes the danger message border color. |
Multi Select
These are all the variables associated with changing how the multi select controls appear within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --multi-select-option-bg-color | This variable changes the multi selects option background color. |
| --multi-select-option-bg-hover-color | This variable changes the multi selects option background color when hovered. |
| --multi-select-option-border-color | This variable changes the multi selects option border color. |
| --multi-select-option-color | This variable changes the multi selects option text color. |
| --multi-select-disabled-bg-color | This variable changes the multi selects disabled option background color. |
| --multi-select-disabled-color | This variable changes the multi selects disabled option text color. |
Note Category
These are all the variables associated with changing how note category pills appear within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --note-cat-color | This variable changes the default category text color. |
| --note-cat-bg-color | This variable changes the default category background color. |
| --note-cat-box-shadow-color | This variable changes the category box shadow color. |
| --note-cat-secondary-bg-color | This variable changes the category background color for ones using the secondary color. |
| --note-cat-secondary-color | This variable changes the category text color for ones using the secondary color. |
| --note-cat-success-bg-color | This variable changes the category background color for ones using the success color. |
| --note-cat-success-color | This variable changes the category text color for ones using the success color. |
| --note-cat-danger-bg-color | This variable changes the category background color for ones using the danger color. |
| --note-cat-danger-color | This variable changes the category text color for ones using the danger color. |
| --note-cat-reminder-bg-color | This variable changes the category background color for the reminder indicator. |
| --note-cat-reminder-color | This variable changes the category text color for the reminder indicator. |
Note List
These are all the variables associated with changing how the note list appears within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --note-list-note-border-color | This variable changes the border color of the note list. |
| --note-list-note-bg-hover-color | This variable changes the background color of a note in the note list when the note is hovered. |
| --note-list-note-hover-color | This variable changes the text color of a note in the note list when the note is hovered. |
| --note-list-note-dragger-bg-color | This variable changes the background color of the dragger indicator. |
| --note-list-note-dragger-box-shadow-color | This variable changes the box shadow color of the dragger indicator. |
Note Sheet
These are all the variables associated with changing how the note sheet appears.
| CSS Variable | Description |
|---|---|
| --note-sheet-page-list-border-color | This variable changes the border color of the page list panel. |
| --note-sheet-page-list-page-hover-bg-color | This variable changes the background color of a page when it is hovered or the currently active page. |
Predefined Calendar Picker
These are all the variables associated with changing how the predefined calendar chooser looks.
| CSS Variable | Description |
|---|---|
| --pre-cal-color | This variable changes the text color of a predefined calendar. |
| --pre-cal-border-color | This variable changes the border color of a predefined calendar. |
| --pre-cal-border-hover-color | This variable changes the border color of a predefined calendar when that calendar is hovered. |
| --precal-hover-color | This variable changes the text color of a predefined calendar when that calendar is hovered. |
Progress Bar
These are all te variables associated with changing how the progress bar looks.
| CSS Variable | Description |
|---|---|
| --progress-bar-bg-color | This variable changes background color for the unfilled portion of the progress bar. |
| --progress-bar-border-color | This variable changes border color for the progress bar. |
| --progress-bar-fill-color | This variable changes background color for the filled portion of the progress bar. |
ProseMirror
These are all the variables associated with changing how the ProseMirror text editor looks within Note Sheets for Simple Calendar.
| CSS Variable | Description |
|---|---|
| --editor-color | This variable changes the text color for the editor. |
| --editor-menu-bg-color | This variable changes background color of the editor menu. |
| --editor-menu-control-bg-color | This variable changes background color of buttons/selects in the editor menu. |
| --editor-menu-control-bg-hover-color | This variable changes background color of buttons/selects in the editor menu when hovered over. |
Scrollbar
These are all the variables associated with changing how the scrollbar looks within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --scrollbar-background-color | The background color of the scrollbar thumb. |
| --scrollbar-border-color | The border color of the scrollbar thumb. |
| --scrollbar-track-bg-color | The background color of the scrollbar track. |
| --scrollbar-track-border | The border CSS property for the scrollbar track. eg 1px solid green |
| --scrollbar-button-height | The height of the scrollbar buttons. |
| --scrollbar-button-bg-color | The background color of the scrollbar buttons. |
| --scrollbar-button-border | The border CSS property for the scrollbar buttons. eg 1px solid green |
Search Box
These are all the variables associated with changing how the search boxes look within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --search-box-placeholder-color | This variable changes the text color of placeholder text for the search box. |
| --search-box-color | This variable changes the text color for the search box. |
Side Drawer
These are all the variables associated with changing how side drawers (Note List, Search and Page List) look within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --side-drawer-color | The text color for the side drawers. |
| --side-drawer-bg-color | The background color of the side drawers. |
| --side-drawer-bg-image | The background image of the side drawers. Links to images need to be wrapped in url(''). Choose unset if no image is wanted. |
| --side-drawer-border-color | The border color of the side drawers. |
| --side-drawer-border-image | The border image of the side drawers. Links to images need to be wrapped in url(''). Choose unset if no image is wanted. |
Time Selector
These are all the variables associated with changing how the time selector, When choosing a date and time or just a time, looks in Simple Calendar.
| CSS Variable | Description |
|---|---|
| --time-selector-color | This variable changes the text color of the time selector. |
| --time-selector-input-bg-color | This variable changes the background color of the time selector. |
| --time-selector-input-border-color | This variable changes the border color for the time selector. |
| --time-selector-option-bg-even-color | This variable changes the background color for every even option in the time selector drop down. |
| --time-selector-option-hover-bg-color | This variable changes the background color for the options in the time selector drop down then they are hovered. |
Toggle
These are all the variables associated with changing how toggles look within Simple Calendar.
| CSS Variable | Description |
|---|---|
| --toggle-unchecked-image | The image to use when the toggle is considered unchecked/inactive. Links to images need to be wrapped in url(''). Choose unset if no image is wanted. |
| --toggle-checked-image | The image to use when the toggle is considered checked/active. Links to images need to be wrapped in url(''). Choose unset if no image is wanted. |
| --toggle-border-color | The border color for the toggle. |
| --toggle-checked-bg-color | The background color of the toggle when it is considered checked/active. |