How to change css variables in dark mode?

[pmeems]

As mentioned in #3016 I'm trying another time to implement light-dark mode in my application.
I still don't understand how the Design Tokens work, I can't find any example. I'm wondering if anybody does understand the tokens 😁

Using CSS I got a long way. Using the newly added light-dark() CSS function helped a lot.

I now have my header, footer in the same background color in dark and light mode. I have my menu in the correct colors and the white background is switched to a dark gray when in dark mode.

I'm now struggling with the buttons. It seems I can't get them to use the correct color. In light mode it is OK, in dark mode it should use the same color.

Here's an example of my use of the light-dark function:

html, * {
  font-family: var(--font-roboto);
  font-size: var(--type-ramp-base-font-size);
  line-height: var(--type-ramp-base-line-height);
  font-weight: 400;
  color: light-dark(var(--darkblue-color), whitesmoke);
}
body {
  background-color: light-dark(whitesmoke, rgb(51, 51, 51));
}

This is how I try to change the CSS variables:

body[data-theme="dark"],
body[data-theme="system-dark"] {
  --accent-base-color: var(--orangered-color);
  --accent-fill-rest: #c2350b;
  --accent-fill-hover: #d13c0d;
  --accent-fill-active: #e4450e;
  --accent-fill-focus: #c2350b;
  --accent-foreground-rest: #831905;
  --accent-foreground-hover: #6d0f03;
  --accent-foreground-active: #bb320b;
  --accent-foreground-focus: #831905;
  --accent-stroke-control-rest: linear-gradient(#c84923 90%, #842407 100%);
  --accent-stroke-control-hover: linear-gradient(#d54e23 90%, #942b09 100%);
  --accent-stroke-control-active: #e65624;
  --accent-stroke-control-focus: linear-gradient(#c84923 90%, #842407 100%);
}

I can see the values have changed but further down in the 'constructed stylesheet' I see the variables are changed again, this time to the 'wrong' colors.

How can I set the colors of the buttons the way I want, which is basically don't change wether it is dark or light mode?

[vnbaaij]

How can I set the colors of the buttons the way I want, which is basically don't change wether it is dark or light mode?

You can't do that with 'our' css variables. These are set by the design tokens (and the web components script) and follow the change from light mode to dark mode. The idea of the tokens is that you don't have to do things manually. The script predates the light-dark css methods so I don't expect that to work flawlessly.

I still don't understand how the Design Tokens work, I can't find any example. I'm wondering if anybody does understand the tokens 😁

There is a code example on the design token page. What is missing there for you?

[pmeems]

Thanks @vnbaaij for your reply.

Looking again at the design token page and tinkering a bit more I found that adding this to my page will make my button have the correct color in dark and light mode:

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Set to dark mode
            await BaseLayerLuminance.SetValueFor(_fluentButtonReference!.Element, (float)1).ConfigureAwait(false);

            // Set color
            await AccentBaseColor.SetValueFor(_fluentButtonReference!.Element, "#cc3300".ToSwatch()).ConfigureAwait(false);

            await InvokeAsync(StateHasChanged).ConfigureAwait(false); // Ensure UI updates
        }
    }

But this is per button. Does this mean I have to create a new component that just wraps FluentButton and in this wrapper I use the above code?

And that needs to be done with all Fluent components? I can't do this using one command in my MainLayout or something?

[vnbaaij]

But this is per button. Does this mean I have to create a new component that just wraps FluentButton and in this wrapper I use the above code?

Yes, I think it is possible to do that?

And that needs to be done with all Fluent components? I can't do this using one command in my MainLayout or something?

That is the way the tokens work. Either you set it for the whole app or you set it for individual elements. Now, I'm not the absolute expert on this (you could ask in the Fluent UI Web Components repo), but I think child items inherit tokens set on the parent element. So what you could try is to see if your settings also apply if multiple buttons are in a container element for which you change the tokens with the code you posted.