From c9aff0e0a759f646d60b5b770c27ec1837a6818f Mon Sep 17 00:00:00 2001
From: Dinh Long Nguyen <dinhlongviolin1@gmail.com>
Date: Mon, 23 Dec 2024 15:10:10 +0700
Subject: [PATCH] Handle bound var theme toggle (#1492) (#2363)

* Handle bound var theme toggle

* Update taipy/gui/viselements.json

Co-authored-by: Fabien Lelaquais <86590727+FabienLelaquais@users.noreply.github.com>

---------

Co-authored-by: Fabien Lelaquais <86590727+FabienLelaquais@users.noreply.github.com>
---
 .../src/components/Taipy/ThemeToggle.tsx      | 30 +++++++++++++++----
 taipy/gui/viselements.json                    |  2 +-
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/ThemeToggle.tsx b/frontend/taipy-gui/src/components/Taipy/ThemeToggle.tsx
index 6318fc8b8e..e8640f0a3b 100644
--- a/frontend/taipy-gui/src/components/Taipy/ThemeToggle.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/ThemeToggle.tsx
@@ -20,14 +20,14 @@ import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import WbSunny from "@mui/icons-material/WbSunny";
 import Brightness3 from "@mui/icons-material/Brightness3";
 
-import { TaipyActiveProps, getCssSize } from "./utils";
+import { TaipyActiveProps, TaipyChangeProps, getCssSize } from "./utils";
 import { TaipyContext } from "../../context/taipyContext";
-import { createThemeAction } from "../../context/taipyReducers";
-import { useClassNames } from "../../utils/hooks";
+import { createSendUpdateAction, createThemeAction } from "../../context/taipyReducers";
+import { useClassNames, useModule } from "../../utils/hooks";
 import { getLocalStorageValue } from "../../context/utils";
 import { getComponentClassName } from "./TaipyStyle";
 
-interface ThemeToggleProps extends TaipyActiveProps {
+interface ThemeToggleProps extends TaipyActiveProps, TaipyChangeProps {
     style?: SxProps;
     label?: string;
     width?: string | number;
@@ -53,11 +53,29 @@ const ThemeToggle = (props: ThemeToggleProps) => {
     const { id, label = "Mode", style = emptyStyle, active = true } = props;
     const { state, dispatch } = useContext(TaipyContext);
 
+    const module = useModule();
+
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
 
+    const updateBoundValue = useCallback(
+        (val: PaletteMode) => {
+            if (!props.updateVarName) {
+                return;
+            }
+            dispatch(
+                createSendUpdateAction(props.updateVarName, val === "dark", module, props.onChange, props.propagate),
+            );
+        },
+        [dispatch, props.updateVarName, props.onChange, props.propagate, module],
+    );
+
+    useEffect(() => {
+        updateBoundValue(state.theme.palette.mode);
+    }, [state.theme.palette.mode, updateBoundValue]);
+
     const changeMode = useCallback(
         (evt: MouseEvent, mode: PaletteMode) => mode !== null && dispatch(createThemeAction(mode === "dark")),
-        [dispatch]
+        [dispatch],
     );
 
     useEffect(() => {
@@ -72,7 +90,7 @@ const ThemeToggle = (props: ThemeToggleProps) => {
             props.width
                 ? ({ ...boxSx, ...style, width: getCssSize(props.width) } as SxProps)
                 : ({ ...boxSx, ...style } as SxProps),
-        [style, props.width]
+        [style, props.width],
     );
 
     return (
diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json
index 4cf152bd9d..bb14fded3c 100644
--- a/taipy/gui/viselements.json
+++ b/taipy/gui/viselements.json
@@ -2149,7 +2149,7 @@
                         "name": "value",
                         "default_property": true,
                         "type": "dynamic(Any)",
-                        "doc": "Bound to the selection value."
+                        "doc": "Bound to the selection value.<br/>If this is used for theme toggling, it must be a Boolean value: True indicates that the current theme is set to \"dark\", while False indicates that the theme is set to \"light\"."
                     },
                     {
                         "name": "lov",