如何在Angular应用中切换Bootstrap暗黑主题？

一、静态启用暗黑主题 #

直接修改项目根目录下的 src/index.html 文件，在 <html> 标签上添加 data-bs-theme="dark" 属性即可：

<html lang="en" data-bs-theme="dark">
  <!-- 其他页面内容 -->
</html>

启动应用后，Bootstrap会自动加载暗黑主题样式。

二、动态切换主题（Angular推荐方案） #

如果需要在应用运行时切换主题，推荐使用Angular的 Renderer2 进行DOM操作（避免直接操作原生DOM，符合Angular最佳实践）：

1. 实现主题切换组件 #

import { Component, Renderer2, Inject, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-theme-switcher',
  template: `
    <button (click)="toggleTheme()">
      {{ currentTheme === 'dark' ? '切换到浅色主题' : '切换到暗黑主题' }}
    </button>
  `
})
export class ThemeSwitcherComponent implements OnInit {
  currentTheme: string | null = null;

  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {}

  ngOnInit(): void {
    // 初始化时读取当前主题
    this.currentTheme = this.document.documentElement.getAttribute('data-bs-theme');
    // 可选：从localStorage恢复用户上次选择的主题
    const savedTheme = localStorage.getItem('bootstrap-theme');
    if (savedTheme) {
      this.setTheme(savedTheme);
    }
  }

  toggleTheme(): void {
    const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
    this.setTheme(newTheme);
    // 可选：保存主题选择到localStorage
    localStorage.setItem('bootstrap-theme', newTheme);
  }

  private setTheme(theme: string): void {
    this.renderer.setAttribute(this.document.documentElement, 'data-bs-theme', theme);
    this.currentTheme = theme;
  }
}

2. 快速实现（直接操作DOM） #

如果只是简单测试，也可以直接操作原生DOM，写法更简洁（但不符合Angular最佳实践，不建议在生产环境使用）：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-theme-switcher',
  template: `<button (click)="toggleTheme()">切换主题</button>`
})
export class ThemeSwitcherComponent implements OnInit {
  ngOnInit(): void {
    const savedTheme = localStorage.getItem('bootstrap-theme');
    if (savedTheme) {
      document.documentElement.setAttribute('data-bs-theme', savedTheme);
    }
  }

  toggleTheme(): void {
    const currentTheme = document.documentElement.getAttribute('data-bs-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-bs-theme', newTheme);
    localStorage.setItem('bootstrap-theme', newTheme);
  }
}

注意事项 #

• 确保你的Bootstrap版本支持暗黑主题（Bootstrap 5.3及以上版本才正式支持 data-bs-theme 属性）
• 如果自定义了Bootstrap样式，需要确保暗黑主题的变量和样式能正常覆盖默认样式

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