Default App-Wide Brand Theming

[stevencreaney]

Given a new Blazor MAUI Hybrid app implementing FluentUI for Blazor, how would we go about setting up our default palette?
For example, we use a specific shade of blue as our brand color, but we also have requirements for a variety of colors in our palette (success, warning, neutral, info, etc..) plus buttons that are Green, Purple, Red, etc....

So far all I see for color is the Accent and Neutral colors. I see that I can do something like this, but how do I define/override what --accent-color is?:
<FluentButton BackgroundColor="var(--accent-color)" Color="var(--body-text)" Style="margin: 8px" OnClick="StartLoginAsync">Login</FluentButton>

Is there any way to extend the Appearance option to include something like Primary, Secondary, Tertiary? Looking for any options to setup app-wide theming so I can reuse the palette and not have to override every specific instance.

[vnbaaij]

Hi,

If you start with following what is described here: https://github.com/microsoft/fluentui-blazor#styles, you will have in your app the CSS variables for success, etc.

Fluent 1 (and therefore this library) works with a design system that defines 1 accent color and uses a technique called recipes (see https://learn.microsoft.com/en-us/fluent-ui/web-components/getting-started/styling#adaptive-color-system) to determine the end color being presented and also gives you derived values for hover, focus, etc.

We do not offer any other specific functionality to use a palette but you are of course totally free to define you own CSS classes and styles and use these with the components Class and Style parameters (all FluentComponentBase derived components support these). The only exception to this is the FluentButton component that has the BackgroundColor parameter which overrides the default appearance property.

See https://www.fluentui-blazor.net/DesignTokens and the demo site code on how you can set the accent color to a different value (by using our Design Token implementation)

[fedemartino]

I've read the docs and understand the concept behind DesignTokens, but I'm still not able to understand how to set the initial --accent-base-color. It's always the default blue color no matter what I do. Where should I set that initial color value?

[vnbaaij]

Take a look at the source code of the demo site itself. It is in the repository here in the examples folder.
We have functionality in there to change the accent color to any of the defined Office colors. But you can of course also use your own color (where the recipe described before will change that color a bit most probably)

[dvoituron]

@stevencreaney @fedemartino We've added this discussion topic #1049, about design... give us your feedback.

[fedemartino]

Thanks @vnbaaij and @dvoituron for your replies. This is awsome!