How to set a neutralLayer2 as the default layer for a darker overall site

[markarnolditpro]

I'd like to darken the overall appearance of my site. If I look at the color picker , it seems I need to align the default them with neutralLayer2, swatch 49. How can I apply this change?

[MBNSoftware]

Could this help ?

https://fluent-components.azurewebsites.net/?path=/docs/getting-started-styling--page

[vnbaaij]

Design Tokens are indeed the way to go here. See also https://www.fluentui-blazor.net/DesignTokens on how you can apply them from C# code or in a declerative way in your razor files. You don't have to use Javascript to use them.

[markarnolditpro]

Thanks gents - I've seen those articles and still find it a bit unclear, but I'm muddling through. The simplest approach I've found which seems to work is to use the FluentDesignSystemProvider like so in App.razor (standalone WASM app):

<CascadingAuthenticationState>
    <FluentDesignSystemProvider BaseLayerLuminance="0.10f">
        <Router AppAssembly="@typeof(App).Assembly">
        ...
        </Router>
    </FluentDesignSystemProvider>
</CascadingAuthenticationState>

<FluentDesignTheme StorageName="theme" />
<FluentToastProvider MaxToastCount="10" />

Given a vanilla app with the Fluent-Blazor template, above works well but I now see a strip of color at the bottom of the page that is not picking up the BaseLayerLuminance="0.10f".

I believe this area is under the control of the <div id="app">... in index.html. Is it possible I'm wrapping the wrong top level element with FluentDesignSystemProvider?