Angular material 19.2.8, supporting both dark and light theme on old browsers

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

Continue reading...