From f2d504f420951b03ac29a676bcfb5204a3a49022 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 5 Oct 2022 12:51:07 +0200
Subject: [PATCH] Storybook: Add theme switcher

---
 storybook/decorators/with-theme.js | 26 ++++++++++++++++++++++++++
 storybook/preview.js               | 21 ++++++++++++++++++++-
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 storybook/decorators/with-theme.js

diff --git a/storybook/decorators/with-theme.js b/storybook/decorators/with-theme.js
new file mode 100644
index 0000000000000..83004d7ce83d6
--- /dev/null
+++ b/storybook/decorators/with-theme.js
@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import Theme from '../../packages/components/src/theme';
+
+/**
+ *  A Storybook decorator to show a div before and after the story to check for unwanted margins.
+ */
+
+export const WithTheme = ( Story, context ) => {
+	const themes = {
+		default: {},
+		modern: {
+			accent: '#3858e9',
+		},
+		sunrise: {
+			accent: '#dd823b',
+		},
+	};
+
+	return (
+		<Theme { ...themes[ context.globals.componentsTheme ] }>
+			<Story { ...context } />
+		</Theme>
+	);
+};
diff --git a/storybook/preview.js b/storybook/preview.js
index 43e36fdc8782f..59d416d57bb2f 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -4,6 +4,7 @@
 import { WithGlobalCSS } from './decorators/with-global-css';
 import { WithMarginChecker } from './decorators/with-margin-checker';
 import { WithRTL } from './decorators/with-rtl';
+import { WithTheme } from './decorators/with-theme';
 import './style.scss';
 
 export const globalTypes = {
@@ -19,6 +20,19 @@ export const globalTypes = {
 			],
 		},
 	},
+	componentsTheme: {
+		name: 'Theme',
+		description: 'Change the components theme.',
+		defaultValue: 'default',
+		toolbar: {
+			icon: 'paintbrush',
+			items: [
+				{ value: 'default', title: 'Default' },
+				{ value: 'modern', title: 'Modern' },
+				{ value: 'sunrise', title: 'Sunrise' },
+			],
+		},
+	},
 	css: {
 		name: 'Global CSS',
 		description:
@@ -51,7 +65,12 @@ export const globalTypes = {
 	},
 };
 
-export const decorators = [ WithGlobalCSS, WithMarginChecker, WithRTL ];
+export const decorators = [
+	WithTheme,
+	WithGlobalCSS,
+	WithMarginChecker,
+	WithRTL,
+];
 
 export const parameters = {
 	controls: {