FluentNavMenu with accent color background

[rsukremap]

I have been trying all sorts of approaches to try and get the FluentNavMenu (whole menu including groups and items) to display with the accent color as the background instead of the foreground (basically the same color styling as an accent button - light text on accent background). I have some limited success with design tokens in code (which required a combination of a specific colour and BaseLayerLuminance), but completely failed in my attempts to style the text on the items and saw a problem where the styles were reset every time the page resized and the menu collapsed.

Before I go down the road of nasty css hacks, I wonder if anyone has attempted the same thing or has had a view on whether I am just trying something that isn't supported by the Fluent UI framework?

[vnbaaij]

The component is styled like that to follow the Fluent Design guidelines as much as possible. We therefore do not expose a lot of built-in possibilities to change the styling significantly. But it is still all HTML and CSS so you can style it any way you want. Wouldn't necissarily call all of that hacks.

[vnbaaij]

I'm converting this to a discussion as it is not really an issue with the library but more a question of how to use/change something.