I'm trying to theming my own components by handling two themes.
So I wrote the following code. Here is theme.scss
@import '~@angular/material/theming';
@include mat-core();
$theme-primary: mat-palette($mat-blue);
$theme-accent: mat-palette($mat-grey, A200, A100, A400);
$theme-warn: mat-palette($mat-red);
$theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
$theme-dark: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
.theme {
@include angular-material-theme($theme);
}
.theme-dark {
@include angular-material-theme($theme-dark);
}
I wrote a simple component. Here is hello.component.scss
@import './../theme.scss';
@mixin change-color($theme) {
$config: mat-get-color-config($theme);
$primary: map-get($config, primary);
$accent: map-get($config, accent);
:host {
background-color: mat-color($accent, 100);
}
}
:host {
color: red
}
The problem here is that the color is fixed no matter if I change the theme.
I would like to use a color of a certain hue that change to another color when I switch to dark theme mode.
Is it possible ? How ?
Thanks for helping
Solution
Can't write inside component style. Must be in theme.scss. So you have to write this.
@import '~@angular/material/theming';
@include mat-core();
$theme-primary: mat-palette($mat-blue);
$theme-accent: mat-palette($mat-grey, A200, A100, A400);
$theme-warn: mat-palette($mat-red);
$theme-light: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
$theme-dark: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
@mixin cust-component($theme) {
$background: map-get($theme, background);
.class-from-hello-component {
background-color: mat-color($background, background);
}
}
.theme {
@include angular-material-theme($theme-light);
@include cust-component($theme-light);
}
.theme-dark {
@include angular-material-theme($theme-dark);
@include cust-component($theme-dark);
}
Give a look at parameters of $background
from ~@angular/material/theming
// Background palette for light themes.
$mat-light-theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
background: map_get($mat-grey, 50),
hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX
card: white,
dialog: white,
disabled-button: rgba(black, 0.12),
raised-button: white,
focused-button: $dark-focused,
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),
disabled-list-option: map_get($mat-grey, 200),
);
you could retrieve $primary
and $accent
inside @mixin cust_component(){}
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
but mat-dark-theme($theme-primary, $theme-accent, $theme-warn)
, isn't changing color of them.