Material

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 modules

If you are not importing any component themes, and want to use these colors, you need to import the style module explicitly.

Style module

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.

Dark palette

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.

Browser compatibility

This example doesn’t work in Internet Explorer 11 or EdgeHTML 14. Read the browser compatibility instructions if you need to support those 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.

Error

Usually a red color, used for things like error indicators, error messages and buttons that can cause permanent data loss.

Text

The following text colors have the desired contrast with the main background color.

Separate text colors

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.

Accessibility

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.

Custom properties

Background
--material-background-color
--material-secondary-background-color
Text/foreground
--material-body-text-color
--material-secondary-text-color
--material-disabled-text-color
--material-primary-text-color
--material-error-text-color
Primary
--material-primary-color
--material-primary-contrast-color
Error
--material-error-color