Change font color of elements?

[true-perfect-code]

Hi Fluent-Community

How can I change the font color of FluentUI elements? For example for Switch, Accordion, Button or List?

For labels and open accordions, I do this (e.g. in MainLayout.razor) via

    @* FONT COLOR *@
    .fluent-typography,
    .expanded {
        color: @FontColor !important;
    }

Thanks
pc

[vnbaaij]

Use the NeutralForeground token. See also https://www.fluentui-blazor.net/DesignTokens and the example code there and temporarily also at https://www.fluentui-blazor.net/issue-tester (which will be removed soon)

[true-perfect-code]

Hi @vnbaaij

thanks for your answer.

When I read the page https://www.fluentui-blazor.net/DesignTokens, I could easily switch between dark/light mode (although this is much easier with <FluentDesignTheme Mode=”@DesignThemeMode“ OfficeColor=”@OfficeColor“ /> ) and I can also easily round the controls with await ControlCornerRadius.WithDefault(“20”);. Setting control colors is also no problem with await AccentBaseColor.WithDefault(“#217346”); or await NeutralBaseColor.WithDefault(“#f2c811”);, although this also works with the FluentDesignTheme tag.

Where I still have the problem (and this was initially my problem) is that I do not know how to change the font color of labels or controls?

If I understood the concept behind “DesignTokens” (please correct me if I wrong), then all settings are controlled by DI. For example, if you want to change dark/light mode, then you create DI

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

and calls the method
await BaseLayerLuminance.WithDefault

to set the value. Or if you want to set certain controls, then you call the method SetValueFor and pass object reference with the value dark/light.
(although I have to ask why this method expects a string or float parameter and not enum DesignThemeModes?)

So my impression is that design change is well thought out and would be very easy to implement. But my problem is that I can't find the DI-Informations for different customizations. I suspect that there is also an

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

with which I could adjust the font color, but unfortunately this does not work as I thought.

Is there any more information (GitHub Examples, web sites, tutorials)) about this DI or have I misunderstood the whole thing?

Thanks
pc

[vnbaaij]

No, it seems you understand the system correctly. But you did not understand my remark when I said to use NeutralForeground. That is the one you need to inject and change.

A lot of the tokens are mentioned/described on our https://www.fluentui-blazor.net/DesignTokens page. This info came from the original source at https://fast.design/docs/1.x/design-systems/fast-frame#configuring-styles. I do not think there is much more docs o that. If you want to dig deeper, you'll need to dive into the actual rendered HTML and see what CSS variables are being used in the components.

[true-perfect-code]

Hi @vnbaaij

I have of course looked at NeutralForeground, but this DI does not exist:

