.storybook/main.js

@@ -2,10 +2,12 @@
 const config = {
 	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
 	addons: [
-		'@storybook/addon-svelte-csf',
-		'@storybook/addon-essentials',
 		'@chromatic-com/storybook',
+		'@storybook/addon-essentials',
 		'@storybook/addon-interactions',
+		'@storybook/addon-styling-webpack',
+		'@storybook/addon-svelte-csf',
+		'@storybook/addon-themes',
 		'storybook-dark-mode'
 	],
 	framework: {

.storybook/preview.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

.storybook/preview.js

@@ -1,3 +1,6 @@
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import './preview.css';
+
 /** @type { import('@storybook/svelte').Preview } */
 const preview = {
 	parameters: {
@@ -7,7 +10,18 @@ const preview = {
 				date: /Date$/i
 			}
 		}
-	}
+	},
+	decorators: [
+		withThemeByDataAttribute({
+			themes: {
+				light: 'light',
+				dark: 'dark',
+				night: 'night'
+			},
+			defaultTheme: 'dark',
+			attributeName: 'data-theme'
+		})
+	]
 };
 
 export default preview;

package.json

@@ -23,7 +23,9 @@
 		"@playwright/test": "^1.45.3",
 		"@storybook/addon-essentials": "^8.4.7",
 		"@storybook/addon-interactions": "^8.4.7",
+		"@storybook/addon-styling-webpack": "^1.0.1",
 		"@storybook/addon-svelte-csf": "^5.0.0-next.13",
+		"@storybook/addon-themes": "^8.4.7",
 		"@storybook/blocks": "^8.4.7",
 		"@storybook/svelte": "^8.4.7",
 		"@storybook/sveltekit": "^8.4.7",