Color Others
Styles

Text color (theme_color)

MDC Web includes a theming system designed to make it easy to change your application's colors. It provides multiple options for implementing themes, allowing for maximum flexibility.

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>

Background color (theme_bg_color)

MDC Web includes a theming system designed to make it easy to change your application's colors. It provides multiple options for implementing themes, allowing for maximum flexibility.

Primary (mdc-theme--primary-bg)

Secondary (mdc-theme--secondary-bg)

Surface (mdc-theme--surface)

Background (mdc-theme--background)
<p class="mdc-theme--primary-bg mdc-theme--text-primary-on-dark">Primary (mdc-theme--primary-bg)</p> <p class="mdc-theme--secondary-bg mdc-theme--on-secondary">Secondary (mdc-theme--secondary-bg)</p> <p class="mdc-theme--surface">Surface (mdc-theme--surface)</p> <p class="mdc-theme--background">Background (mdc-theme--background)</p>

Typography (typography)

Material Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.

Headline 1. (mdc-typography--headline1)

Headline 2 (mdc-typography--headline2)

Headline 3 (mdc-typography--headline3)

Headline 4 (mdc-typography--headline4)

Headline 5 (mdc-typography--headline5)

Headline 6 (mdc-typography--headline6)

Subtitle 1 (mdc-typography--subtitle1)

Subtitle 2 (mdc-typography--subtitle2)

Body 1 (mdc-typography--body1)

Body 2 (mdc-typography--body2)

Caption (mdc-typography--caption)

Button (mdc-typography--button)

Overline (mdc-typography--overline)
<p class="mdc-typography--headline1">Headline 1. (mdc-typography--headline1)</p> <p class="mdc-typography--headline2">Headline 2 (mdc-typography--headline2)</p> <p class="mdc-typography--headline3">Headline 3 (mdc-typography--headline3)</p> <p class="mdc-typography--headline4">Headline 4 (mdc-typography--headline4)</p> <p class="mdc-typography--headline5">Headline 5 (mdc-typography--headline5)</p> <p class="mdc-typography--headline6">Headline 6 (mdc-typography--headline6)</p> <p class="mdc-typography--subtitle1">Subtitle 1 (mdc-typography--subtitle1)</p> <p class="mdc-typography--subtitle2">Subtitle 2 (mdc-typography--subtitle2)</p> <p class="mdc-typography--body1">Body 1 (mdc-typography--body1)</p> <p class="mdc-typography--body2">Body 2 (mdc-typography--body2)</p> <p class="mdc-typography--caption">Caption (mdc-typography--caption)</p> <p class="mdc-typography--button">Button (mdc-typography--button)</p> <p class="mdc-typography--overline">Overline (mdc-typography--overline)</p>

Elevation (elevation)

For practical reason, only fibonacci values are proposed here.

Elevation 0 (mdc-elevation--z0)

Elevation 1 (mdc-elevation--z1)

Elevation 2 (mdc-elevation--z2)

Elevation 3 (mdc-elevation--z3)

Elevation 5 (mdc-elevation--z5)

Elevation 8 (mdc-elevation--z8)

Elevation 13 (mdc-elevation--z13)

Elevation 21 (mdc-elevation--z21)
<p class="mdc-elevation--z0">Elevation 0 (mdc-elevation--z0)</p> <p class="mdc-elevation--z1">Elevation 1 (mdc-elevation--z1)</p> <p class="mdc-elevation--z2">Elevation 2 (mdc-elevation--z2)</p> <p class="mdc-elevation--z3">Elevation 3 (mdc-elevation--z3)</p> <p class="mdc-elevation--z5">Elevation 5 (mdc-elevation--z5)</p> <p class="mdc-elevation--z8">Elevation 8 (mdc-elevation--z8)</p> <p class="mdc-elevation--z13">Elevation 13 (mdc-elevation--z13)</p> <p class="mdc-elevation--z21">Elevation 21 (mdc-elevation--z21)</p>