use official storybook themes addon to apply themes

.storybook/main.ts

@@ -6,7 +6,7 @@ const config: StorybookConfig = {
   addons: [
     "@storybook/addon-interactions",
     "storybook-dark-mode",
-    "storybook-addon-mantine",
+
     {
       name: "@storybook/addon-storysource",
       options: {
@@ -30,7 +30,11 @@ const config: StorybookConfig = {
         },
       },
     },
-    "@storybook/addon-essentials",
+    {
+      name: "@storybook/addon-essentials",
+      options: { docs: false, backgrounds: false },
+    },
+    "@storybook/addon-themes",
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.tsx

@@ -2,17 +2,17 @@ import {
   DEFAULT_THEME,
   MantineProvider,
   MantineTheme,
+  MantineThemeProvider,
   useMantineColorScheme,
 } from "@mantine/core";
 import "@mantine/core/styles.css";
 import "@mantine/core/styles.layer.css";
 import "@mantine/dates/styles.layer.css";
+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
 import { addons } from "@storybook/preview-api";
-import type { Preview } from "@storybook/react";
+import type { Preview, ReactRenderer } from "@storybook/react";
 import { useEffect } from "react";
-import { withMantineThemes } from "storybook-addon-mantine";
 import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
-
 const allColorThemes: MantineTheme[] = Object.keys(DEFAULT_THEME.colors)
   .sort()
   .map((primaryColor) => ({ ...DEFAULT_THEME, primaryColor }));
@@ -48,12 +48,12 @@ const preview: Preview = {
         </MantineProvider>
       );
     },
-    withMantineThemes({
-      themes: allColorThemes.map((theme) => ({
-        id: theme.primaryColor,
-        name: `Color: ${theme.primaryColor}`,
-        ...theme,
-      })),
+    withThemeFromJSXProvider<ReactRenderer>({
+      defaultTheme: "blue",
+      Provider: MantineThemeProvider,
+      themes: Object.fromEntries(
+        allColorThemes.map((theme) => [theme.primaryColor, theme]),
+      ),
     }),
   ],
 };

package.json

@@ -60,6 +60,7 @@
     "@storybook/addon-essentials": "^8.2.6",
     "@storybook/addon-interactions": "^8.2.6",
     "@storybook/addon-storysource": "^8.2.6",
+    "@storybook/addon-themes": "^8.2.6",
     "@storybook/blocks": "^8.2.6",
     "@storybook/preview-api": "^8.2.6",
     "@storybook/react": "^8.2.6",