storybook-dark-theme-toogle (#10168)

* feat(storybook): add theme toolbar and decorator to toggle dark mode

* chore(ui remove emoji from select option labels to improve accessibility and consistency

Author: PavelLaptev

packages/ui/.storybook/preview.ts

@@ -15,18 +15,39 @@ const preview: Preview = {
 		},
 		docs: {
 			autodocs: 'tag'
-		},
-		darkMode: {
-			classTarget: 'html',
-			stylePreview: true,
-			dark: {
-				appPreviewBg: '#272321'
-			},
-			light: {
-				appPreviewBg: '#fff'
+		}
+	},
+	globalTypes: {
+		theme: {
+			name: 'Theme',
+			description: 'Toggle between light and dark theme',
+			defaultValue: 'light',
+			toolbar: {
+				icon: 'contrast',
+				items: [
+					{ value: 'light', title: 'Light mode', icon: 'sun' },
+					{ value: 'dark', title: 'Dark mode', icon: 'moon' }
+				],
+				showName: false,
+				dynamicTitle: true
+			}
+		}
+	},
+	decorators: [
+		(Story, context) => {
+			const theme = context.globals.theme || 'light';
+			if (typeof document !== 'undefined') {
+				const htmlElement = document.documentElement;
+
+				if (theme === 'dark') {
+					htmlElement.classList.add('dark');
+				} else {
+					htmlElement.classList.remove('dark');
+				}
 			}
+			return Story();
 		}
-	}
+	]
 };
 
 export default preview;

packages/ui/.storybook/stories-styles.css

@@ -1,4 +1,5 @@
 body {
+	background-color: var(--clr-bg-1);
 	color: var(--clr-text-1);
 }
 

packages/ui/src/stories/components/Select.stories.svelte

@@ -59,21 +59,21 @@
 				{ value: '8', label: 'Final long option to complete the test suite for overflow behavior' }
 			],
 			optionsWithSeparators: [
-				{ value: 'new', label: '📄 New Document' },
-				{ value: 'open', label: '📂 Open Document' },
-				{ value: 'recent', label: '🕐 Recent Documents' },
+				{ value: 'new', label: 'New Document' },
+				{ value: 'open', label: 'Open Document' },
+				{ value: 'recent', label: 'Recent Documents' },
 				{ separator: true },
-				{ value: 'save', label: '💾 Save' },
-				{ value: 'save-as', label: '💾 Save As...' },
-				{ value: 'export', label: '📤 Export' },
+				{ value: 'save', label: 'Save' },
+				{ value: 'save-as', label: 'Save As...' },
+				{ value: 'export', label: 'Export' },
 				{ separator: true },
-				{ value: 'cut', label: '✂️ Cut' },
-				{ value: 'copy', label: '📋 Copy' },
-				{ value: 'paste', label: '📋 Paste' },
+				{ value: 'cut', label: 'Cut' },
+				{ value: 'copy', label: 'Copy' },
+				{ value: 'paste', label: 'Paste' },
 				{ separator: true },
-				{ value: 'settings', label: '⚙️ Settings' },
-				{ value: 'help', label: '❓ Help' },
-				{ value: 'about', label: 'ℹ️ About' }
+				{ value: 'settings', label: 'Settings' },
+				{ value: 'help', label: 'Help' },
+				{ value: 'about', label: 'ℹAbout' }
 			]
 		},
 		argTypes: {}