feat: improve text color in Dark mode

[markoweb2]

🙋 Feature Request

The Color.Success value does not change when switching to Dark mode. Text is rather unreadable.

🤔 Expected Behavior

Would expect it to change to a brighter color, to make it more readable in Dark mode.

😯 Current Behavior

<FluentLabel>This is good readable text</FluentLabel>
<FluentLabel Color="@Color.Success">This text is unreadable in dark mode.</FluentLabel>

In normal Light mode, everything is good:

Switching to Dark mode, the Color.Success value does not change at all, I can barely read the green text:

💁 Possible Solution

Update the --success variable to CSS color: forestgreen in Dark mode (one should not have to dwelve into DesignTokens and changing the entire color palette for this). This is definently a step up from the current behavior and matches the Color.Error tone and readability.

Although both could be improved further by using color: limegreen and color: orangered for their Dark mode values:

🔦 Context

PS! One cannot use Color="@Color.Custom" with FluentLabel, because the property CustomColor does not exist. Either add it or write in the FluentLabel documentation, to use the Style property with CSS color: somecolor if you want to apply custom color.

[markoweb2]

Using the FluentDesignTheme component to switch to Dark mode.

[vnbaaij]

PS! One cannot use Color="@Color.Custom" with FluentLabel, because the property CustomColor does not exist. Either add it or write in the FluentLabel documentation, to use the Style property with CSS color: somecolor if you want to apply custom color.

We are looking at adding it to label for the next version. In the meantime an update to the docs should suffice. We do take PR's you know. Care to contribute?

[vnbaaij]

Added CustomColor implementation. See PR mentioned above.

[markoweb2]

In case someone actually wants a solution/workaround to the problem stated.
In my MainLayout.razor I have the FluentDesignTheme element (at the top), including a FluentProfileMenu from where I can change theme and color.
I added an OnLuminanceChanged event:

<FluentDesignTheme @bind-Mode="@this.ThemeMode" @[email protected] StorageName="theme" OnLuminanceChanged="this.OnLuminanceChanged" />

@code
{
    private bool isDark = false;

    public DesignThemeModes ThemeMode { get; set; }
    public OfficeColor? OfficeColor { get; set; }

    private void OnLuminanceChanged(LuminanceChangedEventArgs arg)
    {
        this.isDark = arg.IsDark;
    }
}

And then I added in the same file (right below FluentDesignTheme), to override the values:

@if (this.isDark)
{
    <style>
        body {
            --success: limegreen;
            --error: orangered;
        }
    </style>
}

Followed by the rest of the page code:

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>
    
    <main>
        <div class="top-row px-4">
            <FluentProfileMenu ... />
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>