Skip to main content
Version: 2.1.x

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 VariableDescription
--app-header-bg-colorThe application header background color.
--app-header-bg-imageThe application header background image. Links to images need to be wrapped in url(''). Choose unset if no image is wanted.
--app-header-colorThe application header text color.
--app-header-borderThe application header border css property.
--app-header-border-imageThe application header border image. Links to images need to be wrapped in url(''). Choose unset if no image is wanted.
--app-header-heightThe height of the application header. The height must include the units, rem is recommended.
--app-bg-colorThe applications body background color.
--app-bg-imageThe applications body background image. Links to images need to be wrapped in url(''). Choose unset if no image is wanted.
--app-borderThe applications body border css property.
--app-border-imageThe applications body border image. Links to images need to be wrapped in url(''). Choose unset if no image is wanted.
--app-colorThe 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 VariableDescription
--section-bg-colorThe background color for the section.
--section-border-colorThe border color for the section.
--section-colorThe text color for the section.

Buttons

These are all the variables associated with changing how buttons look within Simple Calendar.

CSS VariableDescription
--btn-bg-imageA background image to apply to all buttons. Links to images need to be wrapped in url(''). Choose unset if no image is wanted.
--btn-borderThe border CSS property for the buttons. eg 1px solid green
--btn-border-imageThe 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-colorThe border color that should be used for grey buttons.
--btn-grey-bg-colorThe background color that should be used for grey buttons.
--btn-grey-colorThe text color that should be used for grey buttons.
--btn-grey-bg-hover-colorThe background color that should be used for grey buttons when they are hovered.
--btn-grey-disabled-bg-colorThe background color that should be used for disabled grey buttons.
--btn-primary-border-colorThe border color that should be used for the primary color buttons.
--btn-primary-bg-colorThe background color that should be used for the primary color buttons.
--btn-primary-colorThe text color that should be used for the primary color buttons.
--btn-primary-bg-hover-colorThe background color that should be used for the primary color buttons when they are hovered.
--btn-primary-disabled-bg-colorThe background color that should be used for disabled the primary color buttons.
--btn-secondary-border-colorThe border color that should be used for the secondary color buttons.
--btn-secondary-bg-colorThe background color that should be used for the secondary color buttons.
--btn-secondary-colorThe text color that should be used for the secondary color buttons.
--btn-secondary-bg-hover-colorThe background color that should be used for the secondary color buttons when they are hovered.
--btn-secondary-disabled-bg-colorThe background color that should be used for disabled the secondary color buttons.
--btn-tertiary-border-colorThe border color that should be used for the tertiary color buttons.
--btn-tertiary-bg-colorThe background color that should be used for the tertiary color buttons.
--btn-tertiary-colorThe text color that should be used for the tertiary color buttons.
--btn-tertiary-bg-hover-colorThe background color that should be used for the tertiary color buttons when they are hovered.
--btn-tertiary-disabled-bg-colorThe background color that should be used for disabled the tertiary color buttons.
--btn-delete-border-colorThe border color that should be used for the delete color buttons.
--btn-delete-bg-colorThe background color that should be used for the delete color buttons.
--btn-delete-colorThe text color that should be used for the delete color buttons.
--btn-delete-bg-hover-colorThe background color that should be used for the delete color buttons when they are hovered.
--btn-delete-disabled-bg-colorThe background color that should be used for disabled the delete color buttons.
--btn-save-border-colorThe border color that should be used for the save color buttons.
--btn-save-bg-colorThe background color that should be used for the save color buttons.
--btn-save-colorThe text color that should be used for the save color buttons.
--btn-save-bg-hover-colorThe background color that should be used for the save color buttons when they are hovered.
--btn-save-disabled-bg-colorThe 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 VariableDescription
--cal-weekend-bg-colorThe background color for days that are considered rest days/the weekend.
--cal-day-border-colorThe border color of days in the calendar.
--cal-day-hover-colorThe color of a day in the calendar when it is hovered over.
--cal-day-current-bg-colorThe background color for the current day.
--cal-day-current-box-shadow-colorThe box shadow color for the current day.
--cal-day-current-hover-bg-colorThe background color for the current day when it is hovered over.
--cal-day-selected-bg-colorThe background color for the selected day.
--cal-day-selected-box-shadow-colorThe box shadow color for the selected day.
--cal-day-selected-hover-bg-colorThe background color for the selected day when it is hovered over.
--cal-note-indicator-bg-colorThe background color for the indicator that shows there are notes on a specific day.
--cal-note-reminder-indicator-bg-colorThe background color for the indicator that shows there are notes on a specific day the players wants to be reminded about.
--cal-note-indicator-colorThe text color for the note indicators.
--cal-moon-group-bg-colorThe 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-colorThe 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-colorThe 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-shadowThe 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 VariableDescription
--cal-list-colorThe text color to use for the calendar list.
--cal-list-active-border-colorThe border color of the currently active calendar in the list.
--cal-list-active-bg-colorThe background color of the currently active calendar in the list.
--cal-list-visible-bg-colorThe background color of the calendar currently being viewed, if different from the active calendar, in the list of calendars.
--cal-list-bg-hover-colorThe 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 VariableDescription
--clock-started-colorThe color of the clock icon when the real time clock is running.
--clock-stopped-colorThe color of the clock icon when the real time clock is stopped.
--clock-paused-colorThe 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 VariableDescription
--config-menu-heading-colorThe text color of the headings in the configuration dialogs left menu.
--config-menu-item-border-colorThe border color of the divider between items in the menu.
--config-menu-item-colorThe text color of all items in the menu.
--config-menu-item-hover-colorThe text color of items in the menu when they are hovered over.
--config-menu-item-hover-bg-colorThe background color of items in the menu when they are hovered over.
--config-menu-cal-settings-bg-colorThe background color of the menu section specific to the selected calendars settings.
--config-menu-cal-selector-bg-colorThe background color for the calendar selector dropdown.
--config-menu-cal-selector-hover-bg-colorThe background color for the calendar selector dropdown when an item is hovered over.
--config-menu-cal-selector-colorThe text color for the calendar selector dropdown.
--config-menu-cal-selector-hover-colorThe 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 VariableDescription
--context-menu-colorThe text color for the context menu.
--context-menu-border-colorThe border color for the context menu.
--context-menu-bg-colorThe background color for the context menu.
--context-menu-action-hover-colorThe color of actionable items (links, buttons, side menus) in the context menu when hovered over.
--context-menu-divider-colorThe color of the divider line within the context menu.

