I think it’s a very common problem, though I was not able to find a solution.
I have a dark and a light theme defined such as:
styles.scss
@use "@angular/material" as mat;
// Include the common styles for Angular Material.
@include mat.core();
// Define the theme object.
$light-theme: mat.define-theme(
(
color: (
theme-type: light,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
density: (
scale: -5,
),
)
);
$dark-theme: mat.define-theme(
(
color: (
theme-type: dark,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
density: (
scale: -5,
),
)
);
// Include theme styles for core and each component used in your app.
html,
body {
@include mat.all-component-themes($light-theme);
.dark-theme {
// This mixin only generates the color styles now.
@include mat.all-component-colors($dark-theme);
}
height: 100%;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
how to change background color with one color for light and one color for dark theme? (it is plain black for ligth theme, and plain white for dark theme by default)
Define Background Colors in Your Themes
$light-theme: mat.define-light-theme((
color: (
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
background: (
background: mat.$white,
status-bar: mat.$grey-200,
app-bar: mat.$white,
hover: rgba(mat.$black, 0.04),
card: mat.$white,
dialog: mat.$white,
disabled-button: rgba(mat.$black, 0.12),
raised-button: mat.$white,
focused-button: rgba(mat.$black, 0.12),
selected-button: mat.$grey-300,
selected-disabled-button: mat.$grey-400,
disabled-button-toggle: mat.$grey-200,
unselected-chip: rgba(mat.$black, 0.12),
disabled-list-option: rgba(mat.$black, 0.12),
),
),
density: -2,
));
$dark-theme: mat.define-dark-theme((
color: (
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
background: (
background: mat.$dark-grey,
status-bar: mat.$grey-800,
app-bar: mat.$grey-900,
hover: rgba(mat.$white, 0.04),
card: mat.$grey-800,
dialog: mat.$grey-900,
disabled-button: rgba(mat.$white, 0.12),
raised-button: mat.$grey-800,
focused-button: rgba(mat.$white, 0.12),
selected-button: mat.$grey-700,
selected-disabled-button: mat.$grey-600,
disabled-button-toggle: mat.$grey-800,
unselected-chip: rgba(mat.$white, 0.12),
disabled-list-option: rgba(mat.$white, 0.12),
),
),
density: -2,
));
Apply Background Colors Based on the Active Theme
html, body {
background-color: mat.get-color-from-palette($light-theme-background, background);
margin: 0;
height: 100%;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.dark-theme {
background-color: mat.get-color-from-palette($dark-theme-background, background);
}
Add function to toggle theme
toggleTheme(isDarkTheme: boolean) {
document.body.classList.toggle('dark-theme', isDarkTheme);
}