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 element themes, and want to use these colors, you need to import the style module explicitly.
Light and dark themes
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.
Browser compatibility
The previous example doesn’t work in Internet Explorer 11 or Edge 14. Read the compatibility instructions how to make the dark colors 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.
10%50%100%
Grayscale
These colors form the foundation for your application colors. The grayscale colors consist of 10 different shades of “black” and “white” (they are not necessarily pure grayscale, but tinted slightly with the theme primary color), each with a degree of transparency.
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”.
5%10%20%30%40%50%60%70%80%90%100%
Tint
5%10%20%30%40%50%60%70%80%90%100%
Shade
5%10%20%30%40%50%60%70%80%90%100%
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.
10%50%100%
Success
Usually a green color, used for success messages and buttons that complete a certain task. An accompanying contrast color is also defined.
10%50%100%
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.