无需额外UI库，实现Angular应用点击按钮切换配色方案

核心思路是将主题变量从:root改为类选择器，同时引入所有主题样式，通过动态给根元素添加/移除主题类来切换整套配色，具体步骤如下：

1. 改造主题SCSS文件 #

将原来的:root选择器替换为主题类名，让主题变量绑定到对应的类上：

dark.scss #

.dark-theme {
  --body-bg: #1a1a1a;
  --frn-bg-color: #2d2d2d;
  --input-border-color: #555;
  // 其他主题变量...
}

light.scss #

.light-theme {
  --body-bg: #fff;
  --frn-bg-color: #fff;
  --input-border-color: #787878;
  // 其他主题变量...
}

2. 全局引入所有主题样式 #

在styles.scss中同时引入两个主题文件，确保编译后所有主题变量都存在于样式表中：

@import './theme/dark.scss';
@import './theme/light.scss';

// 全局样式使用CSS变量
body {
  background-color: var(--body-bg);
  transition: background-color 0.3s; // 可选：添加过渡动画提升体验
}

// 其他全局样式同理用var(--xxx)引用变量

3. 创建主题管理服务 #

实现一个全局服务来管理主题状态，包含切换逻辑和用户选择持久化：

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

@Injectable({ providedIn: 'root' })
export class ThemeService {
  private themeSubject = new BehaviorSubject<string>(this.getSavedTheme());
  currentTheme$ = this.themeSubject.asObservable();

  // 从localStorage读取上次保存的主题，默认浅色
  private getSavedTheme(): string {
    return localStorage.getItem('app-theme') || 'light-theme';
  }

  // 切换主题逻辑
  switchTheme() {
    const newTheme = this.themeSubject.value === 'light-theme' ? 'dark-theme' : 'light-theme';
    this.themeSubject.next(newTheme);
    localStorage.setItem('app-theme', newTheme);
  }
}

4. 在根组件中应用主题 #

在AppComponent中订阅主题状态变化，动态给根元素添加/移除主题类：

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="themeService.switchTheme()">切换主题</button>
    <router-outlet></router-outlet>
  `
})
export class AppComponent implements OnInit {
  constructor(public themeService: ThemeService) {}

  ngOnInit() {
    this.themeService.currentTheme$.subscribe(theme => {
      const root = document.documentElement;
      // 先移除所有主题类，避免样式冲突
      root.classList.remove('light-theme', 'dark-theme');
      // 添加当前主题类
      root.classList.add(theme);
    });
  }
}

5. 组件中使用主题变量 #

所有组件的SCSS样式直接使用CSS变量即可，无需额外修改：

.example-component {
  background-color: var(--frn-bg-color);
  border: 1px solid var(--input-border-color);
}

原理说明 #

• 所有主题变量被编译进同一个样式表，通过类选择器限定作用域
• 切换主题本质是给根元素切换类名，CSS优先级会让当前主题类的变量值生效
• localStorage持久化用户选择，刷新页面后自动恢复上次主题

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