Color Others

Text color (theme_color)

Primary (mdc-theme--primary)

On primary (mdc-theme--on-primary)

Secondary (mdc-theme--secondary)

On secondary (mdc-theme--on-secondary)

Error (mdc-theme--error)

On error (mdc-theme--on-error)

On surface. (mdc-theme--on-surface)

Primary on background (mdc-theme--text-primary-on-background)

Secondary on background (mdc-theme--text-secondary-on-background)

Hint on background (mdc-theme--text-hint-on-background)

Disabled on background (mdc-theme--text-disabled-on-background)

Icon on background (mdc-theme--text-icon-on-background)

Primary on light (mdc-theme--text-primary-on-light)

Secondary on light (mdc-theme--text-secondary-on-light)

Hint on light (mdc-theme--text-hint-on-light)

Disabled on light (mdc-theme--text-disabled-on-light)

Icon on light (mdc-theme--text-icon-on-light)

Primary on dark (mdc-theme--text-primary-on-dark)

Secondary on dark (mdc-theme--text-secondary-on-dark)

Hint on dark (mdc-theme--text-hint-on-dark)

Disabled on dark (mdc-theme--text-disabled-on-dark)

Icon on dark (mdc-theme--text-icon-on-dark)

<p class="mdc-theme--primary">Primary (mdc-theme--primary)</p> <p class="mdc-theme--on-primary mdc-theme--primary-bg">On primary (mdc-theme--on-primary)</p> <p class="mdc-theme--secondary">Secondary (mdc-theme--secondary)</p> <p class="mdc-theme--on-secondary mdc-theme--secondary-bg">On secondary (mdc-theme--on-secondary)</p> <p class="mdc-theme--error">Error (mdc-theme--error)</p> <p class="mdc-theme--on-error mdc-theme--primary-bg">On error (mdc-theme--on-error)</p> <p class="mdc-theme--on-surface">On surface. (mdc-theme--on-surface)</p> <p class="mdc-theme--text-primary-on-background">Primary on background (mdc-theme--text-primary-on-background)</p> <p class="mdc-theme--text-secondary-on-background">Secondary on background (mdc-theme--text-secondary-on-background)</p> <p class="mdc-theme--text-hint-on-background">Hint on background (mdc-theme--text-hint-on-background)</p> <p class="mdc-theme--text-disabled-on-background">Disabled on background (mdc-theme--text-disabled-on-background)</p> <p class="mdc-theme--text-icon-on-background">Icon on background (mdc-theme--text-icon-on-background)</p> <p class="mdc-theme--text-primary-on-light">Primary on light (mdc-theme--text-primary-on-light)</p> <p class="mdc-theme--text-secondary-on-light">Secondary on light (mdc-theme--text-secondary-on-light)</p> <p class="mdc-theme--text-hint-on-light">Hint on light (mdc-theme--text-hint-on-light)</p> <p class="mdc-theme--text-disabled-on-light">Disabled on light (mdc-theme--text-disabled-on-light)</p> <p class="mdc-theme--text-icon-on-light">Icon on light (mdc-theme--text-icon-on-light)</p> <p class="mdc-theme--text-primary-on-dark mdc-theme--primary-bg">Primary on dark (mdc-theme--text-primary-on-dark)</p> <p class="mdc-theme--text-secondary-on-dark mdc-theme--primary-bg">Secondary on dark (mdc-theme--text-secondary-on-dark)</p> <p class="mdc-theme--text-hint-on-dark mdc-theme--primary-bg">Hint on dark (mdc-theme--text-hint-on-dark)</p> <p class="mdc-theme--text-disabled-on-dark mdc-theme--primary-bg">Disabled on dark (mdc-theme--text-disabled-on-dark)</p> <p class="mdc-theme--text-icon-on-dark mdc-theme--primary-bg">Icon on dark (mdc-theme--text-icon-on-dark)</p>