The theme defines a set of CSS custom properties you can use to apply a consistent color palette across your application.
If you are not importing any component themes, and want to use these colors, you need to import the style module explicitly.
Include the color style module to easily apply basic colors for any style scope (e.g. app's entrypoint for global scope). It will set the background, text and link colors and enable you to use the dark palette colors inside that style scope.
The dark color palette is available when you include the main style module.
You can apply the theme="dark" attribute on any element inside the style scope where you include the main style module.
If you include the main style module in the global scope (i.e. app's entrypoint), you can apply the theme="dark" attribute on the html element directly, to make the whole page adopt the dark color palette.
This example doesn’t work in Internet Explorer 11 or EdgeHTML 14. Read the browser compatibility instructions if you need to support those browsers.
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.
Usually a red color, used for things like error indicators, error messages and buttons that can cause permanent data loss.
The following text colors have the desired contrast with the main background color.
Note, that --material-primary-text-color is not necessarily the same as --material-primary-color. Use the main color for backgrounds and the “text” version for text.
The same applies for the “error” and “success” colors as well.
The “disabled” text color does not have enough contrast by default to meet WCAG 2.0 AA level requirements (3:1). Only use it for text which is not crucial for the end user to see.