diff --git a/packages/frontend/@n8n/design-system/.storybook/modes.ts b/packages/frontend/@n8n/design-system/.storybook/modes.ts
new file mode 100644
index 00000000000..a8aab05956d
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/.storybook/modes.ts
@@ -0,0 +1,8 @@
+export const allModes = {
+	dark: {
+		theme: 'dark',
+	},
+	light: {
+		theme: 'light',
+	},
+} as const;
diff --git a/packages/frontend/@n8n/design-system/.storybook/preview.ts b/packages/frontend/@n8n/design-system/.storybook/preview.ts
index 4326f01f6a5..a4277a52f5e 100644
--- a/packages/frontend/@n8n/design-system/.storybook/preview.ts
+++ b/packages/frontend/@n8n/design-system/.storybook/preview.ts
@@ -8,6 +8,7 @@ import lang from 'element-plus/dist/locale/en.mjs';
 import { N8nPlugin } from '../src/plugin';
 
 import './storybook.scss';
+import { allModes } from './modes';
 // import '../src/css/tailwind/index.css';
 
 setup((app) => {
@@ -47,7 +48,13 @@ export const parameters = {
 		],
 	},
 	themes: {
+		default: 'light',
 		list: [
+			{
+				name: 'light',
+				class: 'theme-light',
+				color: '#fff',
+			},
 			{
 				name: 'dark',
 				class: 'theme-dark-beta',
@@ -66,6 +73,13 @@ export const parameters = {
 			],
 		},
 	},
+	chromatic: {
+		modes: {
+			light: allModes['light'],
+			dark: allModes['dark'],
+		},
+		disableSnapshot: false,
+	},
 };
 
 export const decorators = [