Angular 13 + SCSS实现暗黑模式：如何全局设置body-color变量？

问题场景 #

使用Angular 13和SCSS实现暗黑模式，通过CSS变量--body-color控制全局背景色，但在.dark-mode类中设置该变量无法全局生效，希望一次配置就能让所有引用该变量的元素同步切换样式。

现有配置 #

_variables.scss #

$body-color: #f0f0f0;

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

组件样式引用方式 #

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

_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;
}

解决方案 #

问题核心是当前.dark-mode类中设置的--body-color仅作用于类内部元素，无法覆盖:root定义的全局变量。以下两种方法可实现一次设置全局生效：

方法1：直接覆盖全局根变量 #

修改_theme.scss中的.dark-mode类，通过嵌套:root来覆盖全局变量：

.dark-mode {
  :root {
    --body-color: #2c2c2c;
  }
  @include mat.all-component-colors($angular-dark-theme);
  transition: all 1s ease;
}

也可以优化theme-check混合宏，让它直接操作全局变量：

@mixin theme-check($dark-checker: null) {
  :root {
    @if $dark-checker == true {
      --body-color: #2c2c2c;
    } @else {
      --body-color: #f0f0f0;
    }
  }
}

.dark-mode {
  @include theme-check(true);
  @include mat.all-component-colors($angular-dark-theme);
  transition: all 1s ease;
}

方法2：将.dark-mode挂载到根元素 #

如果切换暗黑模式时，把.dark-mode类添加到<body>标签上，可直接在类中设置变量，利用CSS级联特性覆盖:root变量：

.dark-mode {
  --body-color: #2c2c2c;
  @include mat.all-component-colors($angular-dark-theme);
  transition: all 1s ease;
}

对应的Angular组件切换逻辑：

toggleDarkMode() {
  document.body.classList.toggle('dark-mode');
}

效果验证 #

修改完成后，所有使用var(--body-color)的元素会自动同步切换颜色，无需单独修改组件样式，实现一次配置全局生效。

内容的提问来源于stack exchange，提问作者Sriharish S