feat(ui): add light theme toggle

.storybook/preview.ts

@@ -14,12 +14,40 @@ if (typeof window !== "undefined") {
 }
 
 const preview: Preview = {
+  decorators: [
+    (Story, context) => {
+      const theme = context.globals.theme === "light" ? "light" : "dark";
+
+      if (typeof document !== "undefined") {
+        document.documentElement.setAttribute("data-ui-theme", theme);
+      }
+
+      return Story();
+    },
+  ],
+  globalTypes: {
+    theme: {
+      description: "Dashboard component theme",
+      defaultValue: "dark",
+      toolbar: {
+        title: "Theme",
+        icon: "circlehollow",
+        items: [
+          { value: "dark", title: "Dark" },
+          { value: "light", title: "Light" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
   parameters: {
     backgrounds: {
       default: "canvas",
       values: [
         { name: "canvas", value: "#020302" },
         { name: "raised", value: "#0b0d0c" },
+        { name: "light canvas", value: "#f3f5ed" },
+        { name: "light raised", value: "#eef1e7" },
       ],
     },
     controls: {