[BUG]: `Nav` does not keep dark Fluent UI Theme.

[6gal6ler6]

Built a theme using Fluent UI Theme Designer

Theme props:

const myTheme = createTheme({
  palette: {
    themePrimary: '#ffffff',
    themeLighterAlt: '#767676',
    themeLighter: '#a6a6a6',
    themeLight: '#c8c8c8',
    themeTertiary: '#d0d0d0',
    themeSecondary: '#dadada',
    themeDarkAlt: '#eaeaea',
    themeDark: '#f4f4f4',
    themeDarker: '#f8f8f8',
    neutralLighterAlt: '#232323',
    neutralLighter: '#2c2c2c',
    neutralLight: '#3b3b3b',
    neutralQuaternaryAlt: '#444444',
    neutralQuaternary: '#4b4b4b',
    neutralTertiaryAlt: '#6a6a6a',
    neutralTertiary: '#c8c8c8',
    neutralSecondary: '#d0d0d0',
    neutralPrimaryAlt: '#dadada',
    neutralPrimary: '#ffffff',
    neutralDark: '#f4f4f4',
    black: '#f8f8f8',
    white: '#191919',
  }});

Preview:

Added the Component and a Table with Data:

Applied a light theme:

Primary color: #007582 Text color: #191919 Background color: #ffffff

Result is fine:

And when Applied the Theme to the Nav component this happened:

Primary color: #ffffff Text color: #ffffff Background color: #191919

On Hover:

AB#1002

[6gal6ler6]

I did this change on the code:

From this: applyTo="none"

        <ThemeProvider applyTo="none" theme={theme}>
            <Nav
                componentRef={componentRef}
                onLinkClick={onLinkClick}
                onLinkExpandClick={(ev?: React.MouseEvent<HTMLElement>, item?: INavLink) => {
                    if (item && item.key !== undefined) onHeaderClick(false, item.key, ev);
                }}
                selectedKey={selectedKey}
                styles={navStyles}
                groups={groups}
                ariaLabel={ariaLabel}
            />
        </ThemeProvider>

To this applyTo="element"

        <ThemeProvider applyTo="element" theme={theme}>
            <Nav
                componentRef={componentRef}
                onLinkClick={onLinkClick}
                onLinkExpandClick={(ev?: React.MouseEvent<HTMLElement>, item?: INavLink) => {
                    if (item && item.key !== undefined) onHeaderClick(false, item.key, ev);
                }}
                selectedKey={selectedKey}
                styles={navStyles}
                groups={groups}
                ariaLabel={ariaLabel}
            />
        </ThemeProvider>

And this is the result:

[jean-goyat]

Any planned release of this fix anytime soon? I know this was tagged for a November release but now I'm impatient for an updated package! (Thank you for all the ongoing work)

[denise-msft]

Thank you for reporting this issue. Our team is currently reviewing the issue and will provide updates as soon as possible.

In the meantime, would it be an option for you to make the layout container or screen background match the color you want the background to be? Or is it not a transparent layer?