How to Change FluentProvider Theme from Child Component?

[tgram-3D]

This seems like a very basic question but I'm having trouble finding any documentation on this. If I want to have a button or something in a child component to switch themes, how do I do that? I figured the useFluent hook can be used to get the current provider instance but I don't know how to properly set the theme.

 <FluentProvider theme={teamsLightTheme}>
            <Root />
   </FluentProvider>

So if I want to change the theme to teamsDark or something without drilling props through Root, how do I do that?

[johnmagira]

@tgram-3D were you able to find a solution to this problem?

[khmakoto]

I think you'd have to keep track of it in your own context

const SetTopLevelThemeContext = React.createContext<React.Dispatch<React.SetStateAction<Partial<Theme>>>>(undefined);

const TopLevelComponent = (props) => {
  const [theme, setTheme] = React.useState<Partial<Theme>>(teamsLightTheme);

  return (
    <FluentProvider theme={theme}>
      <SetTopLevelThemeContext.Provider value={setTheme}>
        <Root />
      </SetTopLevelThemeContext.Provider>
    </FluentProvider>
  );
}

...

const AnotherInnerComponent = (props) => {
  const setTopLevelTheme = React.useContext(SetTopLevelThemeContext);
  setTopLevelTheme(anotherTheme);
  
  ...
}

[tgram-3D]

@khmakoto I just saw this, but that's exactly what I ended up doing. Thanks!

[khmakoto]

No prob! Happy that it worked for you!