Blazor主题切换有五种主流方式：Radzen ThemeService（新手推荐，开箱即用）、Masa Blazor实现点击定位扩散动画（依赖view-transition API）、纯css变量配合bootstrapBlazor/Blazorise（轻量适配现有框架）、服务端cookie控制（seo友好、首次加载稳定）、以及图标/字体等细节同步适配。
Blazor 实现主题切换，核心在于“样式隔离 + 状态驱动 + 持久化”，不依赖 js 就能完成基础切换，但要体验好（比如平滑过渡、点击定位扩散），需要配合 CSS View Transitions 或 JS 协同。下面分几种主流、实用的方式讲清楚。
用 Radzen ThemeService 动态切换（推荐新手）
Radzen 提供开箱即用的主题服务，支持 material / material-dark / bootstrap 等主题，还内置 WCAG 无障碍兼容模式：
- 在 Program.cs 注册服务：
builder.Services.AddScoped(); - 在根布局（如 MainLayout.razor）顶部加：
- 切换逻辑写在组件里：
@inject ThemeService ThemeService，然后调用ThemeService.SetTheme("material-dark") - 持久化可选 Cookie 或 URL 参数：
builder.Services.AddRadzenCookieThemeService()，刷新后自动恢复上次选择
用 Masa Blazor 实现点击定位扩散动画
适合追求视觉质感的项目，利用浏览器原生 view-transition API 实现从按钮位置出发的圆形扩散切换效果：
- 在 wwwroot/css/site.css 加入关键动画规则，定义
::view-transition-old(root)和::view-transition-new(root)的 clip-path 变化 - 在 _Host.cshtml 的
底部注入 JS 方法：window.switchTheme = function(dotNetHelper, x, y) { ... }，把点击坐标传给 CSS 变量--x/--y - 在 MainLayout.razor 的切换按钮中调用：
await JsRuntime.InvokeVoidAsync("switchTheme", DotNetObjectRef, x, y) - 后端 C# 方法
SwitchTheme()负责更新主题状态（如保存到 localStorage 或服务端）
纯 CSS 变量 + BootstrapBlazor / Blazorise 配合
适合已用 BootstrapBlazor 或 Blazorise 的项目，不改框架结构也能换肤：
- 定义多套 CSS 变量（如
:root[data-theme="dark"]），覆盖颜色、背景、边框等 - 在 app.razor 或布局组件中监听主题变化，动态给
添加data-theme属性 - Blazorise 可直接用
ThemeService切换预设主题；BootstrapBlazor 支持通过BootstrapBlazorOptions配置全局主题键值 - 图标主题同步切换：比如 Material 图标库可通过
IconThemeOptions.ThemeKey = "mdi"控制
服务端保存 + Cookie 主题（适合 Blazor Server）
对 SEO 或首次加载体验要求高时，用服务端控制主题更可靠：
- 新建一个
StyleController，接收/style?style=dark请求，把值写入 Response.Cookies - 在 _Host.cshtml 读取 Cookie，根据值动态引入对应 CSS：
disabled } /> - 前端再用 JS 补充一次切换逻辑，保证交互响应不卡顿
基本上就这些。选哪种取决于你用的 UI 框架、是否需要动画、要不要服务端参与。Radzen 最省事，Masa Blazor 最有设计感，纯 CSS 变量最轻量，服务端方案最稳。不复杂但容易忽略的是：主题切换后，图标、字体、阴影这些细节也得一并适配，不然会显得割裂。