Angular+Bootstrap项目如何将Typescript变量传递到样式表实现主题切换

这个需求可以实现，但你最初的思路存在偏差：SCSS是预编译语言，$变量、@if等语法都会在项目构建阶段编译为静态CSS，无法直接读取TS运行时的activeTheme变量，因此不存在把TS变量传入SCSS供编译时语法使用的方法。

以下是符合Bootstrap规范、无hack的标准多主题实现方案：

方案核心思路 #

用CSS自定义属性（CSS变量）做运行时的样式值切换，配合Bootstrap全局变量覆盖实现$body-bg随主题动态变更，完全不需要直接操作style属性。

具体实现步骤 #

1. 在styles.scss中配置变量和主题规则
   注意Bootstrap变量覆盖需要写在导入Bootstrap SCSS文件之前：

// 1. 定义不同主题的背景色变量
:root {
  --bg-light: #fff;
  --bg-dark: #000;
}

// 2. 覆盖Bootstrap全局$body-bg变量，值绑定动态CSS变量
$body-bg: var(--current-bg);

// 3. 导入Bootstrap SCSS入口
@import "~bootstrap/scss/bootstrap";

// 4. 定义主题类，切换动态变量的值
body.theme-light {
  --current-bg: var(--bg-light);
}
body.theme-dark {
  --current-bg: var(--bg-dark);
}

2. 在theme-service.ts中实现主题切换逻辑
   切换主题时仅需要给body切换对应的主题类即可，所有依赖$body-bg的Bootstrap样式都会自动更新：

// 切换主题方法示例
setActiveTheme(theme: 'light' | 'dark') {
  // 移除已有主题类
  document.body.classList.remove('theme-light', 'theme-dark');
  // 添加当前主题类
  document.body.classList.add(`theme-${theme}`);
  // 可补充本地存储持久化、主题状态通知等逻辑
}

其他可选优化 #

如果你需要更符合Angular的DOM操作规范，可以注入Renderer2替代直接操作document.body，避免服务端渲染等场景下的兼容性问题：

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

@Injectable({ providedIn: 'root' })
export class ThemeService {
  private renderer: Renderer2;
  constructor(rendererFactory: RendererFactory2) {
    this.renderer = rendererFactory.createRenderer(null, null);
  }

  setActiveTheme(theme: 'light' | 'dark') {
    this.renderer.removeClass(document.body, 'theme-light');
    this.renderer.removeClass(document.body, 'theme-dark');
    this.renderer.addClass(document.body, `theme-${theme}`);
  }
}

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