Blokks

Change your schedule colors

You can change any color used in the embed. The preferred and easiest way to apply your own styling is to use CSS custom properties, or CSS variables. CSS variables are supported by all modern browsers.

The syntax for CSS variables is pretty straightforward:

:root {
  --blokks-theme-color: rebeccapurple;
}

In the above example --blokks-theme-color is a Blokks defined property with a value of rebeccapurple. Adding the above code to your page will change the main color of the embed to rebeccapurple.

Note: all CSS variables are prefixed with --blokks. Also, CSS variables are case sensitive, so --blokks-theme-color and --Blokks-Theme-Color are different.

To get a list of all properties, right click anywhere on your page, open the Developer tools by clicking Inspect and select the <html> tag:

A complete list of colors that you can change with CSS variables:

Background color Description
--blokks-theme-color The theme color is used for favorites, hovers, highlighted text and titles. The default value is #2e8cd2.
--blokks-default-background-color The background-color used by the embed. The default value is #fff.
--blokks-dashboard-background-color The background-color used for the Dashboard. The default value is #33363b.
--blokks-time-indicator-background-color The background-color used for the Time Indicator. The default value is #33363b.
--blokks-modal-background-color The background-color used for modals like the Activity Details. The default value is #fff.
--blokks-image-background-color The background-color used when a Poster Image is not yet loaded. The default value is #33363b.
--blokks-dimmed-background-color The background-color used when an activity does not match the category selected with the Category Filter. The default value is #abb1bc.
Text color Description
--blokks-default-text-color The default text color. The default value is #33363b.
--blokks-light-text-color The light text color is used in the schedule. The default value is #fff.
--blokks-dimmed-text-color Dimmed text color is used for metadata and when activities have ended. The default value is #989da8.
Misc color Description
--blokks-stroke-color The color that is used for button borders. The default value is #989da8.
--blokks-default-icon-color Default fill color used for icons. The default value is #33363b.
--blokks-light-icon-color Light fill color used for icons on darker backgrounds. The default value is #abb1bc.