docs-bug(ALL): No examples of how to apply theme html-element-wise

[alanpurple]

Documentation Feedback

there is no way to apply defined primary, secondary, error, etc color to components

for one, there is no example how to apply secondary or tertiary color to material button

Affected documentation page

https://material.angular.io/guide/theming

[shhdharmen]

@alanpurple are you looking for https://material.angular.io/guide/theming#context-specific-themes?

[color=primary] {
  @include mat.theme((
    color: mat.$cyan-palette,
  ));
}

[alanpurple]

@shhdharmen
That's just an overriding example of theme, what i meant was the M3 version of " " that was previously used easily

[alanpurple]

I think this is the only way

<button mat-button style="color:var(--mat-sys-error)">button</button>

[shhdharmen]

Using CSS directly may not be a good idea. You can follow any of the following approach:

1. Use mat.theme within a selector, like here
2. Use mat.theme-overrides within a selector, like here
3. Use mat.button-overrides within a selector, like here
4. There is also one another way of using component color variants, it's not documented in latest docs, but it was there in v18 docs.
5. If you really need to use CSS only, make sure to give colors for all the needed system variables. Buttons primarily rely on primary colors, you may want to override each of the following system variables:

[color=error] {
  --mat-sys-primary: var(--mat-sys-error);
  --mat-sys-on-primary: var(--mat-sys-on-error);
}

[alanpurple]

@shhdharmen

I know using css directly is not a good idea, i just pointed that was the only way

all you mentioned are the way of theming, not an individual use of color from defined palette.

thanks for trying to help anyway

[crisbeto]

You have to include the backwards-compatibility mixin. See https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants