Add themes to storybook

libs/ui/.storybook/main.mjs

@@ -5,7 +5,10 @@ const require = createRequire(import.meta.url);
 
 /** @type {import('@storybook/angular').StorybookConfig} */
 const config = {
-  addons: [getAbsolutePath('@storybook/addon-docs')],
+  addons: [
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-themes')
+  ],
   framework: {
     name: getAbsolutePath('@storybook/angular'),
     options: {}

libs/ui/.storybook/preview.js

@@ -0,0 +1,20 @@
+import { withThemeByClassName } from '@storybook/addon-themes';
+
+const preview = {
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: 'theme-light',
+        dark: 'theme-dark'
+      },
+      defaultTheme: 'light',
+      parentSelector: 'body'
+    })
+  ]
+};
+
+if (typeof document !== 'undefined') {
+  document.body.classList.add('mat-typography');
+}
+
+export default preview;

package-lock.json

@@ -125,6 +125,7 @@
         "@nx/workspace": "22.6.5",
         "@schematics/angular": "21.2.6",
         "@storybook/addon-docs": "10.1.10",
+        "@storybook/addon-themes": "^10.1.10",
         "@storybook/angular": "10.1.10",
         "@trivago/prettier-plugin-sort-imports": "6.0.2",
         "@types/big.js": "6.2.2",
@@ -13462,6 +13463,23 @@
         "storybook": "^10.1.10"
       }
     },
+    "node_modules/@storybook/addon-themes": {
+      "version": "10.1.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-10.1.10.tgz",
+      "integrity": "sha512-YlTzREQnUFZ6wepo4MppiobkFrsF1EuObh+vaEhjEj5Cs1oH+kqP5Db+rXi8rbrxnVXaWKmDgqZMtB7kVN4Dnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^10.1.10"
+      }
+    },
     "node_modules/@storybook/angular": {
       "version": "10.1.10",
       "resolved": "https://registry.npmjs.org/@storybook/angular/-/angular-10.1.10.tgz",

package.json

@@ -170,6 +170,7 @@
     "@nx/workspace": "22.6.5",
     "@schematics/angular": "21.2.6",
     "@storybook/addon-docs": "10.1.10",
+    "@storybook/addon-themes": "^10.1.10",
     "@storybook/angular": "10.1.10",
     "@trivago/prettier-plugin-sort-imports": "6.0.2",
     "@types/big.js": "6.2.2",