Why did you make it so hard/confusing to customize the look and feel of this library

[mihaimyh]

This library has a real potential, but I find it really hard/confusing when it comes to changing the default colors/fonts, the styling in general.

I would love a global way to customize the main styles of the entire application (primary, secondary colors, fonts, spacing, etc.). Is it possible, or am I missing something?

[vnbaaij]

Yes, seems you are missing something 😁. We are implementing the Fluent Design System. That system is a lot stricter on what fonts, size and color you 'should' use. It is quite different from something like Bootstrap and we are purposely not trying to build something like that. For example, Fluent doesn't have a real notion of a secondary color.

We follow those strict guidelines in the default settings that we implement. If you want to deviate from what is prescribed, that is entirely possible but only by using the Design Tokens. We are still thinking about and working on ways to make that (a bit) easier, for example with the FluentDesignTheme component we released last week.

Please take a look at the mentioned Fluent Design guidelines here (Fluent 1) and here (Fluent 2)

Ps. We are still on Fluent 1. Fluent 2 will come with the next version of the web components

[kzu]

Takes some getting used to @mihaimyh, but unless you have a dedicated design team, it's a such a breeze not having to think about colors and fonts :). Not being a designer myself, obviously. Coming from bootstrap, it took some adapting, but now I only define my accent color and call it a day (design-wise).

[chrpai]

I'm new to Blazor and FluentUI-Blazor and while I'm liking it and seeing a lot of value, I'm kind of in the same boat. I'm fighting the adaptive color system. Everything else is great.

I've read over themes and design tokens but I'm just hitting a wall trying to grok it. Are there any additional resources / examples / repos that I could look at to get over this hump?

I've see the theme designer (https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html) .... is there a way to export that and use it to configure my project?

[wolfgangschneider]

I am struggling with same .
What’s the preferred, suggested , and proper way to style/ theme / company identity/whatever, the whole app, without flickering ,working on SSR, Server Interaktive and WASM .

[vnbaaij]

As said, the goal of the library is to implement the Fluent Design System. It is not tailored to deliver a corporate identity. You have limited options in specifying exact colors (because of the adaptive color system that automatically takes contrast ratio into account).
If that is ok for you, start with a project based on our templates and include the things we describe in the https://fluentui-blazor.net/DesignTheme page. You should b be good to go then.

Regarding SSR, a lot of components will render in SSR mode, but you will not get a fully working implementation. For example, a FluentDataGrid renderes fine but you won't have sorting as that requires interactivity.

[wolfgangschneider]

vnbaaij
Thanks for your quick reply.

On https://www.fluentui-blazor.net/ is a paragraph "Configuring the Design System" and there stand: his Blazor component (and its underlying Web Component) exposed a little over 60 variables that could be used to change things like typography, color, sizes, UI spacing, ....

Sorry. I do not understand.

• On the one hand there are a huge bucket of Design Tokens to modify Components (https://fluentui-blazor.net/DesignTokens).
• On the other Hand there are only 2 (3 with OfficeColor) properties on FluentDesignTheme , to modify the whole Application (https://fluentui-blazor.net/DesignTheme) Mode and AccentColor
• The FluentDesignSystemProvider can set more tha 60 design tokens, but it should not used anymore.
• There is also the possibility to use the xxx.WithDefault() function to set App wide Design Tokens but I found no proper place where to call it

Some other info's that confuse me.

• The sister project Fluent UI React Write:
  Customizable: Fluent-styled components by default, but easy to integrate your own brand and theme

[vnbaaij]

It is not that is is not possible to change a lot of the things, it is just not our goal to make making those changes super accessible. That is why we do not have them available from the Theme. It is to 'protect' you from derailing the desing system. Opinionated yes, but as it is our library, we can do that. We also think it is necessary. If you really want to change things, you can still do it with the Design Tokens.

The text you are refering to is about the older FluentDesignSytemProvider. It is still there but is not the preferred way to work with Design Tokens anymore, partially because it did not expose all Design Tokens (in total about 160) but just a subset (of about 60).

That same page shows how you can work with Design Tokens from code: https://www.fluentui-blazor.net/DesignTokens#using-design-tokens-from-code.

Generally speaking, you use SetValueFor for an incidental change and use WithDefault to set the default value for a token (so site/app wide). If you want to use that last one, you need to do it in a place early in the startup of the app/site, but because it uses JS Interop, it can not be done sooner than in OnAfterRender(Async).

Fluent UI React is a completely separate project that uses the same Design System but does so through its own implementation. They do not use the Web Components and therefore do not have the adaptive color system. It indeed allows you more freedom on use of brand color. But you would have to use React, so there is that...

[wolfgangschneider]

Thanks for clarifications.

PS:
... It is to 'protect' you from derailing the desing system. Thats exactly what I want, but unfortunately not our designers.