基于.NET 8、Blazor与FluentUI设置--accent-fill-rest变量

以下是几种直接有效的实现方式，按需选择即可：

方法1：全局CSS覆盖（最简单直接） #

• 找到项目wwwroot/css目录下的全局样式文件（比如app.css或site.css），若没有可新建。
• 在文件末尾添加以下代码，替换颜色值为你的指定色：

:root {
  --accent-fill-rest: #ff5722; /* 示例颜色，替换为你的目标色值 */
}

• 确保该CSS文件在_Host.cshtml（Blazor Server）或index.html（Blazor WebAssembly）中的引用顺序晚于FluentUI的官方样式文件，这样才能覆盖默认变量值。

方法2：组件内局部修改 #

如果仅需在单个组件中生效：

• 在Blazor组件的<style>标签内添加：

::deep :root {
  --accent-fill-rest: #你的指定颜色值;
}

或者仅针对当前组件内的元素作用：

.my-component-container {
  --accent-fill-rest: #你的指定颜色值;
}

随后给组件的根元素加上class="my-component-container"。

方法3：通过FluentUI主题配置（框架原生方式） #

利用FluentUI的主题系统配置基础色，框架会自动生成包括--accent-fill-rest在内的一系列关联变量：

• 在Program.cs中修改FluentUI的服务配置：

builder.Services.AddFluentUIComponents()
    .AddConfiguration(config =>
    {
        // 配置浅色主题的 accent 基础色
        config.Themes.Light.AccentBaseColor = "#你的指定颜色值";
        // 若需要同步修改深色模式，添加下面一行
        // config.Themes.Dark.AccentBaseColor = "#你的指定颜色值";
    });

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