diff --git a/web/.storybook/preview.js b/web/.storybook/preview.js
index ffdc47805..c1d5f4eb4 100644
--- a/web/.storybook/preview.js
+++ b/web/.storybook/preview.js
@@ -3,14 +3,19 @@ import '../styles/global.less';
 import '../styles/theme.less';
 import '../stories/preview.scss';
 import { themes } from '@storybook/theming';
+import { DocsContainer } from './storybook-theme';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
+  docs: {
+    container: DocsContainer,
+  },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
+    viewMode: 'docs',
   },
   darkMode: {
     current: 'dark',
@@ -21,6 +26,7 @@ export const parameters = {
       brandImage: 'https://owncast.online/images/logo.svg',
       brandTitle: 'Owncast',
       brandUrl: 'https://owncast.online',
+      appContentBg: '#171523',
     },
     // Override the default light theme
     light: { ...themes.normal },
diff --git a/web/.storybook/storybook-theme.js b/web/.storybook/storybook-theme.js
new file mode 100644
index 000000000..d323f1bd6
--- /dev/null
+++ b/web/.storybook/storybook-theme.js
@@ -0,0 +1,31 @@
+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,
+        storyById: id => {
+          const storyContext = context.storyById(id);
+          return {
+            ...storyContext,
+            parameters: {
+              ...storyContext?.parameters,
+              docs: {
+                ...storyContext?.parameters?.docs,
+                theme: dark ? themes.dark : themes.light,
+              },
+            },
+          };
+        },
+      }}
+    >
+      {children}
+    </BaseContainer>
+  );
+};