Material Color

The theme defines a set of CSS custom properties you can use to apply a consistent color palette across your application.

Background

--material-background-color: #fff

--material-secondary-background-color: #f5f5f5

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

HTML

<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

HTML

<span class="error"></span>
<custom-style>
  <style>
    .error {
      background-color: var(--material-error-color);
    }
  </style>
</custom-style>

Text

HTML

<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>