Blazor 动态切换 CSS 实现深色/浅色模式-C#.Net教程

Blazor中动态切换深色/浅色模式的核心是运行时替换根元素class或link标签，并配合CSS变量统一管理主题色；推荐方式为通过CSS变量定义两套值，用theme-dark/theme-light类切换，辅以localStorage持久化和系统偏好适配。

Blazor 中动态切换深色/浅色模式，核心是**在运行时替换或修改页面的 CSS 类或 link 标签**，并配合 CSS 变量（Custom Properties）统一管理主题色。不依赖 JS Interop 也能实现，但结合少量 JS 能更好处理系统偏好和持久化。

1. 使用 CSS 变量 + 切换根元素 class

这是最推荐、最 Blazor-native 的方式：定义两套 CSS 变量值，通过给 或 添加不同 class（如 theme-dark / theme-light）来触发样式切换。

在 wwwroot/css/app.css 中：

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --border-color: #e0e0e0;
}

.theme-dark {
  --bg-color: #1e1e1e;
  --text-color: #e0e0e0;
  --border-color: #444444;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

在 App.razor 或布局组件中监听主题状态（例如用 CascadingParameter 或服务），然后设置根元素 class：

立即学习“前端免费学习笔记（深入）”；

• 用 @code 块调用 JSRuntime.InvokeVoidAsync("document.documentElement.classList.toggle", "theme-dark") 切换 class
• 更简洁：在 Layout.razor 的 @onload 或生命周期中，根据当前主题调用 JS 设置 class（如 document.documentElement.className = 'theme-dark'）

2. 动态加载/替换 样式表

适合已有完全独立的 dark.css / light.css 文件的场景。通过 JS 修改 中的 的 href 属性。