Task/various improvements in Storybook (#6782)

* Resolve missing @angular/material styles

* Add themes selector

* Update changelog

---------

Co-authored-by: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Integrated a theme switcher into _Storybook_ to support toggling between the light and dark mode
+
+### Fixed
+
+- Fixed the _Storybook_ setup by resolving missing `@angular/material` styles
+
 ## 3.0.1 - 2026-04-26
 
 ### Changed

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({
+      defaultTheme: 'Light',
+      parentSelector: 'body',
+      themes: {
+        Dark: 'theme-dark',
+        Light: 'theme-light'
+      }
+    })
+  ]
+};
+
+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",