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 变量最轻量，服务端方案最稳。不复杂但容易忽略的是：主题切换后，图标、字体、阴影这些细节也得一并适配，不然会显得割裂。