Feature/dark mode

.gitignore

@@ -3,3 +3,4 @@ node_modules
 storybook-static
 .idea
 .pnpm-store
+.worktrees

.storybook/main.ts

@@ -1,7 +1,11 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-    stories: ["../src/**/*.stories.@(ts|tsx)", "../src/**/*.@(mdx|stories.@(md))"],
+    stories: [
+        "../src/docs/**/*.mdx",
+        "../src/**/*.stories.@(ts|tsx)",
+        "../src/**/*.@(mdx|stories.@(md))",
+    ],
     staticDirs: ["../assets"],
 
     addons: [

.storybook/preview.ts

@@ -1,15 +1,45 @@
 import type { Preview } from "@storybook/react";
+import React from "react";
 import "../src/styles/index.css";
 
 const preview: Preview = {
+    globalTypes: {
+        theme: {
+            description: "Global theme for components",
+            toolbar: {
+                title: "Theme",
+                icon: "circlehollow",
+                items: [
+                    { value: "light", icon: "sun", title: "Light" },
+                    { value: "dark", icon: "moon", title: "Dark" },
+                ],
+                dynamicTitle: true,
+            },
+        },
+    },
+    initialGlobals: {
+        theme: "light",
+    },
+    decorators: [
+        (Story, context) => {
+            const theme = context.globals.theme || "light";
+            // Support both class-based and data-attribute-based theming
+            document.documentElement.classList.remove("light", "dark");
+            document.documentElement.classList.add(theme);
+            document.documentElement.setAttribute("data-theme", theme);
+            return React.createElement(Story);
+        },
+    ],
     parameters: {
         actions: { argTypesRegex: "^on[A-Z].*" },
-        layout: "centered", // "centered" | "fullscreen"
+        layout: "centered",
         backgrounds: {
-            default: "white",
+            default: "themed",
             values: [
+                { name: "themed", value: "var(--color-bg-primary)" },
+                { name: "page", value: "var(--color-bg-page)" },
+                { name: "secondary", value: "var(--color-bg-secondary)" },
                 { name: "white", value: "#FFFFFF" },
-                { name: "light", value: "#FAFAFC" },
                 { name: "dark", value: "#212121" },
             ],
         },
@@ -21,13 +51,17 @@ const preview: Preview = {
         },
         options: {
             storySort: {
-                order: ["Home", "Icons gallery"],
+                method: "alphabetical",
+                order: [
+                    "Foundations",
+                    ["Introduction", "Colors", "Typography", "Theming"],
+                    "*",
+                ],
             },
             showPanel: true,
         },
     },
-
-    tags: ["autodocs"]
+    tags: ["autodocs"],
 };
 
 export default preview;