Default value for design token

[echo-4droid]

Hi,

I am using Fluent in the WASM Blazor app and I have a problem with the default design setting.
I expected FluentUI's behavior to be similar to the default design setting in FAST - using the function designToken.withDefault(value), for exampleaccentColor.withDefault(SwatchRGB.from(parseColorHexRGB("#008ACE")!))
But the code below posted by Index.razor does not change anything.

@code {
  [Inject] 
  public AccentBaseColor AccentBaseColor { get; set; } = default!;
  
  protected override Task OnAfterRenderAsync(bool firstRender)
  {
    if (firstRender)
    {
      AccentBaseColor.WithDefault("#FF0000".ToSwatch());
    }
  }
}

How can I still configure the default styles?

Sorry if the question seemed silly. I'm new to frontend development.

[vnbaaij]

Hi,
WithDefault does just that, setting a default value for a token. To apply a token, you need to select a Dom element where you want to set the token for. See https://github.com/microsoft/fluentui-blazor/blob/main/examples/FluentUI.Demo.Shared/Shared/DemoMainLayout.razor.cs#L79-L80 for an example.

[tlmii]

Why doesn't WithDefault call the withDefault method on the underlying design token? The FAST withDefault method actually updates the value as used across the whole app.

[vnbaaij]

I did not know it did that. This is indeed then a very good tool to have in the toolbox

[dvoituron]

@echo-4droid We've added this discussion topic #1049, about design... give us your feedback.