Set up modes for Chromatic (#37586)

.github/workflows/chromatic.yml

@@ -58,5 +58,5 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           zip: true
           storybookBuildDir: 'storybook-static'
-          exitZeroOnChanges: false # Fail workflow if changes are found
+          exitOnceUploaded: true # Exit immediately after upload
           autoAcceptChanges: 'main' # Auto-accept changes on main branch only

.storybook/modes.ts

@@ -0,0 +1,8 @@
+export const modes = {
+  darkTheme: {
+    theme: 'dark',
+  },
+  lightTheme: {
+    theme: 'light',
+  },
+} as const;

.storybook/preview.tsx

@@ -25,6 +25,7 @@ import { mockHandlers, unhandledRequestHandler } from '@/testing/api';
 // you can change the below to `/application.scss`
 import '../app/javascript/styles/mastodon-light.scss';
 import './styles.css';
+import { modes } from './modes';
 
 const localeFiles = import.meta.glob('@/mastodon/locales/*.json', {
   query: { as: 'json' },
@@ -198,6 +199,13 @@ const preview: Preview = {
     msw: {
       handlers: mockHandlers,
     },
+
+    chromatic: {
+      modes: {
+        dark: modes.darkTheme,
+        light: modes.lightTheme,
+      },
+    },
   },
 };