Valo

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.

For example, if you want to apply the dark colors for the whole app, include it in the global scope (e.g. index.html). Or if you want to apply the dark colors inside a shadow root, include it inside that shadow DOM template.

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.

---

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