ICS Calendar CSS Variables

ICS Calendar and ICS Calendar Pro use a set of CSS variables to define colors and various other properties used within the plugin.

You can change the values of these variables in your own theme CSS to modify some aspects of the calendar appearance without having to use the inspector to find specific CSS selectors.

Variable Scope

CSS variables are given specific scope. Commonly :root { } is used, for the variable to apply universally.

ICS Calendar does not use :root { }. In order to avoid inadvertently affecting styles outside of ICS Calendar’s own output, the scope for ICS Calendar CSS variables is .ics-calendar, .r34ics_lightbox { }. All variable overrides should be placed inside the curly braces with this scope. For example:

.ics-calendar, .r34ics_lightbox {
	--r34ics--color--black: #000000;
	--r34ics--color--darkgray: #555555;
}

Custom CSS can go in your site theme’s CSS file, or in the Customizer under Additional CSS.

The tables below describe the available CSS variables, their purpose, and their default values.

Colors

ICS Calendar color variables sometimes deviate slightly from the HTML colors their names share. When they are the same, the named color is used as the default value. (The named colors such as gainsboro are true neutrals; ICS Calendar shifts these to slightly “cool” grays.)

Selector Properties

Introduced in ICS Calendar 11.5.15 (and ICS Calendar Pro 5.10.9), these variables apply to specific selectors, allowing you to customize your calendar appearance to a greater extent than simply changing the values of the color variables. Most of these variables reference other color variables, or occasionally consist of a color variable plus dimensions.

ICS Calendar Pro

These variables are used in ICS Calendar Pro only.