Color | Settings | Vanilla documentation

These guidelines are the framework upon which we have built our system for how color is used in Vanilla, we use a fairly neutral color palette along with a traffic light palette.

$color-x-light
#fff

$color-light
#f7f7f7

$color-mid-x-light
#e5e5e5

$color-mid-light
#d9d9d9

$color-mid-dark
#666

$color-dark
#111

$color-x-dark
#000

$color-brand
#e95420

$color-negative
#c7162b

$color-caution
#f99b11

$color-positive
#0e8420

$color-information
#24598f

$color-link
#06c

$color-accent
#0f95a1

Accessibility

It’s important for us to meet all web accessibility standards. Vanilla encourages meeting the minimum contrast ratios specified by WCAG 2.2 Level AA for text, icons and background colors.

Do:

Use a minimum contrast ratio of 4.5 for normal text and UI components.

Don't:

Use low-contrast text and background combinations.

Color theming

Vanilla (since version 4.8.0) supports client-side theming based on CSS properties (instead of previously used build-time SCSS based theming).

See our themes documentation for more details on how to use the new theming system.

Setting the default color theme per element / component Deprecated

Deprecated

Setting default theme via SCSS variables is now deprecated. Use the new theming class names instead.

Starting with the 2.3.0 release, Vanilla framework introduces a theming mechanism. The current default for all components is referred to as the light theme. A subset of elements and components now offer a dark theme:

Checkbox and radio form inputs
Horizontal rule element <hr />
Contextual menu
Lists / Divider
Lists / Middot
Navigation
Side navigation
Search box

Element / Component	Variable	Default value
checkbox	`$theme-default-forms`	`light`
radio	`$theme-default-forms`	`light`
hr	`$theme-default-hr`	`light`
Contextual menu	`$theme-default-p-contextual-menu`	`light`
Lists / Divider	`$theme-default-p-divider`	`light`
Lists / Middot	`$theme-default-p-inline-list--middot`	`light`
Navigation	`$theme-default-nav`	`light`
Side navigation	`$theme-default-p-side-navigation`	`light`
Search box	`$theme-default-p-search-box`	`light`

The _settings_themes.scss file contains a list of variables that used to define the default theme for a subset of elements and components. Starting with Vanilla 4.8.0 this type of theming is deprecated.

With new theming mechanism based on CSS custom properties, the default theme for all components remains light. To change the theme of given element and all its children, add is-dark or is-light class to it.

Future releases will expand this list to include all elements and components.