code · pull · Jun 30, 2026 · Jun 30, 2026 · Jun 30, 2026
diff --git a/packages/react-components/react-storybook-addon/.storybook/preview.js b/packages/react-components/react-storybook-addon/.storybook/preview.js
@@ -1,9 +1,13 @@
 import * as rootPreview from '../../../../.storybook/preview';
+import { themes } from '../src';
 
 /** @type {typeof rootPreview.decorators} */
 export const decorators = [...rootPreview.decorators];
 
 /** @type {typeof rootPreview.parameters} */
-export const parameters = { ...rootPreview.parameters };
+export const parameters = {
+  ...rootPreview.parameters,
+  fluentThemes: themes.filter(theme => theme.id === 'web-light' || theme.id === 'web-dark'),
+};
 
 export const tags = ['autodocs'];
diff --git a/packages/react-components/react-storybook-addon/CHANGELOG.json b/packages/react-components/react-storybook-addon/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-storybook-addon",
   "entries": [
+    {
+      "date": "Tue, 30 Jun 2026 10:28:26 GMT",
+      "tag": "@fluentui/react-storybook-addon_v0.7.1",
+      "version": "0.7.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "dmytrokirpa@microsoft.com",
+            "package": "@fluentui/react-storybook-addon",
+            "commit": "19694317e6746e6ad9a795cfafddd422bad0b0a1",
+            "comment": "feat: allow theme picker options configuration"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 16 Jun 2026 18:28:45 GMT",
       "tag": "@fluentui/react-storybook-addon_v0.7.0",

diff --git a/packages/react-components/react-storybook-addon/CHANGELOG.md b/packages/react-components/react-storybook-addon/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-storybook-addon
 
-This log was last generated on Tue, 16 Jun 2026 18:28:45 GMT and should not be manually modified.
+This log was last generated on Tue, 30 Jun 2026 10:28:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.7.1)
+
+Tue, 30 Jun 2026 10:28:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.7.0..@fluentui/react-storybook-addon_v0.7.1)
+
+### Patches
+
+- feat: allow theme picker options configuration ([PR #36358](https://github.com/microsoft/fluentui/pull/36358) by dmytrokirpa@microsoft.com)
+
 ## [0.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.7.0)
 
 Tue, 16 Jun 2026 18:28:45 GMT 

diff --git a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md
@@ -36,6 +36,8 @@ export interface FluentGlobals extends Args {
     [STRICT_MODE_ID]?: boolean;
     // (undocumented)
     [THEME_ID]?: ThemeIds;
+    // (undocumented)
+    [THEMES]?: Theme[];
 }
 
 // @public
@@ -45,6 +47,8 @@ export interface FluentParameters extends Parameters_2 {
     // (undocumented)
     fluentTheme?: ThemeIds;
     // (undocumented)
+    fluentThemes?: Theme[];
+    // (undocumented)
     mode?: 'default' | 'vr-test';
     // (undocumented)
     reactStorybookAddon?: {
@@ -67,11 +71,17 @@ export interface FluentStoryContext extends StoryContext {
 // @public (undocumented)
 export function parameters(options?: FluentParameters): FluentParameters;
 
+// @public (undocumented)
+export type Theme = (typeof themes)[number];
+
 // @public (undocumented)
 export const THEME_ID: "storybook_fluentui-react-addon_theme";
 
 // @public (undocumented)
-export type ThemeIds = (typeof themes)[number]['id'];
+export type ThemeIds = Theme['id'];
+
+// @public (undocumented)
+export const THEMES: "storybook_fluentui-react-addon_themes";
 
 // @public (undocumented)
 export const themes: readonly [{

diff --git a/packages/react-components/react-storybook-addon/package.json b/packages/react-components/react-storybook-addon/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-storybook-addon",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "fluentui react storybook addon",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

diff --git a/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx b/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx
@@ -4,9 +4,9 @@ import { ArrowDownIcon } from '@storybook/icons';
 import { useParameter } from 'storybook/manager-api';
 
 import type { JSXElement } from '@fluentui/react-utilities';
-import type { ThemeIds } from '../theme';
-import { themes, defaultTheme } from '../theme';
-import { THEME_ID } from '../constants';
+import type { ThemeIds, Theme } from '../theme';
+import { themes as defaultThemes, defaultTheme } from '../theme';
+import { THEME_ID, THEMES } from '../constants';
 import type { FluentParameters } from '../hooks';
 import { useGlobals } from '../hooks';
 
@@ -19,7 +19,7 @@ export interface ThemeSelectorItem {
 }
 
 function createThemeItems(
-  value: typeof themes,
+  value: Theme[],
   changeTheme: (id: ThemeIds) => void,
   getCurrentTheme: () => ThemeIds,
 ): ThemeSelectorItem[] {
@@ -39,6 +39,7 @@ function createThemeItems(
 export const ThemePicker = (): JSXElement => {
   const [globals, updateGlobals] = useGlobals();
   const fluentTheme: FluentParameters['fluentTheme'] = useParameter('fluentTheme');
+  const themes: Theme[] = useParameter('fluentThemes') ?? globals[THEMES] ?? defaultThemes;
 
   const selectedThemeId = fluentTheme ? fluentTheme : globals[THEME_ID] ?? defaultTheme.id;
   const selectedTheme = themes.find(entry => entry.id === selectedThemeId);
@@ -67,7 +68,7 @@ export const ThemePicker = (): JSXElement => {
         />
       );
     },
-    [selectedThemeId, setTheme],
+    [selectedThemeId, setTheme, themes],
   );
 
   return (

diff --git a/packages/react-components/react-storybook-addon/src/constants.ts b/packages/react-components/react-storybook-addon/src/constants.ts
@@ -3,3 +3,4 @@ export const ADDON_ID = 'storybook_fluentui-react-addon';
 export const DIR_ID = `${ADDON_ID}_dir` as const;
 export const STRICT_MODE_ID = `${ADDON_ID}_strict-mode` as const;
 export const THEME_ID = `${ADDON_ID}_theme` as const;
+export const THEMES = `${ADDON_ID}_themes` as const;
diff --git a/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.tsx b/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.tsx
@@ -19,8 +19,8 @@ import { makeStyles } from '@griffel/react';
 import { InfoFilled } from '@fluentui/react-icons';
 import type { JSXElement } from '@fluentui/react-utilities';
 
-import { DIR_ID, THEME_ID } from '../constants';
-import { themes } from '../theme';
+import { DIR_ID, THEME_ID, THEMES } from '../constants';
+import { themes as defaultThemes, type Theme } from '../theme';
 
 import { getDocsPageConfig } from './utils';
 import { DirSwitch } from './DirSwitch';
@@ -371,6 +371,8 @@ export const FluentDocsPage = ({
   assertStoryMetaValues(primaryStory);
 
   const dir = primaryStoryContext.parameters?.dir ?? primaryStoryContext.globals?.[DIR_ID] ?? 'ltr';
+  const themes: Theme[] =
+    primaryStoryContext.parameters?.fluentThemes ?? primaryStoryContext.globals?.[THEMES] ?? defaultThemes;
   const selectedTheme = themes.find(theme => theme.id === primaryStoryContext.globals![THEME_ID]);
 
   const hideArgsTable = Boolean(primaryStoryContext.parameters?.docs?.hideArgsTable);
@@ -421,7 +423,7 @@ export const FluentDocsPage = ({
         <div className={styles.container}>
           {(showThemePicker || showDirSwitcher || showCopyAsMarkdown) && (
             <div className={styles.globalTogglesContainer}>
-              {showThemePicker && <ThemePicker selectedThemeId={selectedTheme?.id} />}
+              {showThemePicker && <ThemePicker selectedThemeId={selectedTheme?.id} themes={themes} />}
               {showDirSwitcher && <DirSwitch dir={dir} />}
               {showCopyAsMarkdown && <CopyAsMarkdownButton storyId={primaryStory.id} />}
             </div>

diff --git a/packages/react-components/react-storybook-addon/src/docs/ThemePicker.tsx b/packages/react-components/react-storybook-addon/src/docs/ThemePicker.tsx
@@ -6,8 +6,8 @@ import type { MenuProps } from '@fluentui/react-menu';
 import { MenuButton } from '@fluentui/react-button';
 import { makeStyles } from '@griffel/react';
 
-import type { ThemeIds } from '..';
-import { themes, THEME_ID } from '..';
+import type { ThemeIds, Theme } from '..';
+import { THEME_ID } from '..';
 
 const useStyles = makeStyles({
   menuButton: {
@@ -27,7 +27,7 @@ const useStyles = makeStyles({
 /**
  * Theme picker used in the react-components docs header
  */
-export const ThemePicker: React.FC<{ selectedThemeId?: string }> = ({ selectedThemeId }) => {
+export const ThemePicker: React.FC<{ selectedThemeId?: string; themes: Theme[] }> = ({ selectedThemeId, themes }) => {
   const styles = useStyles();
   const [currentThemeId, setCurrentThemeId] = React.useState(selectedThemeId ?? null);
 

diff --git a/packages/react-components/react-storybook-addon/src/hooks.ts b/packages/react-components/react-storybook-addon/src/hooks.ts
@@ -1,8 +1,8 @@
 import { useGlobals as useStorybookGlobals } from 'storybook/manager-api';
 import type { Args as StorybookArgs, StoryContext as StorybookContext, Parameters } from '@storybook/react-webpack5';
 
-import type { DIR_ID, STRICT_MODE_ID, THEME_ID } from './constants';
-import type { ThemeIds } from './theme';
+import type { DIR_ID, STRICT_MODE_ID, THEME_ID, THEMES } from './constants';
+import type { Theme, ThemeIds } from './theme';
 
 export interface FluentStoryContext extends StorybookContext {
   globals: FluentGlobals;
@@ -15,6 +15,7 @@ export interface FluentStoryContext extends StorybookContext {
 export interface FluentGlobals extends StorybookArgs {
   [DIR_ID]?: 'ltr' | 'rtl';
   [THEME_ID]?: ThemeIds;
+  [THEMES]?: Theme[];
   [STRICT_MODE_ID]?: boolean;
 }
 
@@ -24,6 +25,7 @@ export interface FluentGlobals extends StorybookArgs {
 export interface FluentParameters extends Parameters {
   dir?: 'ltr' | 'rtl';
   fluentTheme?: ThemeIds;
+  fluentThemes?: Theme[];
   mode?: 'default' | 'vr-test';
   reactStorybookAddon?: {
     disabledDecorators?: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'];

diff --git a/packages/react-components/react-storybook-addon/src/index.ts b/packages/react-components/react-storybook-addon/src/index.ts
@@ -1,7 +1,7 @@
 export type { FluentGlobals, FluentParameters, FluentStoryContext } from './hooks';
-export type { ThemeIds } from './theme';
+export type { ThemeIds, Theme } from './theme';
 export { themes } from './theme';
-export { DIR_ID, THEME_ID } from './constants';
+export { DIR_ID, THEME_ID, THEMES } from './constants';
 export { parameters } from './hooks';
 export { FluentCanvas, FluentDocsPage, FluentStory } from './docs';
 export type { FluentDocsPageProps } from './docs';
diff --git a/packages/react-components/react-storybook-addon/src/theme.ts b/packages/react-components/react-storybook-addon/src/theme.ts
@@ -10,5 +10,6 @@ export const themes = [
 
 export const defaultTheme = themes[0];
 
-export type ThemeIds = (typeof themes)[number]['id'];
-export type ThemeLabels = (typeof themes)[number]['label'];
+export type Theme = (typeof themes)[number];
+export type ThemeIds = Theme['id'];
+export type ThemeLabels = Theme['label'];