Blazor FluentUI Swatch not translated to Color Hex

Question

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.

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

Gary Chan · Accepted Answer · 2024-05-18 04:48:12Z

0

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" />

edited May 18, 2024 at 4:48

answered May 16, 2024 at 16:52

Gary Chan

5684 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gary Chan Over a year ago

In the interim, here is a workaround ``` <style> fluent-switch.mySwitch { --myColor: yellowgreen; --neutral-foreground-rest: var(--myColor); --accent-fill-hover: var(--myColor); --accent-fill-active: var(--myColor); --accent-fill-rest: var(--myColor); } </style> <FluentSwitch /> <FluentSwitch Class="mySwitch"/>```

Gary Chan Over a year ago

Reference for workaround css-tricks.com/styling-a-web-component/…

Collectives™ on Stack Overflow

Blazor FluentUI Swatch not translated to Color Hex

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related