fix: FluentOverlay in Dark mode

[StevenRasmussen]

🐛 Bug Report

I'm not sure if this is a bug or by design. When the theme is set to Dark Mode it seems like the background of the overlay should switch from light to dark as well. Since the text switches to white... the white text on a white background does not look ideal.

💻 Repro or Code Sample

On the Overlay demo page on the site. Change the theme to Dark and then show one of the overlays:

🤔 Expected Behavior

Background of the overlay should change to black and have an opacity value similar to light theme (0.4 I believe). Here's an example of what I believe it should be:

Right now it looks like:

[vnbaaij]

I think it should actually use the NeutralBaseColor as the default value. This one does not differ between Light or Dark mode and is automatically using a value that is respectful to the needed contrast:

What do you think? (@dvoituron as well)

[StevenRasmussen]

I edited my original post to show an example with text. When the text changes from black to white for dark mode, the contrast seems off due to the white on grey. The white text on a dark background looks much better in my opinion.

[vnbaaij]

With the PR mentioned the background will follow the NeutralBaseColor. Default value is #808080 but you can set it to your own custom value with the DesignToken. See the SiteSettings in the preview site for an example of how you can change that color

[StevenRasmussen]

This is definitely better ;) Thanks! That being said, I just noticed that when you open a dialog it does seem to use black as the color to "grey-out" the background... which is what I was thinking the overlay should do as well. Anyway, do with that as you please. You can see this when you go to the Settings menu on the demo site and the dialog opens on the right.

[vnbaaij]

The overlay from the dialog comes from the web component and can't be change easily