如何使用我现有的 SCSS 设置和 Angular 实现暗模式？

Question

I am using Angular 13 and SCSS. I want to implement Dark Mode for my application. This is my current setup.

_variables.scss

$body-color: #f0f0f0;

:root {
  --body-color: #{$body-color};
}

And everywhere in the application it is called like this,

.header {
  background: var(--body-color) ;
}

Dark Mode Settings are 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,
    ),
  )
);

// $body-color: var(--body-color);

@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);
  // background-color: #2c2c2c !important;
  // color: #fafafa !important;

  transition: all 1s ease;
}

Whichever way I try I can't seem to set the body-color variable globally. Is there a way I can set it in the .dark-mode class once and it will be applied globally?

Answer 1

Finally figured it out and this is the method I am using,

styles.scss

...
@import "./assets/style_varients/themes";
...

_themes.scss

@use './dark-theme' as dark;
@use './light-theme' as light;

@mixin theme($theme) {
  @if $theme == 'dark-mode' {
    @include dark.color-mixin();
  }
  @else {
    @include light.color-mixin();
  }
}

.dark-mode {
  @include dark.color-mixin();
  transition: all 0.4s ease;
}

.light-mode {
  @include light.color-mixin();
  transition: all 0.4s ease;
}

:root {
  .dark-mode {
    --main-theme-variable: #{dark.$main-theme-variable};
   }
  .light-mode {
    --main-theme-variable: #{light.$main-theme-variable};
   }
}

_dark-theme.scss

@mixin color-mixin() {
  $main-theme-variable: #262626 !global;

  //=========== Main Background Color ===========//
  background-color: #141515;

  //=========== Main Text Color ===========//
  color: #D6D6D6;
}

_light-theme.scss

@mixin color-mixin() {
  $main-theme-variable: #FFF !global;

  //=========== Main Background Color ===========//
  background-color: #f0f0f0;

  //=========== Main Text Color ===========//
  color: black;
}