Colour Switcher
WIP
Matching the colours of an image to the NFB palette
One of the characteristic of the Balmoral Style is having interface element that match the colour of images. For example, the “Eyecon” in the background of the NFB.ca homepage always match the (dominant) colour of the main feature image.
How it works: We analyse the color of an image to extract the dominant colour then this colour is match to the closest colour from the NFB Palette.
Here is how to change the colour of a css property so that it matches the colour of any image.
First, add the .is-switch-color class and add the following parameters:
| property | values | description |
|---|---|---|
data-switchColorIdImg |
The id of the image we want to use to define the colour | |
data-switchColorCssProperty |
color, background-color |
The css property to change |
data-switchColorType |
brandColor, dominantColor |
The colour selection mode |
data-switchColorTextElement |
HEX Colour | optional Force a specific colour for overlay texts |
<img src="myImage.jpg" id="myImageID">
<button type="button" class="btn is-switch-color " data-switchcoloridimg="myImageID" data-switchcolorcssproperty="background-color" data-switchcolortype="brandColor">Matching color button!</button>
Requirements
This functionality needs the following scripts: