diff --git a/frontend/packages/ui/.storybook/main.ts b/frontend/packages/ui/.storybook/main.ts
index 4b325b4581..d45ec94b96 100644
--- a/frontend/packages/ui/.storybook/main.ts
+++ b/frontend/packages/ui/.storybook/main.ts
@@ -5,7 +5,8 @@ import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
stories: ['../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
- addons: [],
+ addons: [getAbsolutePath('@storybook/addon-themes')],
+ staticDirs: ['../../../resources/public'],
framework: {
name: getAbsolutePath('@storybook/react-vite'),
options: {
diff --git a/frontend/packages/ui/.storybook/preview-body.html b/frontend/packages/ui/.storybook/preview-body.html
new file mode 100644
index 0000000000..8c4abc5b5b
--- /dev/null
+++ b/frontend/packages/ui/.storybook/preview-body.html
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/frontend/packages/ui/.storybook/preview.ts b/frontend/packages/ui/.storybook/preview.ts
index e69de29bb2..8725b6cf36 100644
--- a/frontend/packages/ui/.storybook/preview.ts
+++ b/frontend/packages/ui/.storybook/preview.ts
@@ -0,0 +1,49 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+import { withThemeByClassName } from "@storybook/addon-themes";
+
+// Design-system CSS: defines --color-*, --sp-*, fonts, resets, etc.
+import "../../../resources/public/css/ds.css";
+
+export const decorators = [
+ withThemeByClassName({
+ themes: {
+ light: "light",
+ dark: "default",
+ },
+ defaultTheme: "dark",
+ parentSelector: "body",
+ }),
+];
+
+/** @type { import('@storybook/react-vite').Preview } */
+const preview = {
+ decorators,
+
+ parameters: {
+ controls: {
+ disableSaveFromUI: true,
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/i,
+ },
+ },
+ backgrounds: {
+ options: {
+ theme: { name: "theme", value: "var(--color-background-secondary)" },
+ },
+ },
+ },
+
+ initialGlobals: {
+ backgrounds: {
+ value: "theme",
+ },
+ },
+};
+
+export default preview;
diff --git a/frontend/packages/ui/package.json b/frontend/packages/ui/package.json
index b571a95de5..a1f5dbd4cf 100644
--- a/frontend/packages/ui/package.json
+++ b/frontend/packages/ui/package.json
@@ -30,6 +30,7 @@
"devDependencies": {
"@babel/core": "^7.14.5",
"@babel/preset-react": "^7.14.5",
+ "@storybook/addon-themes": "10.3.5",
"@storybook/react": "10.3.5",
"@storybook/react-vite": "10.3.5",
"@testing-library/dom": "10.4.1",