如何将MudBlazor的明暗主题切换开关移至AppBar组件？

核心思路 #

主题切换的状态_isDarkMode由MainLayout中的MudThemeProvider持有，需让AppBar组件读取该状态并触发状态更新，通过参数传递+事件回调实现父子组件状态同步，确保MudThemeProvider能感知状态变化并切换主题。

步骤1：修改AppBar组件，添加状态接收与回调逻辑 #

更新AppBar.razor，添加参数接收当前暗色模式状态，定义回调事件通知父组件状态变更，并加入主题切换开关：

<MudAppBar Elevation="1" Dense="true">
    <NavLink href="/">
        home
    </NavLink>
    <MudSpacer />

    <!-- 主题切换开关 -->
    <MudSwitch 
        @bind-Value="IsDarkMode" 
        Color="Color.Primary" 
        T="bool" 
        Icon="@Icons.Material.Filled.DarkMode" 
        IconOff="@Icons.Material.Filled.LightMode"
        Class="me-2" />

    <i class="fa-solid fa-right-to-bracket" style="color: #059669;"></i>
</MudAppBar>

@code {
    // 接收父组件传递的当前暗色模式状态
    [Parameter]
    public bool IsDarkMode { get; set; }

    // 定义回调事件，通知父组件状态变更
    [Parameter]
    public EventCallback<bool> IsDarkModeChanged { get; set; }
}

步骤2：在MainLayout中绑定AppBar的状态与回调 #

更新MainLayout.razor，将_isDarkMode状态传递给AppBar，通过Blazor的@bind-*语法糖自动关联参数与回调：

@using demo.UI.Components
@inherits LayoutComponentBase

<MudThemeProvider @bind-IsDarkMode="@_isDarkMode" Theme="_theme" />

<MudLayout>
    <!-- 双向绑定IsDarkMode，实现状态同步 -->
    <AppBar @bind-IsDarkMode="@_isDarkMode" />
    <SideBar />
    <MudMainContent>
        @*Body*@
        this is my content, blah blah
    </MudMainContent>
</MudLayout>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

@code
{
    private MudTheme _theme = new();
    private bool _isDarkMode = true;
}

说明：之前尝试失败的常见原因 #

• 仅传递IsDarkMode参数但未绑定IsDarkModeChanged回调，导致AppBar内开关变更无法通知MainLayout更新状态，MudThemeProvider感知不到变化。
• 手动实现回调但未正确调用IsDarkModeChanged.InvokeAsync(newValue)，无法触发父组件的状态更新。

验证效果 #

启动项目后，点击AppBar中的主题开关，_isDarkMode会同步更新，MudThemeProvider会立即应用对应明暗主题，实现全局主题切换。

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