I am currently utilizing Angular 13 and SCSS in my project. My goal is to incorporate Dark Mode for the application, here is my existing setup.
_variables.scss
$body-color: #f0f0f0;
:root {
--body-color: #{$body-color};
}
Throughout the application, it is referenced like this,
.header {
background: var(--body-color) ;
}
The Dark Mode configurations are stored in the _theme.scss file.
_theme.scss
@use '@angular/material' as mat;
@use 'variables' as v;
@import "~@angular/material/theming";
@include mat.core();
$angular-primary: mat.define-palette(mat.$teal-palette, 500, 100, 900);
$angular-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$angular-warn: mat.define-palette(mat.$red-palette);
$angular-default-theme: mat.define-light-theme(
(
color: (
primary: $angular-primary,
accent: $angular-accent,
warn: $angular-warn,
),
)
);
@include mat.all-component-themes($angular-default-theme);
$angular-dark-theme: mat.define-dark-theme(
(
color: (
primary: $angular-primary,
accent: $angular-accent,
warn: $angular-warn,
),
)
);
@mixin theme-check($dark-checker:null) {
@if $dark-checker == true {
--body-color: #2c2c2c;
}
@else {
--body-color: #f0f0f0;
}
}
$body-color: null;
.dark-mode {
@include theme-check(true);
$body-color: #2c2c2c;
@include mat.all-component-colors($angular-dark-theme);
transition: all 1s ease;
}
I have been struggling to set the body-color variable globally regardless of how I attempt it. Is there a method to define it once in the .dark-mode class and have it applied universally?