CODEWITHSUNDEEP
blazorfluent-ui
Yannic van de Kuit
Yannic van de Kuit

Reputation: 55

Blazor FluentUI Swatch not translated to Color Hex

I'm trying to change the style of a Fluent UI switch, so that the color of the dot is different when the switch is off.

My Html:

<FluentSwitch @ref="ref1"/>

And my code behind:

private Microsoft.FluentUI.AspNetCore.Components.DesignTokens.Swatch customColor = "#0473ce".ToSwatch();

[Inject]
private NeutralForegroundRest neutralForegroundRest { get; set; } = default!;

private FluentSwitch? ref1;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await neutralForegroundRest.SetValueFor(ref1!.Element, customColor);
    }
}

This code seems to work, and actually update the value for the CSS element, however, it changes to [object Object] instead of the expected Hex code.

enter image description here

How should this be fixed so that the hex code is actually set instead of the [object Object]?

Upvotes: 0

Views: 179

Answers (1)

Gary Chan
Gary Chan

Reputation: 558

This is a bug. If you create an issue in the repository, it can be triaged.

One way of achieving what you want would be to target the variables matching the design token used to render the underlying web component fluent-switch.

<style>
    fluent-switch.mySwitch {
        --custom-color : limegreen;
        --neutral-foreground-rest: var(--custom-color);
    }
</style>

<FluentSwitch />
<FluentSwitch Class="mySwitch" />

Upvotes: 0

Related Questions