如何通过自定义AppTheme修复MudNavLink点击后文本颜色异常？

你遇到的问题是MudNavLink被点击激活时，文本颜色和背景对比度太低，导致难以辨认。通过自定义MudBlazor的AppTheme，可以强制激活态的导航链接文本使用你设置的TextPrimary颜色（黑色）。

步骤1：创建自定义AppTheme类 #

定义包含TextPrimary配置和自定义样式的主题类：

public class AppTheme : Theme
{
    public AppTheme()
    {
        // 设置全局主文本颜色为黑色
        Palette = new Palette
        {
            TextPrimary = Colors.Shades.Black
        };

        // 覆盖激活态导航链接的文本颜色
        CustomStyles = @"
            .mud-nav-link-active .mud-nav-link-text {
                color: var(--mud-palette-text-primary) !important;
            }
        ";
    }
}

步骤2：注册自定义主题 #

在应用启动配置中替换默认主题：

builder.Services.AddMudServices(config =>
{
    config.Theme = new AppTheme();
});

原理说明 #

MudBlazor默认会在导航链接激活时，将文本颜色切换为主题的Primary色，这可能和背景色冲突。通过CustomStyles指定激活态的.mud-nav-link-text使用--mud-palette-text-primary变量（即你设置的黑色），就能确保激活时文本颜色始终保持清晰。

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