allow theme modification

frontend/taipy-gui/base/src/app.ts

@@ -360,6 +360,10 @@ export class TaipyApp {
     closePropertyEditor() {
         this.elementManager.closePropertyEditor();
     }
+
+    refreshThemes() {
+        window.dispatchEvent(new Event("refreshThemes"));
+    }
 }
 
 export const createApp = (

frontend/taipy-gui/base/src/components/Taipy/TaipyRendered.tsx

@@ -19,6 +19,7 @@ import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
 
 import { TaipyContext } from "../../../../src/context/taipyContext";
 import {
+    createRefreshThemesAction,
     INITIAL_STATE,
     initializeWebSocket,
     taipyInitialize,
@@ -50,6 +51,16 @@ const TaipyRendered = (props: TaipyRenderedProps) => {
         document.body.className = classes.join(" ");
     }, [themeClass]);
 
+    useEffect(() => {
+        const refreshThemes = () => {
+            dispatch(createRefreshThemesAction());
+        };
+        window.addEventListener("refreshThemes", refreshThemes);
+        return () => {
+            window.removeEventListener("refreshThemes", refreshThemes);
+        };
+    }, []);
+
     return (
         <TaipyContext.Provider value={{ state, dispatch }}>
             <ThemeProvider theme={state.theme}>

frontend/taipy-gui/base/src/packaging/taipy-gui-base.d.ts

@@ -76,7 +76,7 @@ export type WsMessageType =
     | "GR"
     | "FV"
     | "BC"
-    | "LS"
+    | "LS";
 export interface WsMessage {
     type: WsMessageType | string;
     name: string;
@@ -127,6 +127,7 @@ declare class ElementManager {
         properties?: Element["properties"] | undefined,
     ): void;
     modifyElement(id: string, elementProperties: Record<string, unknown>): void;
+    modifyElementProperties(id: string, payload: Record<string, unknown>): void;
     deleteElement(id: string): void;
     openPropertyEditor(id: string): void;
     closePropertyEditor(): void;
@@ -224,9 +225,11 @@ export declare class TaipyApp {
     ): void;
     setCanvasEditMode(bool: boolean): void;
     modifyElement(id: string, modifiedRecord: Record<string, unknown>): void;
+    modifyElementProperties(id: string, properties: Record<string, unknown>): void;
     deleteElement(id: string): void;
     openPropertyEditor(id: string): void;
     closePropertyEditor(): void;
+    refreshThemes(): void;
 }
 export declare const createApp: (
     onInit?: OnInitHandler,

frontend/taipy-gui/package-lock.json

@@ -7760,11 +7760,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/hsluv": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/hsluv/-/hsluv-0.0.3.tgz",
-      "integrity": "sha512-08iL2VyCRbkQKBySkSh6m8zMUa3sADAxGVWs3Z1aPcUkTJeK0ETG4Fc27tEmQBGUAXZjIsXOZqBvacuVNSC/fQ=="
-    },
     "node_modules/html-dom-parser": {
       "version": "5.0.13",
       "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.0.13.tgz",

frontend/taipy-gui/src/context/taipyReducers.ts

@@ -49,6 +49,7 @@ export enum Types {
     Acknowledgement = "ACKNOWLEDGEMENT",
     Broadcast = "BROADCAST",
     LocalStorage = "LOCAL_STORAGE",
+    RefreshThemes = "REFRESH_THEMES",
 }
 
 /**
@@ -58,6 +59,7 @@ export interface TaipyState {
     socket?: Socket;
     isSocketConnected?: boolean;
     data: Record<string, unknown>;
+    themes: Record<PaletteMode, Theme>;
     theme: Theme;
     locations: Record<string, string>;
     timeZone?: string;
@@ -167,8 +169,8 @@ export interface FormatConfig {
 }
 
 const getUserTheme = (mode: PaletteMode) => {
-    const tkTheme = (window.taipyConfig?.stylekit && stylekitTheme) || {};
-    const tkModeTheme = (window.taipyConfig?.stylekit && stylekitModeThemes[mode]) || {};
+    const tkTheme = (window.taipyConfig?.stylekit && stylekitTheme()) || {};
+    const tkModeTheme = (window.taipyConfig?.stylekit && stylekitModeThemes()[mode]) || {};
     const userTheme = window.taipyConfig?.themes?.base || {};
     const modeTheme = (window.taipyConfig?.themes && window.taipyConfig.themes[mode]) || {};
     return createTheme(
@@ -183,7 +185,7 @@ const getUserTheme = (mode: PaletteMode) => {
                     },
                 },
             },
-        })
+        }),
     );
 };
 
@@ -194,6 +196,7 @@ const themes = {
 
 export const INITIAL_STATE: TaipyState = {
     data: {},
+    themes: themes,
     theme: window.taipyConfig?.darkMode ? themes.dark : themes.light,
     locations: {},
     timeZone: window.taipyConfig?.timeZone
@@ -468,11 +471,22 @@ export const taipyReducer = (state: TaipyState, baseAction: TaipyBaseAction): Ta
             if (mode !== state.theme.palette.mode) {
                 return {
                     ...state,
-                    theme: themes[mode],
+                    theme: state.themes[mode],
                 };
             }
             return state;
         }
+        case Types.RefreshThemes: {
+            const tempThemes = {
+                light: getUserTheme("light"),
+                dark: getUserTheme("dark"),
+            };
+            return {
+                ...state,
+                themes: tempThemes,
+                theme: tempThemes[state.theme.palette.mode]
+            };
+        }
         case Types.SetTimeZone: {
             let timeZone = (action.payload.timeZone as string) || "client";
             if (!action.payload.fromBackend) {
@@ -926,3 +940,7 @@ export const createLocalStorageAction = (localStorageData: Record<string, string
     name: "",
     payload: localStorageData,
 });
+
+export const createRefreshThemesAction = (): TaipyBaseAction => ({
+    type: Types.RefreshThemes,
+});

frontend/taipy-gui/src/themes/stylekit.ts

@@ -13,7 +13,7 @@
 
 import { lighten } from "@mui/material";
 
-export const stylekitTheme = {
+export const stylekitTheme = () => ({
     palette: {
         // Primary and secondary colors
         primary: {
@@ -156,9 +156,9 @@ export const stylekitTheme = {
             },
         },
     },
-};
+});
 
-export const stylekitModeThemes = {
+export const stylekitModeThemes = () => ({
     light: {
         palette: {
             background: {
@@ -223,4 +223,4 @@ export const stylekitModeThemes = {
             },
         },
     },
-};
+});