Merge pull request #133 from DaleStudy/62-storybook-docs-dark-mode

스토리북 문서 다크모드 적용

Author: Sunjae95

.storybook/main.ts

@@ -9,6 +9,7 @@ const config: StorybookConfig = {
     "@storybook/addon-interactions",
     "@storybook/addon-a11y",
     "@storybook/addon-themes",
+    "@storybook/theming",
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.ts

@@ -0,0 +1,44 @@
+import "../src/index.css";
+import React from "react";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import { DocsContainer } from "@storybook/blocks";
+import { themes } from "@storybook/theming";
+import type { Preview, ReactRenderer } from "@storybook/react";
+import type { DocsContainerProps } from "@storybook/blocks";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      toc: true,
+      container: (props: DocsContainerProps<ReactRenderer>) => {
+        try {
+          const { getStoryContext, storyById } = props.context;
+
+          const globals = getStoryContext(storyById()).globals;
+          const theme = globals.theme === "dark" ? themes.dark : themes.light;
+          return <DocsContainer {...props} theme={theme} />;
+        } catch {
+          return <DocsContainer {...props} />;
+        }
+      },
+    },
+  },
+  decorators: [
+    withThemeByClassName<ReactRenderer>({
+      themes: {
+        light: "",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+  ],
+  tags: ["autodocs"],
+};
+
+export default preview;

.storybook/preview.tsx

@@ -47,6 +47,7 @@
     "@storybook/react-vite": "^8.6.12",
     "@storybook/test": "^8.6.12",
     "@storybook/test-runner": "^0.22.0",
+    "@storybook/theming": "^8.6.11",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",