Blazor 实现主题切换，核心在于“样式隔离 + 状态驱动 + 持久化”，不依赖 JS 就能完成基础切换，但要体验好（比如平滑过渡、点击定位扩散），需要配合 CSS View Transitions 或 JS 协同。下面分几种主流、实用的方式讲清楚。
用 Radzen ThemeService 动态切换（推荐新手）
Radzen 提供开箱即用的主题服务，支持 material / material-dark / bootstrap 等主题，还内置 WCAG 无障碍兼容模式：
在 Program.cs 注册服务：builder.Services.AddScoped<themeservice>();</themeservice>在根布局（如 MainLayout.razor）顶部加：
<radzentheme theme="@ThemeService.Theme"></radzentheme>切换逻辑写在组件里：
@inject ThemeService ThemeService，然后调用
ThemeService.SetTheme("material-dark")
持久化可选 Cookie 或 URL 参数：builder.Services.AddRadzenCookieThemeService()，刷新后自动恢复上次选择
用 Masa Blazor 实现点击定位扩散动画
适合追求视觉质感的项目，利用浏览器原生
view-transitionAPI 实现从按钮位置出发的圆形扩散切换效果： 在 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：
<link href="css/theme-dark.css" rel="stylesheet">disabled } />前端再用 JS 补充一次切换逻辑，保证交互响应不卡顿
基本上就这些。选哪种取决于你用的 UI 框架、是否需要动画、要不要服务端参与。Radzen 最省事，Masa Blazor 最有设计感，纯 CSS 变量最轻量，服务端方案最稳。不复杂但容易忽略的是：主题切换后，图标、字体、阴影这些细节也得一并适配，不然会显得割裂。
