Material Color
The theme defines a set of CSS custom properties you can use to apply a consistent color palette across your application.
Text
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 (4.5:1). Only use it for text which is not crucial for the end user to see.
- --material-body-text-color:
rgba(0, 0, 0, 0.87) - --material-secondary-text-color:
rgba(0, 0, 0, 0.54) - --material-disabled-text-color:
rgba(0, 0, 0, 0.38) - --material-primary-text-color:
#6200ee - --material-error-text-color:
#b00020
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.
- --material-primary-color:
#6200ee - --material-primary-contrast-color:
#fff
Error
Usually a red color, used for things like error indicators, error messages and buttons that can cause permanent data loss.
- --material-error-color:
#b00020
Examples
Primary
<span class="primary">Text</span>
<custom-style>
<style>
.primary {
background-color: var(--material-primary-color);
color: var(--material-primary-contrast-color);
}
</style>
</custom-style>Error
<span class="error"></span>
<custom-style>
<style>
.error {
background-color: var(--material-error-color);
}
</style>
</custom-style>Text
<div class="base">
<div class="body-text">Normal text</div>
<div class="secondary-text">Secondary text</div>
<div class="disabled-text">Disabled text</div>
<div class="primary-text">Primary text</div>
<div class="error-text">Error text</div>
</div>
<custom-style>
<style>
.body-text {
color: var(--material-body-text-color);
}
.secondary-text {
color: var(--material-secondary-text-color);
}
.disabled-text {
color: var(--material-disabled-text-color);
}
.primary-text {
color: var(--material-primary-text-color);
}
.error-text {
color: var(--material-error-text-color);
}
</style>
</custom-style>A6959980-9F79-4198-9CB5-E91429295BFF