Add modes + a11y

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.storybook/main.ts

@@ -41,6 +41,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-a11y'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),

.storybook/modes.ts

@@ -0,0 +1,18 @@
+export const allModes = {
+  'light backstage': {
+    themeMode: 'light',
+    themeName: 'backstage',
+  },
+  'dark backstage': {
+    themeMode: 'dark',
+    themeName: 'backstage',
+  },
+  'light spotify': {
+    themeMode: 'light',
+    themeName: 'spotify',
+  },
+  'dark spotify': {
+    themeMode: 'dark',
+    themeName: 'spotify',
+  },
+} as const;

.storybook/preview.tsx

@@ -5,6 +5,7 @@ import { apis } from './support/apis';
 import type { Decorator, Preview } from '@storybook/react-vite';
 import { useGlobals } from 'storybook/preview-api';
 import { UnifiedThemeProvider, themes } from '@backstage/theme';
+import { allModes } from './modes';
 
 // Default Backstage theme CSS (from packages/ui)
 import '../packages/ui/src/css/styles.css';
@@ -90,6 +91,15 @@ const preview: Preview = {
     docs: {
       codePanel: true,
     },
+
+    chromatic: {
+      modes: {
+        'light backstage': allModes['light backstage'],
+        'dark backstage': allModes['dark backstage'],
+        'light spotify': allModes['light spotify'],
+        'dark spotify': allModes['dark spotify'],
+      },
+    },
   },
   decorators: [
     Story => {