Merge branch 'chore/docs-theming' into feat/storybook-v8

.storybook/docs-container.tsx

@@ -0,0 +1,16 @@
+import React, { ComponentPropsWithoutRef, FC } from 'react'
+import { DocsContainer as BaseContainer } from '@storybook/addon-docs'
+import { useDarkMode } from 'storybook-dark-mode'
+import { themes } from '@storybook/theming'
+
+export const DocsContainer: FC<
+  ComponentPropsWithoutRef<typeof BaseContainer>
+> = ({ children, ...rest }) => {
+  const dark = useDarkMode()
+
+  return (
+    <BaseContainer {...rest} theme={dark ? themes.dark : themes.light}>
+      {children}
+    </BaseContainer>
+  )
+}

.storybook/preview.js

@@ -1,6 +1,9 @@
 import themeDecorator from './theme-decorator'
+import { DocsContainer } from './docs-container'
+
 import './global.css'
 
+/** @type  */
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z0-9].*' },
   controls: {
@@ -9,6 +12,10 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  viewMode: 'docs',
+  docs: {
+    container: DocsContainer,
+  },
 }
 
 export const decorators = [themeDecorator]