EvoToolkit - v3.7.2 (Changelog)


A collection of tools to interact with the $colors, $theme and $theme-shades objects which are used as part of EvoToolkits theming functionality. For the full breakdown of this process, please visit Configuring EvoToolkit.



Luke Harrison



Retrieve a $colors, $theme or $theme-shades hex colour code by passing its key.

If you pass true as a second parameter, it instead returns true if the colour exists and false if not.

.c-my-component {
	background-color: color('primary');

.c-my-component {
	@if(color('accent'), true)) {
		background-color: color('accent');

Set Color

Add or edit $colors values.

@include set-color((
	'green': #00ff00,
	'orange': #ffa500

Set Theme

Add or edit $theme values.

@include set-theme((
	'accent': #cccccc,
	'info': color('green')

Set Theme Shades

A 10% darker and 40% lighter shade are programatically generated for each $theme color. These are typically used for things like hover and focus colours.

For some colours, these defaults generate shades which are either too light or too dark. Using set-theme-shades you can set the percentages to something more suitable.

@include set-theme-shades((
	'info': (
		'dark': 5%,
		'light': 23%

Set Theme Dark Text Color

set-theme-dark-text-color allows you to specify if a $theme color should have light text when used with theme utility classes. In the example below, running this will mean u-theme-accent will also set the element's color property to very-dark instead of the default very-light.

@include set-theme-dark-text-color(('accent'));