FE: Add dark mode view to storybook (#43469)

.storybook/preview.js

@@ -1,3 +1,42 @@
+import React, { useEffect } from "react";
+import "../frontend/index.scss";
+
+export const globalTypes = {
+  theme: {
+    description: "Toggle dark/light mode",
+    defaultValue: "light",
+    toolbar: {
+      items: [
+        { value: "light", icon: "sun", title: "Light mode" },
+        { value: "dark", icon: "moon", title: "Dark mode" },
+      ],
+      dynamicTitle: true,
+    },
+  },
+};
+
+const applyTheme = (isDark) => {
+  document.body.classList.toggle("dark-mode", isDark);
+  document.body.style.backgroundColor = isDark ? "var(--core-fleet-white)" : "";
+  document.body.style.color = isDark ? "var(--core-fleet-black)" : "";
+
+  document.querySelectorAll(".docs-story").forEach((el) => {
+    el.style.backgroundColor = isDark ? "var(--core-fleet-white)" : "";
+  });
+};
+
+const withTheme = (Story, context) => {
+  const isDark = context.globals.theme === "dark";
+
+  useEffect(() => {
+    applyTheme(isDark);
+  }, [isDark]);
+
+  return <Story />;
+};
+
+export const decorators = [withTheme];
+
 export const parameters = {
   controls: {
     matchers: {
@@ -6,4 +45,5 @@ export const parameters = {
     },
   },
 };
+
 export const tags = ["autodocs"];

frontend/components/LiveQuery/TargetChipSelector/TargetChipSelector.stories.tsx

@@ -21,15 +21,6 @@ const meta: Meta<typeof TargetChipSelector> = {
       action: "clicked", // Use Storybook's action to track clicks
     },
   },
-  parameters: {
-    backgrounds: {
-      default: "light",
-      values: [
-        { name: "light", value: "#ffffff" },
-        { name: "dark", value: "#333333" },
-      ],
-    },
-  },
 };
 
 export default meta;

frontend/components/TabNav/TabNav.stories.tsx

@@ -7,21 +7,6 @@ import TabNav from "./TabNav";
 const meta: Meta<typeof TabNav> = {
   component: TabNav,
   title: "Components/TabNav",
-  parameters: {
-    backgrounds: {
-      default: "light",
-      values: [
-        {
-          name: "light",
-          value: "#ffffff",
-        },
-        {
-          name: "dark",
-          value: "#333333",
-        },
-      ],
-    },
-  },
 };
 
 export default meta;

frontend/components/TeamsDropdown/TeamsDropdown.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
@@ -6,6 +7,13 @@ import TeamsDropdown from ".";
 const meta: Meta<typeof TeamsDropdown> = {
   title: "Components/TeamsDropdown",
   component: TeamsDropdown,
+  decorators: [
+    (Story) => (
+      <div style={{ minHeight: 300 }}>
+        <Story />
+      </div>
+    ),
+  ],
   args: {
     currentUserTeams: [
       { id: 1, name: "Team 1" },

frontend/components/buttons/DropdownButton/DropdownButton.stories.tsx

@@ -31,7 +31,6 @@ const meta: Meta<typeof DropdownButton> = {
     variant: {
       options: [
         "default",
-        "success",
         "alert",
         "pill",
         "link",
@@ -49,17 +48,6 @@ const meta: Meta<typeof DropdownButton> = {
       control: "select",
     },
   },
-  parameters: {
-    backgrounds: {
-      default: "header",
-      values: [
-        {
-          name: "header",
-          value: "linear-gradient(270deg, #202226 0%, #353840 100%)",
-        },
-      ],
-    },
-  },
   args: {
     variant: "unstyled",
     className: "story",

frontend/components/buttons/DropdownButton/_styles.scss

@@ -69,3 +69,9 @@
     margin-top: 1px;
   }
 }
+
+// Override the chevron icon stroke to inherit the button's text color
+// so it adapts correctly in dark mode
+.dropdown-button .icon svg path {
+  stroke: currentColor;
+}