The theme defines a set of CSS custom properties you can use to apply a consistent color palette across your application.
The default colors are WCAG 2.0 compliant (at least 3:1 contrast ratio) unless otherwise noted.
If you are not importing any component themes, and want to use these colors, you need to import the style module explicitly.
The base color is used as the main background color for the theme. The grayscale colors are designed to be used on top of it, and the text colors are designed to have proper contrast with it.
The most prominent color in the theme. It is used to bring attention to certain elements in the interface. Accompanying text and contrast colors are also defined.
Usually a red color, used for error indicators, error messages and buttons that can cause permanent data loss. Accompanying text and contrast colors are also defined.
Usually a green color, used for success messages and buttons that complete a certain task. Accompanying text and contrast colors are also defined.
The --valo-success-color
does not have enough contrast by default to meet WCAG 2.0 AA level requirements (3:1). Use hsl(144, 82%, 38%)
if you want to be AA level compliant.
The --valo-success-text-color
is compliant by default.
These colors form the foundation for your application colors. The grayscale colors consist of 11 different shades of “black” and “white”, each with a degree of transparency.
The tint and shade colors not always pure grayscale by default, 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.
The default text colors are tested to have enough contrast on top of the Base color and “Base + 5–20% Contrast color”. Avoid using a a higher Contrast color as a background color for any important content.
The contrast colors work automatically for both light and dark variations. For the light palette the shade colors are used, and for the dark palette the tint colors are used.
The following text colors have the desired contrast with the 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.
The “tertiary” and “disabled” text colors do not have enough contrast by default to meet WCAG 2.0 AA level requirements (3:1). Only use them for text which is not crucial for the end user to see.
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 palette, and another variation used for the dark palette.
You need to import and include the “valo-color” style module before you can use the dark palette. It needs to be imported in the same style scope where you want to apply the dark colors.
Apply the theme="dark"
attribute on the HTML element:
<html theme="dark">
<!-- The whole page/app will use the dark theme colors -->
</html>
You can apply the theme="dark"
attribute on any element inside the style scope where you include the style module:
The above 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.
The following elements, when you apply the theme="dark"
attribute for them, will also set their background color to the dark palette Base color.
var(--valo-primary-text-color)
You will see the light palette colors here on Internet Explorer 11 and Edge 14. See Browser compatibility for more info.
var(--valo-primary-text-color)