teams.spfx.theme.ts

const [themeState, setThemeState] = useState<string>(props.teamsTheme || "default");

//Run effect once when the component loads. We will use this effect to register our Theme Changed handler.
useEffect(() => {

  console.log("registerOnThemeChangeHandler useEffect fired");

  props.context.sdks.microsoftTeams.teamsJs.registerOnThemeChangeHandler((theme: string) => {

    console.log(`theme changed to: ${theme}`);

    //Update the themeState with the new theme.
    setThemeState(theme);
  });

}, []);