Of the others DI's, only NeutralForegroundActive is present, all others are null. Nevertheless, it does not work even with NeutralForegroundActive:
await NeutralForegroundActive.WithDefault(“#f2c811”);
and also not with
await NeutralForegroundActive.WithDefault(“#f2c811”.ToSwatch());

The text color always remains black for all labels such as controls (accordion, checkboxes, lists, etc.).

Note:
Currently I can only change the color of the labels and also expanded Accordion (but not Accordion button) via CSS:

    @* FONT COLOR *@
    .fluent-typography,
    .expanded {
        color: @FontColor !important;
    }

The problem is that the customization of texts for other controls (checkboxes, lists, etc.) does not work by simply taking the class, although there are also situations where no class is available, but color is inherited, which complicates the whole thing.

pc

[dvoituron]

Did you tried updating the --neutral-foreground-rest CSS variable?
Example: body { --neutral-foreground-rest: red; }

[true-perfect-code]

@dvoituron

Thanks, it works!

[true-perfect-code]

So I invested some time to find out the best way to change the look of the app at runtime in FluentUI. The need for this functionality arose from the need to create an accessible app. At this point, many thanks to @vnbaaij and @dvoituron for their valuable advice and help.

If there are any errors or incorrect conclusions in my handling, please let me know so that I can update this post accordingly.

Here is how I programmatically change the visual appearance of the app at runtime:

1. Change Background
To change the background I use JS. But I am sure that there are better ways in FluentUI. If anyone knows, please let me know.

Blazor
await JSRuntime!.InvokeVoidAsync("setBackgroundColor", UserMana!.UserSettings.BackgroundColor);

JS

window.setBackgroundColor = function (color) {
    if (color && document.body) {
        document.body.style.setProperty("background", color, "important");
    }
};

2. Change Labels (font color)
I have implemented this with CSS in the MainLayout.razor.

    .fluent-typography{
        color: @FontColor !important;
    }

**3. Change color of control labels **
I have implemented this with CSS in the MainLayout.razor.

    body {
        --neutral-foreground-rest: @FontColor !important;
        @* --type-ramp-base-font-size: 24px; *@
    }

4. Change font size

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

                    // Fontsize
                    await TypeRampBaseFontSize.WithDefault(UserSettings.FontSize.ToString() + "px");

5. Change control color
The controls can either be changed via <FluentDesignTheme Mode=“@DesignThemeMode” OfficeColor=“@OfficeColor” /> or via design tokens (see https://www.fluentui-blazor.net/DesignTokens). With the first option, I couldn't figure out how to change the inner part of the control, so I decided to use the second option because it's easier there.

I have implemented the DI in the base class of the app:

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

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

I also have the loading and saving of the settings in the base class, because I have to call this functionality from different parts of the app. But I think that because of DI it is not important where this implementation is done.

                    await AccentBaseColor.WithDefault(UserSettings.Int__AccentBaseColor.ToSwatch());
                    await NeutralBaseColor.WithDefault(UserSettings.Int__NeutralBaseColor.ToSwatch());

6. Change mode (dark/light)
I also do this via await BaseLayerLuminance.WithDefault, whereby (float)1.0 or (float)0.15) is set as the parameter here:
await BaseLayerLuminance.WithDefault(UserMana.UserSettings.Mode);
However, it is unclear to me why the parameter is not defined as DesignThemeModes.Dark or DesignThemeModes.Light!

7.. Reload page
e.g. NavigationManager!.NavigateTo("/");

Note:
You should use the following syntax instead of label for the switch,

                    <FluentSwitch @bind-Value=@FormUserSettings.PromptBeforeDeleting Style="margin-left: 5px; margin-top: 15px;">
                        <span class="fluent-typography" slot="checked-message">@Appl._T_(UserMana?.list_sprache, "Yes")</span>
                        <span class="fluent-typography" slot="unchecked-message">@Appl._T_(UserMana?.list_sprache, "No")</span>
                    </FluentSwitch>

Because you can change the label color via class=“fluent-typography”.

To create list boxes with Office colors, it is best to use:

                <FluentSelect 
                    Items="@(Enum.GetValues<OfficeColor>())"
                    Height="300px"
                    @bind-SelectedOption=@FormUserSettings.OfficeColor
                    Width="150px"
                    Style="margin-left: 15px; margin-top: 3px;" />

Switching back and forth between ENUM and HEX color code is best done in a model (e.g. Settings-model):

        // Color (UI-Controls)
        private static readonly Dictionary<OfficeColor, string> ColorMap = InitializeColorMap();

        private static Dictionary<OfficeColor, string> InitializeColorMap()
        {
            return Enum.GetValues<OfficeColor>()
                .ToDictionary(
                    color => color,
                    color =>
                    {
                        var memberInfo = typeof(OfficeColor).GetMember(color.ToString()).FirstOrDefault();
                        var description = memberInfo?.GetCustomAttribute<DescriptionAttribute>(false)?.Description ?? "#000";
                        return description == "default" ? "#0078d4" : description;
                    });
        }

        public string Int__OfficeColor { get; set; } = "#0078d4"; // Gespeicherter HEX-Wert
        private OfficeColor _officeColor = OfficeColor.Default;

        public OfficeColor OfficeColor
        {
            get
            {
                // Suche den OfficeColor basierend auf Int__OfficeColor
                var match = ColorMap.FirstOrDefault(kvp => kvp.Value.Equals(Int__OfficeColor, StringComparison.OrdinalIgnoreCase));
                return match.Key != default(OfficeColor) ? match.Key : OfficeColor.Default; // Fallback auf Default
            }
            set
            {
                if (_officeColor != value)
                {
                    _officeColor = value;
                    Int__OfficeColor = ColorMap.TryGetValue(value, out string? hex) ? hex : "#000"; // Fallback auf #000
                    IsChanged = true;
                }
            }
        }

The color code as a string in HEX format is therefore in Int__OfficeColor

If there are better solutions in one place or another (I can especially imagine OfficeColor <=> HEX code) please post here, then I can adapt my code accordingly.

Hope this post can help someone.

pc