diff --git a/.storybook/components/DocContainer.tsx b/.storybook/components/DocContainer.tsx
new file mode 100644
index 00000000..1941eed5
--- /dev/null
+++ b/.storybook/components/DocContainer.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks'
+import { useDarkMode } from 'storybook-dark-mode'
+import { themes } from '@storybook/theming'
+
+export const DocsContainer = ({ children, context }) => {
+  const dark = useDarkMode()
+
+  return (
+    <BaseContainer
+      context={{
+        ...context,
+        parameters: {
+          ...context.parameters,
+          docs: {
+            theme: dark ? themes.dark : themes.light,
+          },
+        },
+      }}
+    >
+      {children}
+    </BaseContainer>
+  )
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 996211cf..5a79be81 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,5 @@
-import { committedLight } from './committed/theme.js'
-import { withTheme } from './committed/withTheme'
+import { withTheme } from './committed/withTheme';
+import { DocsContainer } from './components/DocContainer';
 
 export const decorators = [withTheme]
 export const parameters = {
@@ -24,6 +24,6 @@ export const parameters = {
     },
   },
   docs: {
-    theme: committedLight,
+    container: DocsContainer,
   },
 }