基于SCSS基础文件在Angular中实现自定义暗黑模式方案咨询

一、最简方案：CSS变量+根类切换（替代SCSS调色板切换） #

SCSS是预编译工具，运行时没法直接切换SCSS文件，但把调色板转成CSS变量，通过给根元素加/删类来切换变量值，是最省心的实现方式：

1. 全局定义双主题CSS变量
   在全局样式文件（比如styles.scss）里定义两套变量，绑定到根元素的不同类上：

// 浅色主题默认变量
:root {
  --primary-color: #2196F3;
  --bg-color: #fff;
  --text-color: #333;
  // 其他需要切换的颜色都放这里
}

// 深色主题变量，添加dark-theme类后生效
:root.dark-theme {
  --primary-color: #1976D2;
  --bg-color: #121212;
  --text-color: #fff;
}

2. 组件中用CSS变量替代SCSS变量
   把之前使用SCSS变量的地方全部替换成var(--变量名)，示例：

// 组件样式示例
.user-card {
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--primary-color);
}

3. Angular端实现切换逻辑
   用一个服务搞定主题状态管理、类切换，还能持久化用户选择：

import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ThemeService {
  private renderer: Renderer2;
  private isDark = false;

  constructor(rendererFactory: RendererFactory2) {
    this.renderer = rendererFactory.createRenderer(null, null);
    // 初始化：优先读取本地存储，无存储则跟随系统主题偏好
    const savedTheme = localStorage.getItem('theme');
    this.isDark = savedTheme === 'dark' || 
      (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches);
    this.updateRootThemeClass();
  }

  toggleTheme() {
    this.isDark = !this.isDark;
    this.updateRootThemeClass();
    localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
  }

  private updateRootThemeClass() {
    const root = document.documentElement;
    this.isDark 
      ? this.renderer.addClass(root, 'dark-theme') 
      : this.renderer.removeClass(root, 'dark-theme');
  }

  getThemeStatus() {
    return this.isDark;
  }
}

4. 添加切换按钮
   在任意组件（比如头部导航）中调用服务实现切换：

import { Component } from '@angular/core';
import { ThemeService } from './theme.service';

@Component({
  selector: 'app-header',
  template: `<button (click)="switchTheme()">切换{{ isDark ? '浅色' : '深色' }}模式</button>`
})
export class HeaderComponent {
  isDark = false;

  constructor(private themeService: ThemeService) {
    this.isDark = themeService.getThemeStatus();
  }

  switchTheme() {
    this.themeService.toggleTheme();
    this.isDark = this.themeService.getThemeStatus();
  }
}

二、大型代码库替代方案（已大量使用SCSS变量） #

如果项目中SCSS变量的使用范围极广，无法一次性替换为CSS变量，可以尝试以下两种方案：

1. 预编译双主题CSS，动态加载 #

• 分别创建light-theme.scss和dark-theme.scss，各自定义SCSS变量后导入所有组件样式：

// light-theme.scss
$primary: #2196F3;
$bg: #fff;
$text: #333;

// 导入所有组件样式，让它们使用当前主题变量
@import './components/**/*.scss';

// dark-theme.scss
$primary: #1976D2;
$bg: #121212;
$text: #fff;

@import './components/**/*.scss';

• 在angular.json中配置这两个文件为独立编译的样式包，不自动注入：

"styles": [
  "src/styles.scss",
  {
    "input": "src/light-theme.scss",
    "bundleName": "light-theme",
    "inject": false
  },
  {
    "input": "src/dark-theme.scss",
    "bundleName": "dark-theme",
    "inject": false
  }
]

• 主题服务中动态加载对应CSS文件，替换当前主题样式：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ThemeService {
  private currentLink: HTMLLinkElement | null = null;
  private isDark = false;

  constructor() {
    const savedTheme = localStorage.getItem('theme');
    this.isDark = savedTheme === 'dark' || 
      (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches);
    this.loadTargetTheme();
  }

  toggleTheme() {
    this.isDark = !this.isDark;
    this.loadTargetTheme();
    localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
  }

  private loadTargetTheme() {
    // 移除当前主题样式
    if (this.currentLink) {
      this.currentLink.remove();
    }
    // 创建新link标签加载对应主题CSS
    this.currentLink = document.createElement('link');
    this.currentLink.rel = 'stylesheet';
    this.currentLink.href = this.isDark ? 'dark-theme.css' : 'light-theme.css';
    document.head.appendChild(this.currentLink);
  }
}

注意：此方案要求所有组件样式均依赖SCSS变量，不能硬编码颜色值，否则切换主题后硬编码颜色不会变化。

2. SCSS混合宏+根类切换 #

不想生成独立CSS文件的话，用混合宏为每个组件生成双主题样式：

• 创建混合宏文件theme-mixins.scss：

@mixin theme-styles() {
  // 浅色主题样式
  :root:not(.dark-theme) & {
    background: $bg-light;
    color: $text-light;
  }

  // 深色主题样式
  :root.dark-theme & {
    background: $bg-dark;
    color: $text-dark;
  }
}

• 组件中导入并使用混合宏：

@import './theme-mixins.scss';

.user-card {
  @include theme-styles();
  border: 1px solid $primary;
}

切换逻辑与最简方案一致，只需给根元素加/删dark-theme类即可。这种方式会把双主题样式打包进同一个CSS文件，适合样式量不大的项目，省去动态加载的开销。

三、关键注意事项 #

• 优先选择CSS变量方案，运行时切换开销极小，代码侵入性低。
• 必须持久化主题状态（如localStorage），避免页面刷新后回到默认主题。
• 初始化时适配系统主题偏好，提升用户体验。

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