Introduction to Colour Palettes

Using colour in a consistent and accessible way strengthens the Laurier brand and enhances the user experience with repeatable patterns. CSS custom properties (variables) are helpful in accomplishing this and makes it possible to define interface colours in one place instead of multiple places throughout the codebase.

Controlling Colour on Templates

Templates with minimal options created for specific types of content do not require editors to modify colors that appear on the page. However, templates that serve many types of content benefit from having editors choose colors for sections to help visually break them up.

When considering multiple colour themes, palettes within each theme, and user preferences, this can be tricky. For example:

1. A web editor creates a page with the feature colour theme. This theme has three palettes.
2. One of three palettes is assigned to each section of the page.
3. User A sees the page with those palettes.
4. User B has prefers-dark-mode enabled and instead sees the sections with their dark mode equivalent colours.

The hierarchy from top to bottom would be mode -> theme -> palette

Palette Framework

Setup

Think of colour palettes cascading the same way CSS does.

To set this up, we need to define brand colours -> define colour modes -> create themed palettes.

The following is an overview of what this looks like. Head to the insert link to palette code here for official code.

Define Brand Colours at the Root

/* include any colour you will need to use on the site */
:root {
    --purple: #330072;
    --gold: #f2a900;
    --white: #fff;
    --grey-900: #474747;
    ...
}

Create Palettes Using Root Variables

/** 
** all palettes should contain the same properties
** values should reference brand colour variables above
** CSS selector name should begin with the theme name
**/

/* adding the root here is good for fallback */
:root, .default-palette-white {  
    --background-color: var(--white);
    --text-color: var(--grey-900);
    --accent: var(--gold);
    ...
}

/* theme name: default */
.default-palette-purple {
    --background-color: var(--purple);
    --text-color: var(--white);
    --accent: var(--gold);
    ...
}

/* theme name: feature */
.feature-palette-green {
    --background-color: var(--purple);
    --text-color: var(--white);
    --accent: var(--gold);
    ...
}

Create Modes

/* if user switches the system settings to dark mode */
/* this media query will be applied */
@media (prefers-color-scheme: dark) {
:root, .default-palette-white {  
    --background-color: var(--grey-900);
    --text-color: var(--white);
    --accent: var(--gold);
    ...
}
}

Element CSS

/* use the palette variables as values for elements */
div.section {
 background-color: #fff; /* fallback */
 color: #444; /* fallback */
 background-color: var(--background-color);
 color: var(--text-color);
 ...
}

Now when one of the palettes is added as a class (div class=“section default-palette”) it will inherit the appropriate colour palette.