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.
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”, 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”.
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.
Header text
Normal text
Secondary text
Tertiary text
Disabled text
Primary text
Error text
Success text
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.