From ddd4599652b28a870b28a85ae0652ef0e0f69422 Mon Sep 17 00:00:00 2001
From: sambhu <sambhu.ss@pega.com>
Date: Tue, 11 Nov 2025 18:10:16 +0530
Subject: [PATCH] updated the storybook to support the new themeing changes

---
 .storybook/preview.tsx | 26 +++++++++++---------------
 tsconfig.json          |  1 +
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 76c49f721..b6f5e6ae5 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -5,6 +5,9 @@ import { CssBaseline } from '@mui/material';
 import { getSdkComponentMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { theme } from '../src/theme';
 
+import sdkConfig from '../sdk-config.json';
+import { themes as sbThemes } from '@storybook/theming';
+
 import { decorator } from '../__mocks__/react_pconnect';
 import setPCoreMocks from '../__mocks__/pcoreMocks';
 
@@ -16,6 +19,10 @@ if (!isConstellation) {
 
 setPCoreMocks();
 
+const isDark = String(sdkConfig?.theme).toLowerCase() === 'dark';
+
+const CANVAS_COLOR = (theme as any).backgroundColor || (isDark ? '#060326' : 'whitesmoke');
+
 const decorators = [
   (Story, context) => {
     return isConstellation ? (
@@ -40,25 +47,14 @@ const decorators = [
   decorator
 ];
 
-const parameters = {
+// 3) Set canvas and Docs chrome
+const parameters: Preview['parameters'] = {
   backgrounds: {
     default: 'App',
-    values: [
-      {
-        name: 'App',
-        value: WorkTheme.base.palette['app-background']
-      },
-      {
-        name: 'Primary',
-        value: WorkTheme.base.palette['primary-background']
-      },
-      {
-        name: 'Secondary',
-        value: WorkTheme.base.palette['secondary-background']
-      }
-    ]
+    values: [{ name: 'App', value: CANVAS_COLOR }]
   },
   docs: {
+    theme: isDark ? sbThemes.dark : sbThemes.light,
     source: { type: 'code' },
     codePanel: true
   }
diff --git a/tsconfig.json b/tsconfig.json
index de99e3b36..462f4aca7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,7 @@
     "noImplicitAny": false,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
+    "resolveJsonModule": true,
 
     // Need to specify typeRoots to find the types and types to constrain
     //  where to look in @pega (to only get pcore-pconnect-typedefs)