From c8c542737073d9f6f2728e08b18cff94d8a841d4 Mon Sep 17 00:00:00 2001 From: Einar Date: Fri, 12 Jun 2026 13:42:58 +0200 Subject: [PATCH] Sync Storybook theme with embedding docs site When Storybook is embedded via StorybookEmbed (fullPage mode), the docs site sends a STORYBOOK_THEME_CHANGE postMessage whenever its theme toggle changes. Wire up a message listener in preview.js that: - Maps docs-site 'light'/'dark' to the lara-light/lara-dark PrimeReact theme entries respectively - Applies the theme immediately (applyThemeLink / applyBodyClass) so the switch is instant without waiting for a story re-render - Stores the preference in _docsSiteTheme so the decorator also uses it on subsequent renders, overriding the Storybook toolbar selection Co-Authored-By: Claude Sonnet 4.6 --- Source/.storybook/preview.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/Source/.storybook/preview.js b/Source/.storybook/preview.js index d21cd9a..0541e09 100644 --- a/Source/.storybook/preview.js +++ b/Source/.storybook/preview.js @@ -46,6 +46,20 @@ const ALL_BODY_CLASSES = Object.values(STYLING_MODES) .map(mode => mode.bodyClass) .filter(Boolean); +// Tracks the theme pushed from the embedding docs site via postMessage. +// null means "not embedded — use the toolbar selection". +let _docsSiteTheme = null; + +window.addEventListener('message', (event) => { + if (event.data?.type !== 'STORYBOOK_THEME_CHANGE') return; + _docsSiteTheme = event.data.theme === 'light' ? 'lara-light' : 'lara-dark'; + const mode = STYLING_MODES[_docsSiteTheme]; + if (mode) { + applyThemeLink(mode.themeUrl); + applyBodyClass(mode.bodyClass); + } +}); + export const globalTypes = { theme: { name: 'Styling', @@ -92,7 +106,8 @@ function applyBodyClass(className) { export const decorators = [ (Story, context) => { - const mode = STYLING_MODES[context.globals.theme] ?? STYLING_MODES['lara-dark']; + const themeKey = _docsSiteTheme ?? context.globals.theme ?? 'lara-dark'; + const mode = STYLING_MODES[themeKey] ?? STYLING_MODES['lara-dark']; applyThemeLink(mode.themeUrl); applyBodyClass(mode.bodyClass);