diff --git a/.storybook/main.js b/.storybook/main.js
index 56d6b3d3c1a..7bace45c3fc 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -3,7 +3,7 @@ module.exports = {
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-links',
-    '@storybook/addon-essentials',
+    {name: '@storybook/addon-essentials', options: {backgrounds: false}},
     'storybook-addon-performance/register',
     ...(process.env.NODE_ENV === 'production' && process.env.GITHUB_JOB !== 'chromatic'
       ? ['@whitespace/storybook-addon-html']
@@ -13,4 +13,4 @@ module.exports = {
     options.plugins.push(['open-source', {editor: process.env.NODE_ENV === 'production' ? 'github' : 'vscode'}])
     return options
   }
-}
\ No newline at end of file
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 2e6b81c7da9..cf3e0091f3b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,121 +1,8 @@
 import {addons} from '@storybook/addons'
-import {ThemeProvider, themeGet, theme, BaseStyles} from '../src'
-import styled, {createGlobalStyle} from 'styled-components'
-import {addDecorator} from '@storybook/react'
 import {withPerformance} from 'storybook-addon-performance'
+import {withThemeProvider, toolbarTypes} from '../src/utils/story-helpers'
 
-addDecorator(withPerformance)
-
-// set global theme styles for each story
-const GlobalStyle = createGlobalStyle`
-  body {
-    background-color: ${themeGet('colors.canvas.default')};
-    color: ${themeGet('colors.fg.default')};
-  }
-`
-
-// only remove padding for multi-theme view grid
-const GlobalStyleMultiTheme = createGlobalStyle`
-  body {
-    padding: 0 !important;
-  }
-`
-
-// duo theme view, this can be extended for more themes
-const Wrapper = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 100vh;
-`
-
-// instead of global theme, only theme wrapper for each story
-const ThemedSectionStyle = styled.div`
-  background-color: ${themeGet('colors.canvas.default')};
-  color: ${themeGet('colors.fg.default')};
-  padding: 1rem;
-`
-
-export const globalTypes = {
-  colorMode: {
-    name: 'Color mode',
-    description: 'Color mode (day, night, auto, all)',
-    defaultValue: 'day',
-    toolbar: {
-      icon: 'paintbrush',
-      // array of colorMode items
-      items: ['day', 'night', 'auto', 'all'],
-      showName: true
-    }
-  },
-  dayScheme: {
-    name: 'Day color scheme',
-    description: 'Day color scheme',
-    defaultValue: 'light',
-    toolbar: {
-      icon: 'circlehollow',
-      items: Object.keys(theme.colorSchemes),
-      showName: true
-    }
-  },
-  nightScheme: {
-    name: 'Night color scheme',
-    description: 'Night color scheme',
-    defaultValue: 'dark',
-    toolbar: {
-      icon: 'circle',
-      items: Object.keys(theme.colorSchemes),
-      showName: true
-    }
-  }
-}
-
-// context.globals.X references items in globalTypes
-const withThemeProvider = (Story, context) => {
-  // used for testing ThemeProvider.stories.tsx
-  if (context.parameters.disableThemeDecorator) return <Story {...context} />
-
-  if (context.globals.colorMode === 'all') {
-    return (
-      <Wrapper>
-        <GlobalStyleMultiTheme />
-        <ThemeProvider colorMode="day" dayScheme={context.globals.dayScheme} nightScheme={context.globals.nightScheme}>
-          <ThemedSectionStyle>
-            <Story {...context} />
-          </ThemedSectionStyle>
-        </ThemeProvider>
-        <ThemeProvider
-          colorMode="night"
-          dayScheme={context.globals.dayScheme}
-          nightScheme={context.globals.nightScheme}
-        >
-          <ThemedSectionStyle>
-            <BaseStyles>
-              <div id="html-addon-root">
-                <Story {...context} />
-              </div>
-            </BaseStyles>
-          </ThemedSectionStyle>
-        </ThemeProvider>
-      </Wrapper>
-    )
-  }
-
-  return (
-    <ThemeProvider
-      colorMode={context.globals.colorMode}
-      dayScheme={context.globals.dayScheme}
-      nightScheme={context.globals.nightScheme}
-    >
-      <GlobalStyle />
-      <BaseStyles>
-        <div id="html-addon-root">
-          <Story {...context} />
-        </div>
-      </BaseStyles>
-    </ThemeProvider>
-  )
-}
-
+export const globalTypes = toolbarTypes
 export const decorators = [withThemeProvider, withPerformance]
 
 addons.setConfig({
diff --git a/src/utils/story-helpers.tsx b/src/utils/story-helpers.tsx
new file mode 100644
index 00000000000..a050824e44e
--- /dev/null
+++ b/src/utils/story-helpers.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import {Box, ThemeProvider, theme, themeGet, BaseStyles} from '../index'
+import {createGlobalStyle} from 'styled-components'
+
+// set global theme styles for each story
+const GlobalStyle = createGlobalStyle`
+  body {
+    background-color: ${themeGet('colors.canvas.default')};
+    color: ${themeGet('colors.fg.default')};
+  }
+`
+
+// only remove padding for multi-theme view grid
+const GlobalStyleMultiTheme = createGlobalStyle`
+  body {
+    padding: 0 !important;
+  }
+`
+
+// we don't import StoryContext from storybook because of exports that conflict
+// with primer/react more: https://github.com/primer/react/runs/6129115026?check_suite_focus=true
+type StoryContext = Record<string, unknown> & {globals: {colorScheme: string}; parameters: Record<string, unknown>}
+
+export const withThemeProvider = (Story: React.FC<StoryContext>, context: StoryContext) => {
+  // used for testing ThemeProvider.stories.tsx
+  if (context.parameters.disableThemeDecorator) return <Story {...context} />
+
+  const {colorScheme} = context.globals
+
+  if (colorScheme === 'all') {
+    return (
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(0, 1fr))',
+          height: '100vh'
+        }}
+      >
+        <GlobalStyleMultiTheme />
+        {Object.keys(theme.colorSchemes).map(scheme => (
+          <ThemeProvider key={scheme} colorMode="day" dayScheme={scheme}>
+            <BaseStyles>
+              <Box
+                sx={{
+                  padding: '1rem',
+                  height: '100%',
+                  backgroundColor: 'canvas.default',
+                  color: 'fg.default'
+                }}
+              >
+                <div id={`html-addon-root-${scheme}`}>
+                  <Story {...context} />
+                </div>
+              </Box>
+            </BaseStyles>
+          </ThemeProvider>
+        ))}
+      </Box>
+    )
+  }
+
+  return (
+    <ThemeProvider colorMode="day" dayScheme={colorScheme}>
+      <GlobalStyle />
+      <BaseStyles>
+        <div id="html-addon-root">
+          <Story {...context} />
+        </div>
+      </BaseStyles>
+    </ThemeProvider>
+  )
+}
+
+export const toolbarTypes = {
+  colorScheme: {
+    name: 'Color scheme',
+    description: 'Switch color scheme',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'photo',
+      items: [...Object.keys(theme.colorSchemes), 'all'],
+      showName: true
+    }
+  }
+}