From 3bd5a0c7b81401344a435d6c792eff73adb703a1 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 30 Mar 2026 13:13:23 +0100
Subject: [PATCH] Improve Toast setup

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .storybook/main.ts                                 | 2 +-
 .storybook/preview.tsx                             | 6 +++++-
 .storybook/support/apis.js                         | 2 +-
 plugins/app/src/components/Toast/Toast.stories.tsx | 3 +--
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index a62960db85..865ae90848 100644
--- a/.storybook/main.ts
+++ b/.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',
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 022b6123e2..916c48951d 100644
--- a/.storybook/preview.tsx
+++ b/.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' : '';
diff --git a/.storybook/support/apis.js b/.storybook/support/apis.js
index 38bb2817e2..42085591c0 100644
--- a/.storybook/support/apis.js
+++ b/.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 },
 ]);
diff --git a/plugins/app/src/components/Toast/Toast.stories.tsx b/plugins/app/src/components/Toast/Toast.stories.tsx
index 84d75aed0b..10eb05476d 100644
--- a/plugins/app/src/components/Toast/Toast.stories.tsx
+++ b/plugins/app/src/components/Toast/Toast.stories.tsx
@@ -19,7 +19,6 @@ import preview from '../../../../../.storybook/preview';
 import { Button, Flex, Text } from '../../../../../packages/ui/src';
 /* eslint-enable @backstage/no-relative-monorepo-imports */
 import { ToastQueue } from '@react-stately/toast';
-import { useApi, alertApiRef } from '@backstage/core-plugin-api';
 import { ToastContainer } from './index';
 import type { ToastApiMessageContent } from './types';
 import { MemoryRouter } from 'react-router-dom';
@@ -29,7 +28,7 @@ const toastQueue = new ToastQueue<ToastApiMessageContent>({
 });
 
 const meta = preview.meta({
-  title: 'Plugins/App/Toast',
+  title: 'App/Toast',
   component: ToastContainer,
   parameters: {
     layout: 'centered',