Font

These are all the variables associated with changing the fonts within Simple Calendar.

CSS VariableDescription
--font-familyThis variable changes the font that is used throughout Simple Calendar.
--heading-font-familyThis 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 VariableDescription
--form-group-bg-colorThis variable changes the form group background color. These are the boxes around each setting in the configuration dialog.
--form-group-bg-hover-colorThis variable changes the form group background color when hovered over. These are the boxes around each setting in the configuration dialog.
--form-group-border-colorThis variable changes the form group border color. These are the boxes around each setting in the configuration dialog.
--form-group-label-colorThis variable changes the form group setting name color. These are the boxes around each setting in the configuration dialog.
--form-group-help-colorThis variable changes the form group description/help text color. These are the boxes around each setting in the configuration dialog.
--form-group-input-bg-colorThis variable changes the background color for the compact form group. These are used on the note sheet edit view.
--form-group-input-border-colorThis variable changes the border color for the compact form group. These are used on the note sheet edit view.
--form-group-input-colorThis variable changes the text color for the compact form group. These are used on the note sheet edit view.
--form-group-help-icon-colorThis 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 VariableDescription
--heading-border-colorThis variable changes the color of the bottom border for headings.
--about-heading-border-colorTis 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 VariableDescription
--input-bg-colorThis variable changes the background color of all inputs (text, numeric select, etc).
--input-border-colorThis variable changes the border color of all inputs (text, numeric select, etc).
--input-colorThis variable changes the text color of all inputs (text, numeric select, etc).

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 VariableDescription
--link-colorThis variable changes the color of hyper links.
--link-hover-colorThis variable changes the color of hyper links when they are hovered over.
--entity-link-bg-colorThis variable changes the background color of entity links.
--entity-link-border-colorThis variable changes the border color of entity links.
--entity-link-icon-colorThis variable changes the color of the icon shown with the entity link.
--entity-link-icon-hover-colorThis 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 VariableDescription
--message-colorThis variable changes the text color of all messages.
--message-warn-bg-colorThis variable changes the warning message background color.
--message-warn-border-colorThis variable changes the warning message border color.
--message-success-bg-colorThis variable changes the success message background color.
--message-success-border-colorThis variable changes the success message border color.
--message-info-bg-colorThis variable changes the info message background color.
--message-info-border-colorThis variable changes the info message border color.
--message-danger-bg-colorThis variable changes the danger message background color.
--message-danger-border-colorThis 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 VariableDescription
--multi-select-option-bg-colorThis variable changes the multi selects option background color.
--multi-select-option-bg-hover-colorThis variable changes the multi selects option background color when hovered.
--multi-select-option-border-colorThis variable changes the multi selects option border color.
--multi-select-option-colorThis variable changes the multi selects option text color.
--multi-select-disabled-bg-colorThis variable changes the multi selects disabled option background color.
--multi-select-disabled-colorThis 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 VariableDescription
--note-cat-colorThis variable changes the default category text color.
--note-cat-bg-colorThis variable changes the default category background color.
--note-cat-box-shadow-colorThis variable changes the category box shadow color.
--note-cat-secondary-bg-colorThis variable changes the category background color for ones using the secondary color.
--note-cat-secondary-colorThis variable changes the category text color for ones using the secondary color.
--note-cat-success-bg-colorThis variable changes the category background color for ones using the success color.
--note-cat-success-colorThis variable changes the category text color for ones using the success color.
--note-cat-danger-bg-colorThis variable changes the category background color for ones using the danger color.
--note-cat-danger-colorThis variable changes the category text color for ones using the danger color.
--note-cat-reminder-bg-colorThis variable changes the category background color for the reminder indicator.
--note-cat-reminder-colorThis 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 VariableDescription
--note-list-note-border-colorThis variable changes the border color of the note list.
--note-list-note-bg-hover-colorThis variable changes the background color of a note in the note list when the note is hovered.
--note-list-note-hover-colorThis variable changes the text color of a note in the note list when the note is hovered.
--note-list-note-dragger-bg-colorThis variable changes the background color of the dragger indicator.
--note-list-note-dragger-box-shadow-colorThis 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 VariableDescription
--note-sheet-page-list-border-colorThis variable changes the border color of the page list panel.
--note-sheet-page-list-page-hover-bg-colorThis 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 VariableDescription
--pre-cal-colorThis variable changes the text color of a predefined calendar.
--pre-cal-border-colorThis variable changes the border color of a predefined calendar.
--pre-cal-border-hover-colorThis variable changes the border color of a predefined calendar when that calendar is hovered.
--precal-hover-colorThis 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 VariableDescription
--progress-bar-bg-colorThis variable changes background color for the unfilled portion of the progress bar.
--progress-bar-border-colorThis variable changes border color for the progress bar.
--progress-bar-fill-colorThis 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 VariableDescription
--editor-colorThis variable changes the text color for the editor.
--editor-menu-bg-colorThis variable changes background color of the editor menu.
--editor-menu-control-bg-colorThis variable changes background color of buttons/selects in the editor menu.
--editor-menu-control-bg-hover-colorThis 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 VariableDescription
--scrollbar-background-colorThe background color of the scrollbar thumb.
--scrollbar-border-colorThe border color of the scrollbar thumb.
--scrollbar-track-bg-colorThe background color of the scrollbar track.
--scrollbar-track-borderThe border CSS property for the scrollbar track. eg 1px solid green
--scrollbar-button-heightThe height of the scrollbar buttons.
--scrollbar-button-bg-colorThe background color of the scrollbar buttons.
--scrollbar-button-borderThe border CSS property for the scrollbar buttons. eg 1px solid green

These are all the variables associated with changing how the search boxes look within Simple Calendar.

CSS VariableDescription
--search-box-placeholder-colorThis variable changes the text color of placeholder text for the search box.
--search-box-colorThis 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 VariableDescription
--side-drawer-colorThe text color for the side drawers.
--side-drawer-bg-colorThe background color of the side drawers.
--side-drawer-bg-imageThe 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-colorThe border color of the side drawers.
--side-drawer-border-imageThe 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 VariableDescription
--time-selector-colorThis variable changes the text color of the time selector.
--time-selector-input-bg-colorThis variable changes the background color of the time selector.
--time-selector-input-border-colorThis variable changes the border color for the time selector.
--time-selector-option-bg-even-colorThis variable changes the background color for every even option in the time selector drop down.
--time-selector-option-hover-bg-colorThis 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 VariableDescription
--toggle-unchecked-imageThe 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-imageThe 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-colorThe border color for the toggle.
--toggle-checked-bg-colorThe background color of the toggle when it is considered checked/active.