Improve Toast setup

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

.storybook/main.ts

@@ -13,7 +13,7 @@ const isChromatic = process.env.STORYBOOK_STORY_SET === 'chromatic';
 
 // All stories for full development
 const allStories = isChromatic
-  ? ['packages/ui']
+  ? ['packages/ui', 'plugins/app']
   : [
       'packages/ui',
       'packages/core-components',

.storybook/preview.tsx

@@ -6,7 +6,7 @@ import { definePreview } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
 import { TestApiProvider } from '@backstage/test-utils';
 import { AlertDisplay } from '@backstage/core-components';
-import { apis } from './support/apis';
+import { apis, appThemeApi } from './support/apis';
 import { useGlobals } from 'storybook/preview-api';
 import { UnifiedThemeProvider, themes } from '@backstage/theme';
 import { allModes } from './modes';
@@ -157,6 +157,10 @@ export default definePreview({
         };
       }, [selectedTheme, selectedThemeName]);
 
+      useEffect(() => {
+        appThemeApi.setActiveThemeId(selectedThemeMode);
+      }, [selectedThemeMode]);
+
       document.body.style.backgroundColor = 'var(--bui-bg-app)';
       document.body.style.padding =
         isFullscreen && selectedBackground !== 'app' ? '1rem' : '';

.storybook/support/apis.js

@@ -32,7 +32,7 @@ import { translationApiRef } from '@backstage/core-plugin-api/alpha';
 import { MockTranslationApi } from '@backstage/test-utils/alpha';
 
 const configApi = new ConfigReader({});
-const appThemeApi = AppThemeSelector.createWithStorage([
+export const appThemeApi = AppThemeSelector.createWithStorage([
   { id: 'light', title: 'Light', variant: 'light', theme: themes.light },
   { id: 'dark', title: 'Dark', variant: 'dark', theme: themes.dark },
 ]);