Valo Theme source code

Colors

The theme defines a set of CSS custom properties you can use to apply a consistent color palette across your application.

Importing the style module

If you are not importing any component themes, and want to use these colors, you need to import the style module explicitly.

Light and dark themes

The theme has a dark color variation available out of the box.

Each color has two variations: the default variation which is used for the light theme, and another variation used for the dark theme.

You need to import and include the “valo-colors” style module before you can use the dark theme. It needs to be imported in the same style scope where you want to apply the dark colors.

1. Import and include the style module

2.a. Applying the dark theme for global scope

Apply the theme="dark" attribute on the HTML element:

<html theme="dark"> <!-- The whole page/app will use the dark theme colors --> </html>

2.b. Applying the dark theme for a single element scope

You can apply the theme="dark" attribute on any element inside the style scope where you include the style module:

Browser compatibility

This example doesn’t work in Internet Explorer 11 or Edge 14. Read the compatibility instructions how to make the dark colors, scoped inside an element, work in all supported browsers.

Primary

The most prominent color in the theme. It is used to bring attention to certain elements in the interface. An accompanying contrast color is also defined.

Grayscale

These colors form the foundation for your application colors. The grayscale colors consist of 10 different shades of “black” and “white”, each with a degree of transparency. They are not necessarily pure grayscale, but tinted slightly with the theme primary color

The grayscale colors are useful for dividing pages into sections with different backgrounds and borders, or used as text colors, for example.

Contrast

The theme defines properties for contrast colors that work automatically for both light and dark variations. For the light theme the contrast colors use “shades” and for the dark theme they use “tints”.

Tint

Shade

Error/danger

Usually a red color, used for error indicators, error messages and buttons that can cause permanent data loss. An accompanying contrast color is also defined.

Success

Usually a green color, used for success messages and buttons that complete a certain task. An accompanying contrast color is also defined.

Text

The following text colors are designed to have the desired contrast with the default background color, --valo-base-color.

Note, that --valo-primary-text-color is not necessarily the same as --valo-primary-color. The same applies for the “error” and “success” colors as well.


Custom properties

Light theme

Base color
--valo-base-color
Primary
--valo-primary-color-10pct
--valo-primary-color-50pct
--valo-primary-color
--valo-primary-contrast-color
Tint
--valo-tint-5pct
--valo-tint-20pct
--valo-tint-30pct
--valo-tint-40pct
--valo-tint-50pct
--valo-tint-60pct
--valo-tint-70pct
--valo-tint-80pct
--valo-tint-90pct
--valo-tint
Shade
--valo-shade-5pct
--valo-shade-20pct
--valo-shade-30pct
--valo-shade-40pct
--valo-shade-50pct
--valo-shade-60pct
--valo-shade-70pct
--valo-shade-80pct
--valo-shade-90pct
--valo-shade
Contrast
--valo-contrast-5pct
--valo-contrast-20pct
--valo-contrast-30pct
--valo-contrast-40pct
--valo-contrast-50pct
--valo-contrast-60pct
--valo-contrast-70pct
--valo-contrast-80pct
--valo-contrast-90pct
--valo-contrast
Error
--valo-error-color-10pct
--valo-error-color-50pct
--valo-error-color
--valo-error-contrast-color
Success
--valo-success-color-10pct
--valo-success-color-50pct
--valo-success-color
--valo-success-contrast-color
Text
--valo-header-text-color
--valo-body-text-color
--valo-secondary-text-color
--valo-tertiary-text-color
--valo-disabled-text-color
--valo-primary-text-color
--valo-error-text-color
--valo-success-text-color
--valo-link-color: var(--valo-primary-text-color)

Dark theme

Base color
--valo-base-color
Primary
--valo-primary-color-10pct
--valo-primary-color-50pct
--valo-primary-color
--valo-primary-contrast-color
Tint
--valo-tint-5pct
--valo-tint-20pct
--valo-tint-30pct
--valo-tint-40pct
--valo-tint-50pct
--valo-tint-60pct
--valo-tint-70pct
--valo-tint-80pct
--valo-tint-90pct
--valo-tint
Shade
--valo-shade-5pct
--valo-shade-20pct
--valo-shade-30pct
--valo-shade-40pct
--valo-shade-50pct
--valo-shade-60pct
--valo-shade-70pct
--valo-shade-80pct
--valo-shade-90pct
--valo-shade
Contrast
--valo-contrast-5pct
--valo-contrast-20pct
--valo-contrast-30pct
--valo-contrast-40pct
--valo-contrast-50pct
--valo-contrast-60pct
--valo-contrast-70pct
--valo-contrast-80pct
--valo-contrast-90pct
--valo-contrast
Error
--valo-error-color-10pct
--valo-error-color-50pct
--valo-error-color
--valo-error-contrast-color
Success
--valo-success-color-10pct
--valo-success-color-50pct
--valo-success-color
--valo-success-contrast-color
Text
--valo-header-text-color
--valo-body-text-color
--valo-secondary-text-color
--valo-tertiary-text-color
--valo-disabled-text-color
--valo-primary-text-color
--valo-error-text-color
--valo-success-text-color
--valo-link-color: var(--valo-primary-text-color)