Update

packages/redux-devtools-ui/.storybook/preview.ts

@@ -1,14 +0,0 @@
-import type { Preview } from '@storybook/react';
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

packages/redux-devtools-ui/.storybook/preview.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+
+import { Container } from '../src';
+import { listSchemes, listThemes } from '../src/utils/theme';
+
+const withThemeProvider = (Story, context) => (
+  <Container
+    themeData={{
+      theme: context.globals.theme,
+      scheme: context.globals.scheme,
+      colorPreference: context.globals.color,
+    }}
+  >
+    <Story {...context} />
+  </Container>
+);
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'default',
+      toolbar: {
+        items: listThemes(),
+        showName: true,
+      },
+    },
+    scheme: {
+      name: 'Color Scheme',
+      description: 'Global color scheme for components',
+      defaultValue: 'default',
+      toolbar: {
+        items: listSchemes(),
+        showName: true,
+      },
+    },
+    color: {
+      name: 'Color',
+      description: 'Global color for components',
+      defaultValue: 'light',
+      toolbar: {
+        items: ['auto', 'light', 'dark'],
+        showName: true,
+      },
+    },
+  },
+  decorators: [withThemeProvider],
+};
+
+export default preview;