[CL-317] Use storybook theme addon for theme switching (#13451)

.storybook/preview.tsx

@@ -1,60 +1,30 @@
 import { setCompodocJson } from "@storybook/addon-docs/angular";
+import { withThemeByClassName } from "@storybook/addon-themes";
 import { componentWrapperDecorator } from "@storybook/angular";
 import type { Preview } from "@storybook/angular";
 
 import docJson from "../documentation.json";
 setCompodocJson(docJson);
 
-const decorator = componentWrapperDecorator(
-  (story) => {
-    return /*html*/ `
-      <div
-        class="tw-border-2 tw-border-solid tw-px-5 tw-py-10"
-        [ngClass]="{
-          'tw-bg-[#ffffff] tw-border-secondary-300': theme === 'light',
-          'tw-bg-[#1f242e]': theme === 'dark',
-        }"
-      >
-        ${story}
-      </div>
+const wrapperDecorator = componentWrapperDecorator((story) => {
+  return /*html*/ `
+    <div class="tw-bg-background tw-px-5 tw-py-10">
+      ${story}
+    </div>
   `;
-  },
-  ({ globals }) => {
-    // We need to add the theme class to the body to support body-appended content like popovers and menus
-    document.body.classList.remove("theme_light");
-    document.body.classList.remove("theme_dark");
-
-    document.body.classList.add(`theme_${globals["theme"]}`);
-
-    return { theme: `${globals["theme"]}` };
-  },
-);
+});
 
 const preview: Preview = {
-  decorators: [decorator],
-  globalTypes: {
-    theme: {
-      description: "Global theme for components",
-      defaultValue: "light",
-      toolbar: {
-        title: "Theme",
-        icon: "circlehollow",
-        items: [
-          {
-            title: "Light",
-            value: "light",
-            icon: "sun",
-          },
-          {
-            title: "Dark",
-            value: "dark",
-            icon: "moon",
-          },
-        ],
-        dynamicTitle: true,
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: "theme_light",
+        dark: "theme_dark",
       },
-    },
-  },
+      defaultTheme: "light",
+    }),
+    wrapperDecorator,
+  ],
   parameters: {
     controls: {
       matchers: {
@@ -69,6 +39,9 @@ const preview: Preview = {
       },
     },
     docs: { source: { type: "dynamic", excludeDecorators: true } },
+    backgrounds: {
+      disable: true,
+    },
   },
   tags: ["autodocs"],
 };