Need help with design system

[PascalVorwerk]

For our products we would like to inverse the default styling that happens right now! Right now the background of our webpage is completely white (#FFFFFF) and the first layers of for example the navigation bar are a bit more gray: #FBFBFB.

For our usecase, we would like the entire background to be more dark (#FAFAFA) and the background of components like the navigation bar to be white (#FFFFF).

I've tried to change some settings like the BaseNeutralBase color to a more dark color, but it did not change things the way we would like.

Can someone help me with what i need to change for this effect to happen?

[dvoituron]

You can use FluentDesignTheme component or <fluent-design-theme mode="dark" primary-color="word" /> element to change the theme. https://www.fluentui-blazor.net/DesignTheme

[PascalVorwerk]

Ok i will try to change some of those

[PascalVorwerk]

So far:

Results in my primary color being removed from icons and made all the headers of my table white instead of the normal 'gray' for example:

[PascalVorwerk]

It almost feels to me like the layers keep doing the inverse of what i want. I want a darker background and 'lighter' components to focus on top of this. But the components keep having a 'darker' background then the layer behind them. If i read the fluent 2 design it does describe the behaviour i would expect:

"Visual hierarchy using neutrals
Use lighter neutrals on surfaces to highlight areas of primary focus and create a sense of hierarchy. This ensures a person’s eye is drawn to the areas of an interface that need the most attention or that will be most useful to them."

[vnbaaij]

But we are still on Fluent 1 design...

I think what you are running into is the adaptive color system that is being used. Because of the layer being dark, a text color is made lighter to guard contrast is sufficient etc.
I'm not the biggest expert on this so you might get better help in the fluentui repo (where the web components are)

[PascalVorwerk]

The library is on fluent 1 design but links on the home page to the fluent 2 design system.. It makes it a bit confusing.. 😜 but okay.

The issue i am running into is the exact opposite. There are 4 layers.. where each layer on top of the previous one always gets 'darker' in comparison to the one behind it. I believe, when reading the design language, this should be the opposite? The lowest layer should be the darkest being used? But this was from the fluent 2 design website... not fluent 1..