From 4aa37bc5518c710ffbc54985c2a405fcd2cb4b38 Mon Sep 17 00:00:00 2001
From: Guillaume <guillaume@virel.ovh>
Date: Sat, 25 Apr 2026 19:56:31 +0200
Subject: [PATCH] Add themes to storybook

---
 libs/ui/.storybook/main.mjs   |  5 ++++-
 libs/ui/.storybook/preview.js | 20 ++++++++++++++++++++
 package-lock.json             | 18 ++++++++++++++++++
 package.json                  |  1 +
 4 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/libs/ui/.storybook/main.mjs b/libs/ui/.storybook/main.mjs
index e7d1378c7..28a7854e3 100644
--- a/libs/ui/.storybook/main.mjs
+++ b/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: {}
diff --git a/libs/ui/.storybook/preview.js b/libs/ui/.storybook/preview.js
index e69de29bb..ad1edddf1 100644
--- a/libs/ui/.storybook/preview.js
+++ b/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;
diff --git a/package-lock.json b/package-lock.json
index 8372e22d0..9e04aad42 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 169d8ae18..f1b3319e0 100644
--- a/package.json
+++ b/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",