microsoft / powercat-creator-kit

This toolkit helps create well-designed Power App experiences on the web & mobile. It contains a component library; PCF controls and other utilities that increase developer productivity.
MIT License
302 stars 50 forks source link

`Nav` does not keep dark Fluent UI Theme. #174

Open 6gal6ler6 opened 1 year ago

6gal6ler6 commented 1 year ago

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: image

Added the Component and a Table with Data: image

Applied a light theme:

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

Result is fine: image

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

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

image

On Hover:

image

AB#1002

6gal6ler6 commented 1 year ago

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:

image

jean-goyat commented 1 year ago

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)