.netblazor-server-sidefluent-ui

Using .net 8, Blazor and FluentUI - Set accentFillRest value

I using the out-of-the-box setup for Blazor and FluentUI. My only goal is that the banner on top should have a specific color. I noticed that the color is set using CSS like this:

background-color: var(--accent-fill-rest);

How and where do I set the variable --accent-fill-rest? I don't care if the other color scheme will change as long as this variable has a specific color.

Solution

  • You can set the variable the following way: Option 1: in you app.css stylesheet in wwwroot:

    body {
    --accent-fill-rest: green;
}
...

    Option 2: in the App.razor file in Components

    ...
<body style="--accent-fill-rest: green;">
...