docs-bug(Theming Angular Material): theme overrides vs css variables

[whynotavailable]

Documentation Feedback

There exists seemingly two ways to implement MDC (or MAT) tokens in scss. The first way is by directly using the variables. Such as this.

mat-toolbar {
  --mat-toolbar-container-background-color: #{mat.get-theme-color($my-theme, primary-container)};
  --mat-toolbar-container-text-color: #{mat.get-theme-color($my-theme, on-primary-container)};
}

The second way is to use the override mixins to generate the appropriate tokens (especially neat when the component uses both MDC and MAT tokens) like this.

mat-toolbar {
  @include mat.toolbar-overrides((
    container-background-color: mat.get-theme-color($my-theme, primary-container),
    container-text-color: mat.get-theme-color($my-theme, on-primary-container)
  ))
}

I can find no places where these override mixins are used or documented. Is there a preference towards one or the other?

Affected documentation page

https://material.angular.io/guide/theming#granular-customizations-with-css-custom-properties

[hhaasbroek]

please assign this one to me

[amysorto]

Closing since the docs site starting in v19 will have documentation for all the different componenent's override functions. This is a preview for button: https://next.material.angular.io/components/button/styling.

It is recommended to use the override function, but on that page if you need direct access to the system token it is listed there too if applicable.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}