chore: add theme support in storybook

Author: hugodutka

chat/.storybook/main.ts

@@ -1,17 +1,12 @@
-import type { StorybookConfig } from '@storybook/nextjs';
+import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [],
-  "framework": {
-    "name": "@storybook/nextjs",
-    "options": {}
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-themes"],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
   },
-  "staticDirs": [
-    "../public"
-  ]
+  staticDirs: ["../public"],
 };
-export default config;
+export default config;

chat/.storybook/preview.ts

@@ -1,14 +1,26 @@
-import type { Preview } from '@storybook/nextjs'
+import { Preview } from "@storybook/nextjs";
+
+import { withThemeByClassName } from "@storybook/addon-themes";
+import "../src/app/globals.css";
 
 const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
+        color: /(background|color)$/i,
+        date: /Date$/i,
       },
     },
   },
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: "",
+        dark: "dark",
+      },
+      defaultTheme: "dark",
+    }),
+  ],
 };
 
-export default preview;
+export default preview;

chat/bun.lock

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@storybook/addon-themes": "^9.0.17",
     "@storybook/nextjs": "^9.0.17",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",

chat/package.json

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
-import "../app/globals.css";
 
 import MessageInput from "../components/message-input";