Blazor WASM中如何程序化修改index.html里<body>标签的类？

你不需要只依赖JS Interop，以下两种方式都能实现需求：

1. JS Interop（直接且直观） #

这是最直接的实现方式，通过调用JS函数操作DOM：

• 在wwwroot/index.html中添加JS工具函数：

<script>
  // 直接设置body的类名
  window.setBodyClass = function(className) {
    document.body.className = className;
  }
  // 切换指定类名（适合明暗主题切换场景）
  window.toggleBodyClass = function(className) {
    document.body.classList.toggle(className);
  }
</script>

• 在Blazor组件中注入IJSRuntime并调用：

@inject IJSRuntime JSRuntime

<button @onclick="ToggleDarkTheme">切换明暗主题</button>

@code {
    private const string DarkThemeClass = "dark-theme";

    private async Task ToggleDarkTheme()
    {
        await JSRuntime.InvokeVoidAsync("toggleBodyClass", DarkThemeClass);
    }
}

2. 封装主题服务（优雅的纯C#调用体验） #

如果不想在组件中直接写JS调用逻辑，可以封装一个主题服务，内部隐藏JS Interop细节：

• 创建主题服务类：

public class ThemeService
{
    private readonly IJSRuntime _jsRuntime;
    private const string DarkThemeClass = "dark-theme";

    public ThemeService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public async Task ToggleDarkMode()
    {
        await _jsRuntime.InvokeVoidAsync("toggleBodyClass", DarkThemeClass);
    }

    public async Task SetLightMode()
    {
        await _jsRuntime.InvokeVoidAsync("setBodyClass", "");
    }
}

• 在Program.cs中注册服务：

builder.Services.AddScoped<ThemeService>();

• 在组件中注入服务直接使用：

@inject ThemeService ThemeService

<button @onclick="ThemeService.ToggleDarkMode">切换主题</button>

关于纯Blazor无JS实现的说明 #

Blazor的组件树默认不包含<body>标签，因此无法直接通过Blazor的组件绑定语法修改它的类名。任何直接操作<body>DOM的逻辑，本质上都需要借助JS Interop，但可以通过封装让C#代码层完全感知不到JS的存在。

内容的提问来源于stack exchange，提问作者Sam