如何将深色主题设置为Blazor项目的默认主题

• 直接给根组件添加深色主题属性：
  打开App.razor，找到最外层的根容器（一般是<div>），添加data-bs-theme="dark"属性，示例代码：

  <div data-bs-theme="dark">
      <Router AppAssembly="@typeof(App).Assembly">
          <!-- 项目原有路由内容 -->
      </Router>
  </div>
  

  启动项目后，应用会直接加载Bootstrap的全局深色主题样式。

• 你之前修改background-color无效的原因：
  你看到的background-color: #1b6ec2是单一元素的独立样式，而Bootstrap的深色主题是一套全局样式规则，零散修改单个颜色值会被框架的全局样式覆盖，也无法统一适配所有组件的深色表现。

• 自定义深色主题样式（可选）：
  不要直接修改bootstrap.min.css（压缩文件难以维护，框架更新会覆盖），应该在wwwroot/css/app.css中通过Bootstrap的CSS变量自定义，示例：

  /* 确保这段代码在Bootstrap样式之后引入 */
  [data-bs-theme="dark"] {
      --bs-body-bg: #121212; /* 自定义深色背景色 */
      --bs-body-color: #e0e0e0; /* 自定义深色文本颜色 */
      --bs-primary: #bb86fc; /* 自定义深色主题下的主色调 */
  }
  

  这种方式会覆盖Bootstrap默认的深色主题变量，且不会被框架更新影响。

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