fix(docsite-v9): move theme picker under component title so it can be…

… visible on embedded pages (#25385)

apps/public-docsite-v9/src/DocsComponents/FluentDocsContainer.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { DocsContainer, DocsContextProps } from '@storybook/addon-docs';
-import { FluentStoryContext, THEME_ID, themes } from '@fluentui/react-storybook-addon';
-import { FluentDocsHeader } from './FluentDocsHeader.stories';
+import { FluentStoryContext } from '@fluentui/react-storybook-addon';
 import { webLightTheme, FluentProvider } from '@fluentui/react-components';
 
 interface IFluentDocsContainerProps {
@@ -12,17 +11,8 @@ interface IFluentDocsContainerProps {
  * A container that wraps storybook's native docs container to add extra components to the docs experience
  */
 export const FluentDocsContainer: React.FC<IFluentDocsContainerProps> = ({ children, context }) => {
-  // eslint-disable-next-line deprecation/deprecation
-  const selectedTheme = themes.find(theme => theme.id === context.globals[THEME_ID]);
   return (
     <>
-      <FluentProvider style={{ backgroundColor: 'transparent' }} theme={selectedTheme?.theme ?? webLightTheme}>
-        <FluentDocsHeader
-          // eslint-disable-next-line deprecation/deprecation
-          storybookGlobals={context.globals}
-        />
-      </FluentProvider>
-
       {/** TODO add table of contents */}
       <FluentProvider style={{ backgroundColor: 'transparent' }} theme={webLightTheme}>
         <DocsContainer context={context}>{children}</DocsContainer>

apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx

@@ -12,6 +12,8 @@ import {
 } from '@storybook/addon-docs';
 import { makeStyles, shorthands } from '@griffel/react';
 import { Toc, nameToHash } from './Toc.stories';
+import { THEME_ID, themes } from '@fluentui/react-storybook-addon';
+import { ThemePicker } from './ThemePicker.stories';
 
 const useStyles = makeStyles({
   divider: {
@@ -40,6 +42,8 @@ const useStyles = makeStyles({
 
 export const FluentDocsPage = () => {
   const context = React.useContext(DocsContext);
+  // eslint-disable-next-line deprecation/deprecation
+  const selectedTheme = themes.find(theme => theme.id === context.globals![THEME_ID]);
   const stories = context.componentStories();
   const primaryStory = stories[0];
   const styles = useStyles();
@@ -61,6 +65,7 @@ export const FluentDocsPage = () => {
 
       <div className={styles.wrapper}>
         <div className={styles.container}>
+          <ThemePicker selectedThemeId={selectedTheme?.id} />
           <Subtitle />
           <Description />
           <hr className={styles.divider} />