I want to elaborate a little bit with some details.
I believe, the comment from @toongeorges is the way how Angular Material appearance should be customised in a way how it is intended to be customised. Therefore, the limitations this approach have are intended to give a consistent appearance according to the Material style specification/across different components and so on.
The way you try to customise it is a kind of hacky way, but still should work. You may want to use it in case if the default Material styles is not exactly what you want. However, any hacky tricks require understanding of what's happening under the hood.
Here is the angular-material-theme function you use:
// @deprecated Use `all-component-themes`.
@mixin angular-material-theme($theme-or-color-config) {
@include all-component-themes($theme-or-color-config);
}
It actually applies the $theme-or-color-config to each and every component in Material. So when you are not sure why a certain component doesn't look in expected way, you should take a look at the styles and understand what exactly is assigned and why.
It seems like toolbar color styles are applied here which is called from here. The crucial thing you may notice is that colors are taken from the $config. This is cause those values are actually stored on the color configuration level.
Note: Honestly speaking, they've got functions and properties named like config_or_theme which were probably made for a sake of backwards compatibility, so if you mix something on the $theme level, it may work. But most likely, not everywhere and this substitution will be dropped in future releases.
Anyway, the object you usually create based on Material docs:
$my-theme: mat.define-light-theme((
color: (
primary: $my-primary,
accent: $my-accent,
warn: $my-warn,
),
typography: mat.define-typography-config(),
density: 0,
));
will be actually converted in something like this for Material internal usage:
(
color: (
primary: $my-primary,
accent: $my-accent,
warn: $my-warn,
is-dark: false,
foreground: palette.$light-theme-foreground-palette,
background: palette.$light-theme-background-palette,
),
typography: mat.define-typography-config(),
density: 0,
)
Therefore, if you want to be sure that your custom foreground/background is applied properly, you should do something like:
$primary: mat-palette($mat-cyan, 300);
$accent : mat-palette($mat-yellow, 500);;
$warn : mat-palette($mat-red, 600);
// define-dark will create a dark one, so you don't have to override it
$my-theme: mat.define-dark-theme((
color: (
primary: $my-primary,
accent: $my-accent,
warn: $my-warn,
),
typography: mat.define-typography-config(),
density: 0,
));
$theme-foreground: (
base: gray,
divider: $white-12-opacity,
dividers: $white-12-opacity,
disabled: rgba(200, 200, 200, 0.38),
disabled-button: rgba(200, 200, 200, 0.38),
disabled-text: rgba(200, 200, 200, 0.38),
hint-text: rgba(200, 200, 200, 0.38),
secondary-text: rgba(200, 200, 200, 0.54),
icon: rgba(200, 200, 200, 0.54),
icons: rgba(200, 200 , 200, 0.54),
text: rgba(200, 200, 200, 0.87),
slider-min: rgba(200, 200, 200, 0.87),
slider-off: rgba(200, 200, 200, 0.26),
slider-off-active: rgba(200, 200, 200, 0.38),
);
$theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
background: map_get($mat-grey, 50),
hover: rgba(200, 200, 200, 0.04),
card: white,
dialog: white,
disabled-button: $black-12-opacity,
raised-button: white,
focused-button: $black-6-opacity,
selected-button: map_get($mat-grey, 300),
selected-disabled-button: map_get($mat-grey, 400),
disabled-button-toggle: map_get($mat-grey, 200),
unselected-chip: map_get($mat-grey, 300),
);
$color: map.get($theme, color);
$background: map.merge(map.get($color, background), $theme-background);
$foreground: map.merge(map.get($color, foreground), $theme-foreground);
// overriding color background/foreground
$color: map.merge($color, (background: $background, foreground: $foreground));
$my-theme: map.merge($my-theme, (color: $color));
@include mat-core();
@include angular-material-theme($my-theme);
