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
It’s important for us to meet all web accessibility standards. Vanilla encourages meeting the minimum contrast ratios specified by WCAG 2.1 Level AA for text, icons and background colors.
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:
<hr />| 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.