Dark mode on MainLayout

[Rocky-25]

Is it possible to get the dark mode within the main layout and set a class on an element here with "dark" if in dark mode and nothing if not?
I'm trying to do something similar to how the MessageBar adds the class dark but can't work out how that's happening?

[Rocky-25]

Or is it possible to add an additional css property --inactive-background-colour and that has one value for light mode and switches to another colour for dark mode? Is it possible to create custom css variables that know about dark/light modes?

[vnbaaij]

In FluentMessageBar we do this:

 protected string? ClassValue => new CssBuilder(Class)
     .AddClass("fluent-messagebar", () => Type == MessageType.MessageBar)
     .AddClass("dark", () => GlobalState.Luminance == StandardLuminance.DarkMode)

So that class is added based on the GlobalState state, You should be able to tap in to that too by injecting it into your own code:

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

You can do the CSS variables things you are describing by using JavaScript. In fact, that is what the web components script is doing itself as well. But it is not easy to do and I do not have the expertise to help you with that.