I want to have both dark and light themes on an angular 19 app.
the dark or light class is applied on the body tag in a theme.service which works correctly.
When I do
@use '@angular/material' as mat;
@use 'theme-colors' as ft-green-theme;
@use 'fonts';
@include mat.core();
html {
@include mat.theme((
color: (
theme-type: light,
primary: ft-green-theme.$primary-palette,
tertiary: ft-green-theme.$tertiary-palette,
),
density: 0
));
body.dark {
@include mat.theme((
color: (
theme-type: dark,
primary: ft-green-theme.$primary-palette,
tertiary: ft-green-theme.$tertiary-palette,
),
density: 0
));
}
}
it works.
BUT
when I wanna override styles of material components just like the way the official docs instructed us to, using things like @include mat.button-toggle-overrides((...
On light theme the overrides work. But on dark, not only they don't apply, but they even make some parts of my dark theme white. when I remove the following overrides, the dark theme is ok except I NEED to change some parts and override colors and styles of some components. And when I apply the following overrides, they break the page in dark mode.
@use '@angular/material' as mat;
:root {
.mdc-evolution-chip__graphic.mat-mdc-chip-graphic {
width: 0 !important;
}
.mdc-evolution-chip__checkmark {
display: none !important;
}
.mat-mdc-list-item-avatar:not(.skip-avatar-margin) {
margin-top: 12px !important;
}
@include mat.tabs-overrides((
active-label-text-color: var(--mat-sys-primary),
active-focus-label-text-color: var(--mat-sys-primary),
active-hover-label-text-color: var(--mat-sys-primary),
inactive-label-text-color: var(--mat-sys-outline),
inactive-focus-label-text-color: var(--mat-sys-on-surface),
inactive-hover-label-text-color: var(--mat-sys-on-surface),
label-text-size: 14
));
@include mat.card-overrides((
elevated-container-color: var(--mat-sys-surface),
outlined-container-color: var(--mat-sys-surface)
));
@include mat.button-overrides((outlined-outline-color: var(--mat-sys-outline-variant)));
@include mat.table-overrides((
row-item-outline-color: var(--mat-sys-outline-variant)
));
@include mat.list-overrides((
list-item-three-line-container-height: 72px,
list-item-two-line-container-height: 72px,
list-item-one-line-container-height: 72px,
list-item-leading-avatar-size: 48px,
list-item-leading-avatar-color: var(--mat-sys-outline-variant)
));
@include mat.divider-overrides((color: var(--mat-sys-outline-variant)));
@include mat.badge-overrides((background-color: var(--mat-sys-primary)));
@include mat.chips-overrides((
outline-width: 1.7px,
outline-color: var(--mat-sys-primary),
elevated-selected-container-color: var(--mat-sys-primary),
selected-label-text-color: var(--mat-sys-surface),
label-text-color: var(--mat-sys-primary),
focus-outline-color: var(--mat-sys-primary),
));
@include mat.fab-overrides((
container-color: var(--mat-sys-primary),
foreground-color: var(--mat-sys-surface)
));
@include mat.datepicker-overrides((
calendar-container-background-color: var(--mat-sys-surface),
calendar-container-elevation-shadow: var(--mat-sys-level1)
));
@include mat.button-toggle-overrides((
selected-state-background-color: var(--mat-sys-primary),
selected-state-text-color: var(--mat-sys-surface),
text-color: var(--mat-sys-primary),
divider-color: var(--mat-sys-primary)
));
}
Why am I not using color-scheme ?
I did but it doesn't work on IOS safari 16.2 I only causes more styles breaking.
I also removed the theme-type: light, from the first theme include inside body and it fixed the problem in modern browsers but again on IOS safari 16.2 the UI shows messed up in both themes.
I also removed :root but nothing changed
I got it working.
Problem was that material overrides had to be applied for each theme seperatly so they would be reinitiated everytime theme changes. They can't be global when you are using theme-type.
So I created a mixin of all my overrides and just included it inside my theme initializations like this :
@use '@angular/material' as mat;
@use 'theme-colors' as ft-green-theme;
@use 'fonts';
@include mat.core();
@mixin custom-component-overrides() {
@include mat.tabs-overrides((
active-label-text-color: var(--mat-sys-primary),
active-focus-label-text-color: var(--mat-sys-primary),
active-hover-label-text-color: var(--mat-sys-primary),
inactive-label-text-color: var(--mat-sys-outline),
inactive-focus-label-text-color: var(--mat-sys-on-surface),
inactive-hover-label-text-color: var(--mat-sys-on-surface),
label-text-size: 14
));
@include mat.card-overrides((
elevated-container-color: var(--mat-sys-surface),
outlined-container-color: var(--mat-sys-surface)
));
@include mat.button-overrides((outlined-outline-color: var(--mat-sys-outline-variant)));
@include mat.table-overrides((
row-item-outline-color: var(--mat-sys-outline-variant)
));
@include mat.list-overrides((
list-item-three-line-container-height: 72px,
list-item-two-line-container-height: 72px,
list-item-one-line-container-height: 72px,
list-item-leading-avatar-size: 48px,
list-item-leading-avatar-color: var(--mat-sys-outline-variant)
));
@include mat.divider-overrides((color: var(--mat-sys-outline-variant)));
@include mat.badge-overrides((background-color: var(--mat-sys-primary)));
@include mat.chips-overrides((
outline-width: 1.7px,
outline-color: var(--mat-sys-primary),
elevated-selected-container-color: var(--mat-sys-primary),
selected-label-text-color: var(--mat-sys-surface),
label-text-color: var(--mat-sys-primary),
focus-outline-color: var(--mat-sys-primary),
));
@include mat.fab-overrides((
container-color: var(--mat-sys-primary),
foreground-color: var(--mat-sys-surface)
));
@include mat.datepicker-overrides((
calendar-container-background-color: var(--mat-sys-surface),
calendar-container-elevation-shadow: var(--mat-sys-level1)
));
@include mat.button-toggle-overrides((
selected-state-background-color: var(--mat-sys-primary),
selected-state-text-color: var(--mat-sys-surface),
text-color: var(--mat-sys-primary),
divider-color: var(--mat-sys-primary)
));
}
html {
@include custom-component-overrides();
@include mat.theme((
color: (
theme-type: light,
primary: ft-green-theme.$primary-palette,
tertiary: ft-green-theme.$tertiary-palette,
),
density: 0
));
.dark {
@include custom-component-overrides();
@include mat.theme((
color: (
theme-type: dark,
primary: ft-green-theme.$primary-palette,
tertiary: ft-green-theme.$tertiary-palette,
),
density: 0
));
}
}
:root {
.mdc-evolution-chip__graphic.mat-mdc-chip-graphic {
width: 0 !important;
}
.mdc-evolution-chip__checkmark {
display: none !important;
}
.mat-mdc-list-item-avatar:not(.skip-avatar-margin) {
margin-top: 12px !important;
}
}
I think the angular material documentation should include this point. I'm not going to remove this question hoping somebody would find it useful.