Accent color/text color in dark mode override

[shark0151]

Hi! I am wondering if there is a way to make the accent color fixed for the various elements that use it, specifically in dark mode.
In light mode the color is indeed the one I set

However when switching to dark mode the adaptive color system kicks in, and switches the color brightness and also the text color as such

I don't seem to have much control over what color is in dark mode. I would prefer to keep the color as is and especially keep the foreground white, but I have not found an obvious way to do so and still use the themes/design tokens/adaptive colors

[vnbaaij]

We don't have anything to prevent the adaptive color system from kicking in. Only thing you might try is to manually change the specific tokens that the color system recipes generate. Look at ForegroundOnAccent, AccentFill, etc. See the DesignTokens page.

[shark0151]

Do you mean AccentFillRest? I have not found an AccentFill token

I get an error if I try to set that or AccentFillHover,AccentFillActive,AccentFillFocus. Only AccentBaseColor and the deltas seem to work.

at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
         at Microsoft.FluentUI.AspNetCore.Components.DesignTokens.DesignToken`1.WithDefault(T value) in /_/src/Core/DesignTokens/DesignToken.razor.cs:line 98
         at DCR.Case.App.OnAfterRenderAsync(Boolean firstRender) in C:\Git\DCR.Flow\src\App.razor:line 115
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Microsoft.JSInterop.JSException: p.contrast is not a function
n@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:252932
Ol@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:252957
evaluate@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:263130
Fe<@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:263282
observe@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:4866
handleChange@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:139320
notify@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:3148
call@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:5449
notify@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:3239
notify@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:3401
set@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:139470
set@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:141270
setValueFor@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:137871
withDefault@https://localhost:7257/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:138019

Function call from App.razor. Am I missing something?

@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
[Inject]
private AccentFillRest accentFill { get; set; } = default!;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
   if (firstRender)
   {
       await accentFill.WithDefault("#1a6bff".ToSwatch());
    }
}

[vnbaaij]

Ah, no you are not missing anything.
AccentFill is actually one of the tokens that gets created/set with the recipes I was talking about. (you can see from the error it wants to do something with contrast which is something we do not have a method for) The AccentFillRest and other tokens Hover, etc) get created from that AccentFill token.

So I don't think we have a way currently to set any of these tokens. Only thing left then maybe is to set the actual value in the CSS for the associated variables. Just be aware that theose do not change automatically then when going from light to dark (and vv) and that checks for contrast etc will not be performed.

[shark0151]

I can get the result I want by setting the deltas to much lower values
You can get the consistently colored buttons with this (although it is still probably a good idea to adjust dark mode contrast for legibility)

public async Task ModeSwitch(LuminanceChangedEventArgs eventArgs)
{
    //Maintain consistent button color between light/dark mode
    if (eventArgs.IsDark)
    {
        //Matching light mode contrast
        // If changing values maintain offset to keep fluent contrast ratio
        await RestDelta.WithDefault(-19);   // -x           x=19(keep lighmode luminance)
        await HoverDelta.WithDefault(-17);  // -(x-2)
        await ActiveDelta.WithDefault(-14); // -(x-5)
        await FocusDelta.WithDefault(-19);  // -x

        // Links are a bit too dark for dark mode but maintain offset
        await FgRestDelta.WithDefault(-33);     // -x          x=33(keep lighmode luminance)
        await FgHoverDelta.WithDefault(-36);    // -(x+3)
        await FgActiveDelta.WithDefault(-25);   // -(x-8)
        await FgFocusDelta.WithDefault(-33);    // -x
    }
    else
    {
        await RestDelta.WithDefault(0);     // x
        await HoverDelta.WithDefault(-2);   // x-2
        await ActiveDelta.WithDefault(-5);  // x-5
        await FocusDelta.WithDefault(0);    // x

        await FgRestDelta.WithDefault(0);       // x
        await FgHoverDelta.WithDefault(3);      // x+3
        await FgActiveDelta.WithDefault(-8);    // x-8
        await FgFocusDelta.WithDefault(0);      // x
    }
}

And you would have to reset them when switching to light/dark mode. And probably change AccentForeground deltas as well for consistency