From a8ac1cd6ffe0a164101e8603dea75f1e4db7917e Mon Sep 17 00:00:00 2001
From: naporin0624 <naporin0624@gmail.com>
Date: Thu, 4 Apr 2024 10:33:10 +0000
Subject: [PATCH] chore(storybook): apply docs theming

---
 .storybook/docs-container.tsx | 16 ++++++++++++++++
 .storybook/preview.js         |  7 +++++++
 2 files changed, 23 insertions(+)
 create mode 100644 .storybook/docs-container.tsx

diff --git a/.storybook/docs-container.tsx b/.storybook/docs-container.tsx
new file mode 100644
index 000000000..da93feb4e
--- /dev/null
+++ b/.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>
+  )
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 874ee8e87..f54b798e5 100644
--- a/.storybook/preview.js
+++ b/.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]