Blazor .NET8明暗主题渲染异常：页面切换未触发主题切换逻辑

问题原因 #

Blazor是单页应用（SPA），切换页面时不会重新加载整个HTML文档，因此body的onload事件仅在首次页面加载时触发，后续页面切换不会执行；而使用OnAfterRenderAsync时，组件先渲染出默认样式再切换主题，会导致短暂闪烁。

解决方案1：在index.html中添加全局脚本监听路由事件 #

直接在index.html的body标签开头添加脚本，既处理首次加载的主题应用，又监听Blazor路由切换事件：

<body>
    <script>
        function applyTheme() {
            const mode = localStorage.getItem('mode');
            const body = document.body;
            if (mode === 'dark') {
                body.classList.add('dark');
            } else {
                body.classList.remove('dark');
            }
        }

        // 首次加载时应用主题（确保DOM已就绪）
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', applyTheme);
        } else {
            applyTheme();
        }

        // 监听Blazor页面切换事件，切换页面时重新应用主题
        window.addEventListener('blazornavigationend', applyTheme);
    </script>

    <div id="app">Loading...</div>
    <!-- 其他Blazor相关脚本 -->
</body>

解决方案2：使用JavaScript隔离+根组件初始化 #

如果需要更模块化的处理，可以用JS隔离实现：

1. 创建wwwroot/theme.js文件：

export function initTheme() {
    applyTheme();
    // 监听路由切换事件
    window.addEventListener('blazornavigationend', applyTheme);
}

function applyTheme() {
    const mode = localStorage.getItem('mode');
    const body = document.querySelector('body');
    mode === 'dark' ? body.classList.add('dark') : body.classList.remove('dark');
}

2. 在App.razor中注入IJSRuntime并初始化主题：

@inject IJSRuntime JS

<Router AppAssembly="@typeof(App).Assembly">
    <!-- 路由内容 -->
</Router>

@code {
    protected override async Task OnInitializedAsync()
    {
        await JS.InvokeVoidAsync("import('./theme.js').then(module => module.initTheme())");
    }
}

这两种方案都能避免页面切换时的主题失效和闪烁问题，优先推荐方案1，实现更简洁直接。

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