Blazor 中可以用 C# 动态设置或读取 CSS 变量（Custom Properties），核心是通过
JSRuntime调用 JavaScript 操作
style.setProperty或
getComputedStyle，因为 C# 无法直接访问 CSSOM。不过 Blazor 提供了简洁的互操作方式，配合少量 JS 就能高效完成。
在组件中设置 CSS 变量
最常用场景是根据状态动态更新主题色、尺寸等。需要两步：定义 JS 函数 + C# 调用。
在wwwroot/js/site.js（或
_Host.cshtml中）添加：
window.setCssVar = (property, value) => {
document.documentElement.style.setProperty(property, value);
};在 Blazor 组件（如 .razor）中注入并调用：
@inject IJSRuntime JSRuntime
<p>@code {
private async Task UpdateThemeColor(string color) {
await JSRuntime.InvokeVoidAsync("setCssVar", "--primary-color", color);
}
}这样就能把
--primary-color应用到整个页面（作用于
:root）。如果只想作用于某个元素，把
document.documentElement换成对应元素引用（见下一条）。
为特定元素设置 CSS 变量
适合局部样式控制，比如卡片背景、按钮悬停色等。
立即学习“前端免费学习笔记（深入）”；
先用@ref获取 DOM 元素引用：
<div @ref="cardElement" class="card">...</div>
<p>@code {
private ElementReference cardElement;</p><p>private async Task SetCardBg(string hex) {
await JSRuntime.InvokeVoidAsync("setElementCssVar", cardElement, "--card-bg", hex);
}
}对应 JS 函数：
window.setElementCssVar = (element, property, value) => {
element.style.setProperty(property, value);
};从 C# 读取当前 CSS 变量值
适用于响应式逻辑判断，比如根据主题色自动切换文字对比度。
JS 端提供读取函数：window.getCssVar = (property) => {
return getComputedStyle(document.documentElement).getPropertyValue(property).trim();
};C# 中调用并处理结果：
private async Task<string> GetPrimaryColor() {
return await JSRuntime.InvokeAsync<string>("getCssVar", "--primary-color");
}注意返回值可能为空字符串或带空格，建议调用后做
.Trim()处理。
封装成可复用的服务（进阶）
避免每个组件都写 JS 调用，可以封装一个
CssVariableService： 定义服务类（
Services/CssVariableService.cs）：
public class CssVariableService
{
private readonly IJSRuntime _jsRuntime;
<p>public CssVariableService(IJSRuntime jsRuntime) => _jsRuntime = jsRuntime;</p><p>public ValueTask SetRoot(string property, string value) =>
_jsRuntime.InvokeVoidAsync("setCssVar", property, value);</p><p>public ValueTask<string> GetRoot(string property) =>
_jsRuntime.InvokeAsync<string>("getCssVar", property);
}注册服务（Program.cs）：
builder.Services.AddScoped<CssVariableService>();组件中直接使用：
@inject CssVariableService CssVars
<p>@code {
private async Task ToggleDarkMode() {
var current = await CssVars.GetRoot("--bg-color");
await CssVars.SetRoot("--bg-color", current == "#1a1a1a" ? "#ffffff" : "#1a1a1a");
}
}基本上就这些。关键点在于：C# 不直接操作样式表，而是靠 JS 桥接；变量名必须带两个短横线（
--my-var）；作用域决定影响范围（
:root全局，元素 style 局部）。
