From a27ed15dadaa505ad1b034d5eeaa36aaeb27c84e Mon Sep 17 00:00:00 2001
From: ruchimotwaniBC <ruchi.motwani@brockmann-consult.de>
Date: Wed, 25 Sep 2024 18:01:14 +0200
Subject: [PATCH 1/7] implemented  theme change option

---
 CHANGES.md                                          |  5 +++++
 src/components/HelpButton.tsx                       |  4 +++-
 src/components/MarkdownPopover.tsx                  | 13 +++++++++++++
 src/components/SettingsDialog.tsx                   | 10 ++++++++++
 .../UserVariablesDialog/UserVariablesDialog.tsx     |  3 +++
 src/connected/App.tsx                               | 10 +++++-----
 src/connected/UserVariablesDialog.tsx               |  1 +
 src/states/controlState.ts                          |  2 ++
 src/states/userSettings.ts                          |  2 ++
 9 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 5a47c0d9..0d5fde3a 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -1,5 +1,10 @@
 ## Changes in version 1.3.1 (in development)
 
+### New Features 
+
+* Users can now choose the application theme between light and dark mode 
+  from settings. Light mode is set as default. 
+  
 ### Fixes
 
 * The `<Time>` parameter is now no longer required to calculate the statistics 
diff --git a/src/components/HelpButton.tsx b/src/components/HelpButton.tsx
index eac7cb63..8e5b546f 100644
--- a/src/components/HelpButton.tsx
+++ b/src/components/HelpButton.tsx
@@ -32,9 +32,10 @@ import MarkdownPopover from "@/components/MarkdownPopover";
 interface HelpButtonProps {
   size?: "small" | "medium" | "large";
   helpUrl?: string;
+  currentAppTheme?: boolean;
 }
 
-export default function HelpButton({ size, helpUrl }: HelpButtonProps) {
+export default function HelpButton({ size, helpUrl, currentAppTheme }: HelpButtonProps) {
   const [helpAnchorEl, setHelpAnchorEl] = useState<HTMLButtonElement | null>(
     null,
   );
@@ -59,6 +60,7 @@ export default function HelpButton({ size, helpUrl }: HelpButtonProps) {
         open={!!helpAnchorEl}
         onClose={handleHelpClose}
         markdownText={helpText}
+        currentAppTheme={currentAppTheme}
       />
     </>
   );
diff --git a/src/components/MarkdownPopover.tsx b/src/components/MarkdownPopover.tsx
index 120de033..1e39dba2 100644
--- a/src/components/MarkdownPopover.tsx
+++ b/src/components/MarkdownPopover.tsx
@@ -31,6 +31,7 @@ interface MarkdownPopoverProps {
   open: boolean;
   onClose?: () => void;
   markdownText?: string;
+  currentAppTheme?: boolean;
 }
 
 export default function MarkdownPopover({
@@ -38,12 +39,24 @@ export default function MarkdownPopover({
   markdownText,
   open,
   onClose,
+  currentAppTheme,
 }: MarkdownPopoverProps) {
   if (!markdownText) {
     return null;
   }
 
   const components = {
+    a: (props: Record<string, unknown>) => {
+      const { node: _, ...rest } = props;
+      return (
+        <a
+          {...rest}
+          style={{
+            color: currentAppTheme ? "#90caf9" : "#1e90ff",
+          }}
+        />
+      );
+    },
     code: (props: Record<string, unknown>) => {
       const { node: _, ...rest } = props;
       return <code {...rest} style={{ color: "green" }} />;
diff --git a/src/components/SettingsDialog.tsx b/src/components/SettingsDialog.tsx
index a16aa6fa..445340ec 100644
--- a/src/components/SettingsDialog.tsx
+++ b/src/components/SettingsDialog.tsx
@@ -279,6 +279,16 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
                 ))}
               </TextField>
             </SettingsSubPanel>
+            <SettingsSubPanel
+              label={i18n.get("Change application theme to dark mode")}
+              value={getOnOff(settings.currentAppTheme)}
+            >
+              <ToggleSetting
+                propertyName={"currentAppTheme"}
+                settings={settings}
+                updateSettings={updateSettings}
+              />
+            </SettingsSubPanel>
           </SettingsPanel>
 
           <SettingsPanel title={i18n.get("Time-Series")}>
diff --git a/src/components/UserVariablesDialog/UserVariablesDialog.tsx b/src/components/UserVariablesDialog/UserVariablesDialog.tsx
index deaf0ad1..405d8a8f 100644
--- a/src/components/UserVariablesDialog/UserVariablesDialog.tsx
+++ b/src/components/UserVariablesDialog/UserVariablesDialog.tsx
@@ -61,6 +61,7 @@ interface UserVariablesDialogProps {
   ) => void;
   expressionCapabilities: ExpressionCapabilities | null;
   serverUrl: string;
+  currentAppTheme: boolean;
 }
 
 export default function UserVariablesDialog({
@@ -73,6 +74,7 @@ export default function UserVariablesDialog({
   updateDatasetUserVariables,
   expressionCapabilities,
   serverUrl,
+  currentAppTheme,
 }: UserVariablesDialogProps) {
   const [localUserVariables, setLocalUserVariables] =
     useState<UserVariable[]>(userVariables);
@@ -139,6 +141,7 @@ export default function UserVariablesDialog({
           <HelpButton
             size="medium"
             helpUrl={i18n.get("docs/user-variables.en.md")}
+            currentAppTheme={currentAppTheme}
           />
         </Box>
         <Box>
diff --git a/src/connected/App.tsx b/src/connected/App.tsx
index e6fec243..265facc1 100644
--- a/src/connected/App.tsx
+++ b/src/connected/App.tsx
@@ -48,31 +48,31 @@ import UserVariablesDialog from "./UserVariablesDialog";
 
 interface AppProps {
   compact: boolean;
+  currentAppTheme: boolean;
 }
 
 // noinspection JSUnusedLocalSymbols
 const mapStateToProps = (_state: AppState) => {
   return {
     compact: Config.instance.branding.compact,
+    currentAppTheme: _state.controlState.currentAppTheme,
   };
 };
 
 const mapDispatchToProps = {};
 
-const newTheme = () =>
-  createTheme({
+const _App: React.FC<AppProps> = ({ compact, currentAppTheme }) => {
+  const newTheme = () => createTheme({
     typography: {
       fontSize: 12,
       htmlFontSize: 14,
     },
     palette: {
-      mode: Config.instance.branding.themeName,
+      mode: currentAppTheme ? "dark" : "light", // Dynamic dark/light mode
       primary: Config.instance.branding.primaryColor,
       secondary: Config.instance.branding.secondaryColor,
     },
   });
-
-const _App: React.FC<AppProps> = ({ compact }) => {
   return (
     <AuthWrapper>
       <StyledEngineProvider injectFirst>
diff --git a/src/connected/UserVariablesDialog.tsx b/src/connected/UserVariablesDialog.tsx
index 935a30f9..fb84fcbc 100644
--- a/src/connected/UserVariablesDialog.tsx
+++ b/src/connected/UserVariablesDialog.tsx
@@ -45,6 +45,7 @@ const mapStateToProps = (state: AppState) => {
     userVariables: selectedUserVariablesSelector(state),
     expressionCapabilities: expressionCapabilitiesSelector(state),
     serverUrl: selectedServerSelector(state).url,
+    currentAppTheme: state.controlState.currentAppTheme,
   };
 };
 
diff --git a/src/states/controlState.ts b/src/states/controlState.ts
index 8f21d687..1811c181 100644
--- a/src/states/controlState.ts
+++ b/src/states/controlState.ts
@@ -160,6 +160,7 @@ export interface ControlState {
   exportPlacesAsCollection: boolean;
   exportZipArchive: boolean;
   exportFileName: string;
+  currentAppTheme: boolean;
 }
 
 export function newControlState(): ControlState {
@@ -235,6 +236,7 @@ export function newControlState(): ControlState {
     exportPlacesAsCollection: true,
     exportZipArchive: true,
     exportFileName: "export",
+    currentAppTheme: false,
   };
   return loadUserSettings(state);
 }
diff --git a/src/states/userSettings.ts b/src/states/userSettings.ts
index 21d2ff33..e5f70c5b 100644
--- a/src/states/userSettings.ts
+++ b/src/states/userSettings.ts
@@ -112,6 +112,7 @@ export function storeUserSettings(settings: ControlState) {
       storage.setPrimitiveProperty("exportFileName", settings);
       storage.setPrimitiveProperty("userPlacesFormatName", settings);
       storage.setObjectProperty("userPlacesFormatOptions", settings);
+      storage.setPrimitiveProperty("currentAppTheme", settings);
       if (import.meta.env.DEV) {
         console.debug("Stored user settings:", settings);
       }
@@ -213,6 +214,7 @@ export function loadUserSettings(defaultSettings: ControlState): ControlState {
         settings,
         defaultSettings,
       );
+      storage.getBooleanProperty("currentAppTheme", settings, defaultSettings);
       if (import.meta.env.DEV) {
         console.debug("Loaded user settings:", settings);
       }

From 4075ae47f31b033ef836cb3d1eb7654bec14b732 Mon Sep 17 00:00:00 2001
From: ruchimotwaniBC <ruchi.motwani@brockmann-consult.de>
Date: Mon, 30 Sep 2024 11:39:01 +0200
Subject: [PATCH 2/7] change for imprint

---
 src/components/MarkdownPage.tsx | 2 +-
 src/connected/App.tsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MarkdownPage.tsx b/src/components/MarkdownPage.tsx
index 29b52410..aa14e6c9 100644
--- a/src/components/MarkdownPage.tsx
+++ b/src/components/MarkdownPage.tsx
@@ -40,7 +40,7 @@ import { styled } from "@mui/system";
 
 const styles = makeStyles({
   dialog: (theme) => ({
-    backgroundColor: theme.palette.grey[200],
+    backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[200],
   }),
   appBar: {
     position: "relative",
diff --git a/src/connected/App.tsx b/src/connected/App.tsx
index 265facc1..b2dd8aa0 100644
--- a/src/connected/App.tsx
+++ b/src/connected/App.tsx
@@ -68,7 +68,7 @@ const _App: React.FC<AppProps> = ({ compact, currentAppTheme }) => {
       htmlFontSize: 14,
     },
     palette: {
-      mode: currentAppTheme ? "dark" : "light", // Dynamic dark/light mode
+      mode: currentAppTheme ? "dark" : "light",
       primary: Config.instance.branding.primaryColor,
       secondary: Config.instance.branding.secondaryColor,
     },

From ec7d81baa98a43c547b5c374a1fa6db87d766b36 Mon Sep 17 00:00:00 2001
From: ruchimotwaniBC <ruchi.motwani@brockmann-consult.de>
Date: Tue, 22 Oct 2024 11:01:26 +0200
Subject: [PATCH 3/7] change theme dropdown added

---
 src/components/HelpButton.tsx                 |  6 +--
 src/components/MarkdownPopover.tsx            |  6 +--
 src/components/SettingsDialog.tsx             | 33 +++++++++----
 .../UserVariablesDialog.tsx                   |  6 +--
 src/connected/App.tsx                         | 46 +++++++++++++------
 src/connected/UserVariablesDialog.tsx         |  2 +-
 src/states/controlState.ts                    | 13 +++++-
 src/states/userSettings.ts                    |  4 +-
 src/util/branding.ts                          |  2 +-
 9 files changed, 80 insertions(+), 38 deletions(-)

diff --git a/src/components/HelpButton.tsx b/src/components/HelpButton.tsx
index 8e5b546f..eb3b33be 100644
--- a/src/components/HelpButton.tsx
+++ b/src/components/HelpButton.tsx
@@ -32,10 +32,10 @@ import MarkdownPopover from "@/components/MarkdownPopover";
 interface HelpButtonProps {
   size?: "small" | "medium" | "large";
   helpUrl?: string;
-  currentAppTheme?: boolean;
+  applicationTheme?: string;
 }
 
-export default function HelpButton({ size, helpUrl, currentAppTheme }: HelpButtonProps) {
+export default function HelpButton({ size, helpUrl, applicationTheme }: HelpButtonProps) {
   const [helpAnchorEl, setHelpAnchorEl] = useState<HTMLButtonElement | null>(
     null,
   );
@@ -60,7 +60,7 @@ export default function HelpButton({ size, helpUrl, currentAppTheme }: HelpButto
         open={!!helpAnchorEl}
         onClose={handleHelpClose}
         markdownText={helpText}
-        currentAppTheme={currentAppTheme}
+        applicationTheme={applicationTheme}
       />
     </>
   );
diff --git a/src/components/MarkdownPopover.tsx b/src/components/MarkdownPopover.tsx
index 1e39dba2..9920e897 100644
--- a/src/components/MarkdownPopover.tsx
+++ b/src/components/MarkdownPopover.tsx
@@ -31,7 +31,7 @@ interface MarkdownPopoverProps {
   open: boolean;
   onClose?: () => void;
   markdownText?: string;
-  currentAppTheme?: boolean;
+  applicationTheme?: string;
 }
 
 export default function MarkdownPopover({
@@ -39,7 +39,7 @@ export default function MarkdownPopover({
   markdownText,
   open,
   onClose,
-  currentAppTheme,
+  applicationTheme,
 }: MarkdownPopoverProps) {
   if (!markdownText) {
     return null;
@@ -52,7 +52,7 @@ export default function MarkdownPopover({
         <a
           {...rest}
           style={{
-            color: currentAppTheme ? "#90caf9" : "#1e90ff",
+            color: applicationTheme ? "#90caf9" : "#1e90ff",
           }}
         />
       );
diff --git a/src/components/SettingsDialog.tsx b/src/components/SettingsDialog.tsx
index 445340ec..fb095c0c 100644
--- a/src/components/SettingsDialog.tsx
+++ b/src/components/SettingsDialog.tsx
@@ -42,6 +42,8 @@ import {
   LocateMode,
   TimeSeriesChartType,
   TimeAnimationInterval,
+  APPLICATION_THEMES,
+  ApplicationThemes,
 } from "@/states/controlState";
 import { GEOGRAPHIC_CRS, WEB_MERCATOR_CRS } from "@/model/proj";
 import {
@@ -54,6 +56,7 @@ import SettingsPanel from "./SettingsPanel";
 import SettingsSubPanel from "./SettingsSubPanel";
 import ToggleSetting from "./ToggleSetting";
 import RadioSetting from "./RadioSetting";
+import { Config } from "@/config";
 
 const styles: Record<string, SxProps<Theme>> = {
   textField: (theme) => ({
@@ -238,6 +241,13 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
     openDialog("userOverlays");
   };
 
+  function handleApplicationThemeChange(
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) {
+    updateSettings({
+      applicationTheme: event.target.value as ApplicationThemes,
+    });
+  }
   const overlayLayer = findLayer(overlayLayers, settings.selectedOverlayId);
   const overlayLabel = getLayerTitle(overlayLayer);
 
@@ -280,17 +290,24 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
               </TextField>
             </SettingsSubPanel>
             <SettingsSubPanel
-              label={i18n.get("Change application theme to dark mode")}
-              value={getOnOff(settings.currentAppTheme)}
+              label={i18n.get("Change application theme")}
             >
-              <ToggleSetting
-                propertyName={"currentAppTheme"}
-                settings={settings}
-                updateSettings={updateSettings}
-              />
+              <TextField
+                variant="standard"
+                select
+                sx={styles.textField}
+                value={settings.applicationTheme}
+                onChange={handleApplicationThemeChange}
+                margin="normal"
+              >
+                {APPLICATION_THEMES.map(([value, label]) => (
+                  <MenuItem key={value} value={value}>
+                    {i18n.get(label)}
+                  </MenuItem>
+                ))}
+              </TextField>
             </SettingsSubPanel>
           </SettingsPanel>
-
           <SettingsPanel title={i18n.get("Time-Series")}>
             <SettingsSubPanel
               label={i18n.get("Show chart after adding a place")}
diff --git a/src/components/UserVariablesDialog/UserVariablesDialog.tsx b/src/components/UserVariablesDialog/UserVariablesDialog.tsx
index 405d8a8f..da4831f8 100644
--- a/src/components/UserVariablesDialog/UserVariablesDialog.tsx
+++ b/src/components/UserVariablesDialog/UserVariablesDialog.tsx
@@ -61,7 +61,7 @@ interface UserVariablesDialogProps {
   ) => void;
   expressionCapabilities: ExpressionCapabilities | null;
   serverUrl: string;
-  currentAppTheme: boolean;
+  applicationTheme: string;
 }
 
 export default function UserVariablesDialog({
@@ -74,7 +74,7 @@ export default function UserVariablesDialog({
   updateDatasetUserVariables,
   expressionCapabilities,
   serverUrl,
-  currentAppTheme,
+  applicationTheme,
 }: UserVariablesDialogProps) {
   const [localUserVariables, setLocalUserVariables] =
     useState<UserVariable[]>(userVariables);
@@ -141,7 +141,7 @@ export default function UserVariablesDialog({
           <HelpButton
             size="medium"
             helpUrl={i18n.get("docs/user-variables.en.md")}
-            currentAppTheme={currentAppTheme}
+            applicationTheme={applicationTheme}
           />
         </Box>
         <Box>
diff --git a/src/connected/App.tsx b/src/connected/App.tsx
index b2dd8aa0..02980db4 100644
--- a/src/connected/App.tsx
+++ b/src/connected/App.tsx
@@ -29,6 +29,7 @@ import {
   CssBaseline,
   StyledEngineProvider,
   ThemeProvider,
+  useMediaQuery,
 } from "@mui/material";
 
 import { Config } from "@/config";
@@ -48,35 +49,50 @@ import UserVariablesDialog from "./UserVariablesDialog";
 
 interface AppProps {
   compact: boolean;
-  currentAppTheme: boolean;
+  applicationTheme: string;
 }
 
 // noinspection JSUnusedLocalSymbols
 const mapStateToProps = (_state: AppState) => {
   return {
     compact: Config.instance.branding.compact,
-    currentAppTheme: _state.controlState.currentAppTheme,
+    applicationTheme: _state.controlState.applicationTheme,
   };
 };
 
 const mapDispatchToProps = {};
 
-const _App: React.FC<AppProps> = ({ compact, currentAppTheme }) => {
-  const newTheme = () => createTheme({
-    typography: {
-      fontSize: 12,
-      htmlFontSize: 14,
-    },
-    palette: {
-      mode: currentAppTheme ? "dark" : "light",
-      primary: Config.instance.branding.primaryColor,
-      secondary: Config.instance.branding.secondaryColor,
-    },
-  });
+const _App: React.FC<AppProps> = ({ compact, applicationTheme }) => {
+
+  const systemMode = useMediaQuery("(prefers-color-scheme: dark)") ? "dark" : "light";
+
+  const createAppTheme = React.useCallback(() => {
+    const mode =
+      applicationTheme === "system"
+        ? systemMode
+        : applicationTheme === "dark"
+          ? "dark"
+          : "light";
+
+    return createTheme({
+      typography: {
+        fontSize: 12,
+        htmlFontSize: 14,
+      },
+      palette: {
+        mode: mode,
+        primary: Config.instance.branding.primaryColor,
+        secondary: Config.instance.branding.secondaryColor,
+      },
+    });
+  }, [applicationTheme, systemMode]);
+
+  const theme = createAppTheme();
+
   return (
     <AuthWrapper>
       <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={newTheme()}>
+        <ThemeProvider theme={theme}>
           <CssBaseline />
           {!compact && <AppBar />}
           <AppPane />
diff --git a/src/connected/UserVariablesDialog.tsx b/src/connected/UserVariablesDialog.tsx
index fb84fcbc..e5aa42d8 100644
--- a/src/connected/UserVariablesDialog.tsx
+++ b/src/connected/UserVariablesDialog.tsx
@@ -45,7 +45,7 @@ const mapStateToProps = (state: AppState) => {
     userVariables: selectedUserVariablesSelector(state),
     expressionCapabilities: expressionCapabilitiesSelector(state),
     serverUrl: selectedServerSelector(state).url,
-    currentAppTheme: state.controlState.currentAppTheme,
+    applicationTheme: state.controlState.applicationTheme,
   };
 };
 
diff --git a/src/states/controlState.ts b/src/states/controlState.ts
index 1811c181..0d03cdf2 100644
--- a/src/states/controlState.ts
+++ b/src/states/controlState.ts
@@ -100,10 +100,16 @@ export const sidebarPanelIds: SidebarPanelId[] = [
   "volume",
 ];
 
+export const APPLICATION_THEMES: [ApplicationThemes, string][] = [
+  ["light", "Light"],
+  ["dark", "Dark"],
+  ["system", "System"],
+];
 export type VolumeRenderMode = "mip" | "aip" | "iso";
 export type VolumeStatus = "loading" | "ok" | "error";
 export type VolumeState = { status: VolumeStatus; message?: string };
 export type VolumeStates = { [volumeId: string]: VolumeState };
+export type ApplicationThemes = "light" | "dark" | "system";
 
 export interface ControlState {
   selectedDatasetId: string | null;
@@ -160,7 +166,7 @@ export interface ControlState {
   exportPlacesAsCollection: boolean;
   exportZipArchive: boolean;
   exportFileName: string;
-  currentAppTheme: boolean;
+  applicationTheme: string;
 }
 
 export function newControlState(): ControlState {
@@ -236,8 +242,11 @@ export function newControlState(): ControlState {
     exportPlacesAsCollection: true,
     exportZipArchive: true,
     exportFileName: "export",
-    currentAppTheme: false,
+    applicationTheme: Config.instance.branding.themeName
+      ? Config.instance.branding.themeName
+      : "system",
   };
+  console.log(Config.instance.branding.themeName);
   return loadUserSettings(state);
 }
 
diff --git a/src/states/userSettings.ts b/src/states/userSettings.ts
index e5f70c5b..a263a8e0 100644
--- a/src/states/userSettings.ts
+++ b/src/states/userSettings.ts
@@ -112,7 +112,7 @@ export function storeUserSettings(settings: ControlState) {
       storage.setPrimitiveProperty("exportFileName", settings);
       storage.setPrimitiveProperty("userPlacesFormatName", settings);
       storage.setObjectProperty("userPlacesFormatOptions", settings);
-      storage.setPrimitiveProperty("currentAppTheme", settings);
+      storage.setPrimitiveProperty("applicationTheme", settings);
       if (import.meta.env.DEV) {
         console.debug("Stored user settings:", settings);
       }
@@ -214,7 +214,7 @@ export function loadUserSettings(defaultSettings: ControlState): ControlState {
         settings,
         defaultSettings,
       );
-      storage.getBooleanProperty("currentAppTheme", settings, defaultSettings);
+      storage.getStringProperty("applicationTheme", settings, defaultSettings);
       if (import.meta.env.DEV) {
         console.debug("Loaded user settings:", settings);
       }
diff --git a/src/util/branding.ts b/src/util/branding.ts
index 5b6933fd..7d2cddc3 100644
--- a/src/util/branding.ts
+++ b/src/util/branding.ts
@@ -79,7 +79,7 @@ export interface Branding {
   windowTitle: string;
   windowIcon: string | null;
   compact: boolean;
-  themeName: "dark" | "light";
+  themeName: "light";
   primaryColor: PaletteColorOptions;
   secondaryColor: PaletteColorOptions;
   headerBackgroundColor?: string;

From 54fc3849cc7a41b65315461eded5ae2488ebcfd9 Mon Sep 17 00:00:00 2001
From: ruchimotwaniBC <ruchi.motwani@brockmann-consult.de>
Date: Tue, 22 Oct 2024 11:04:55 +0200
Subject: [PATCH 4/7] ununsed import  and console log removed

---
 src/components/SettingsDialog.tsx | 1 -
 src/states/controlState.ts        | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/SettingsDialog.tsx b/src/components/SettingsDialog.tsx
index fb095c0c..697f94e5 100644
--- a/src/components/SettingsDialog.tsx
+++ b/src/components/SettingsDialog.tsx
@@ -56,7 +56,6 @@ import SettingsPanel from "./SettingsPanel";
 import SettingsSubPanel from "./SettingsSubPanel";
 import ToggleSetting from "./ToggleSetting";
 import RadioSetting from "./RadioSetting";
-import { Config } from "@/config";
 
 const styles: Record<string, SxProps<Theme>> = {
   textField: (theme) => ({
diff --git a/src/states/controlState.ts b/src/states/controlState.ts
index 0d03cdf2..225ab80b 100644
--- a/src/states/controlState.ts
+++ b/src/states/controlState.ts
@@ -246,7 +246,6 @@ export function newControlState(): ControlState {
       ? Config.instance.branding.themeName
       : "system",
   };
-  console.log(Config.instance.branding.themeName);
   return loadUserSettings(state);
 }
 

From b3eb9c6b5b897b0d55fe789df412dfa2f927e427 Mon Sep 17 00:00:00 2001
From: ruchimotwaniBC <ruchi.motwani@brockmann-consult.de>
Date: Tue, 22 Oct 2024 11:08:28 +0200
Subject: [PATCH 5/7] changes file updated

---
 CHANGES.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 0d5fde3a..888c3d64 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -2,8 +2,7 @@
 
 ### New Features 
 
-* Users can now choose the application theme between light and dark mode 
-  from settings. Light mode is set as default. 
+* Users can now change the application theme from light, dark or system mode from settings.
   
 ### Fixes
 

From 9f802bf79508f268abfef365c63181b0575c4e62 Mon Sep 17 00:00:00 2001
From: ruchimotwaniBC <ruchi.motwani@brockmann-consult.de>
Date: Fri, 22 Nov 2024 16:21:42 +0100
Subject: [PATCH 6/7] changes for theme changing using ThemeContext

---
 src/components/HelpButton.tsx                 |  4 +-
 src/components/InfoPanel/InfoPanel.tsx        |  5 +-
 src/components/MarkdownPopover.tsx            |  6 +-
 src/components/SettingsDialog.tsx             |  7 +-
 src/components/UserPlacesDialog.tsx           | 13 +++-
 .../UserVariablesDialog.tsx                   |  3 -
 src/connected/App.tsx                         | 64 +++++++++++--------
 src/connected/UserVariablesDialog.tsx         |  2 +-
 src/states/controlState.ts                    |  4 +-
 src/states/userSettings.ts                    |  4 +-
 10 files changed, 64 insertions(+), 48 deletions(-)

diff --git a/src/components/HelpButton.tsx b/src/components/HelpButton.tsx
index eb3b33be..eac7cb63 100644
--- a/src/components/HelpButton.tsx
+++ b/src/components/HelpButton.tsx
@@ -32,10 +32,9 @@ import MarkdownPopover from "@/components/MarkdownPopover";
 interface HelpButtonProps {
   size?: "small" | "medium" | "large";
   helpUrl?: string;
-  applicationTheme?: string;
 }
 
-export default function HelpButton({ size, helpUrl, applicationTheme }: HelpButtonProps) {
+export default function HelpButton({ size, helpUrl }: HelpButtonProps) {
   const [helpAnchorEl, setHelpAnchorEl] = useState<HTMLButtonElement | null>(
     null,
   );
@@ -60,7 +59,6 @@ export default function HelpButton({ size, helpUrl, applicationTheme }: HelpButt
         open={!!helpAnchorEl}
         onClose={handleHelpClose}
         markdownText={helpText}
-        applicationTheme={applicationTheme}
       />
     </>
   );
diff --git a/src/components/InfoPanel/InfoPanel.tsx b/src/components/InfoPanel/InfoPanel.tsx
index 337e3f3d..340e5cc8 100644
--- a/src/components/InfoPanel/InfoPanel.tsx
+++ b/src/components/InfoPanel/InfoPanel.tsx
@@ -52,7 +52,6 @@ import { python } from "@codemirror/lang-python";
 import { Extension } from "@codemirror/state";
 
 import i18n from "@/i18n";
-import { Config } from "@/config";
 import { WithLocale } from "@/util/lang";
 import { utcTimeToIsoDateTimeString } from "@/util/time";
 import { Dataset } from "@/model/dataset";
@@ -64,6 +63,7 @@ import { ApiServerConfig } from "@/model/apiServer";
 import { commonStyles } from "@/components/common-styles";
 import { makeStyles } from "@/util/styles";
 import { isUserVariable } from "@/model/userVariable";
+import { useTheme } from "@mui/material";
 
 type ViewMode = "text" | "list" | "code" | "python";
 const styles = makeStyles({
@@ -655,10 +655,11 @@ interface CodeContentProps extends CodeContentBaseProps {
 }
 
 const CodeContent: React.FC<CodeContentProps> = ({ code, extension }) => {
+  const themeMode = useTheme();
   return (
     <CardContent2>
       <CodeMirror
-        theme={Config.instance.branding.themeName || "light"}
+        theme={themeMode.palette.mode}
         height="320px"
         extensions={[extension]}
         value={code}
diff --git a/src/components/MarkdownPopover.tsx b/src/components/MarkdownPopover.tsx
index 9920e897..3fdb07a1 100644
--- a/src/components/MarkdownPopover.tsx
+++ b/src/components/MarkdownPopover.tsx
@@ -25,13 +25,13 @@
 import Markdown from "react-markdown";
 import Popover from "@mui/material/Popover";
 import Paper from "@mui/material/Paper";
+import { useTheme } from "@mui/material";
 
 interface MarkdownPopoverProps {
   anchorEl: HTMLElement | null;
   open: boolean;
   onClose?: () => void;
   markdownText?: string;
-  applicationTheme?: string;
 }
 
 export default function MarkdownPopover({
@@ -39,8 +39,8 @@ export default function MarkdownPopover({
   markdownText,
   open,
   onClose,
-  applicationTheme,
 }: MarkdownPopoverProps) {
+  const theme = useTheme();
   if (!markdownText) {
     return null;
   }
@@ -52,7 +52,7 @@ export default function MarkdownPopover({
         <a
           {...rest}
           style={{
-            color: applicationTheme ? "#90caf9" : "#1e90ff",
+            color: theme.palette.mode === "dark" ? "#90caf9" : "#1e90ff",
           }}
         />
       );
diff --git a/src/components/SettingsDialog.tsx b/src/components/SettingsDialog.tsx
index 697f94e5..52553016 100644
--- a/src/components/SettingsDialog.tsx
+++ b/src/components/SettingsDialog.tsx
@@ -32,7 +32,7 @@ import MenuItem from "@mui/material/MenuItem";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import { SxProps } from "@mui/system";
-import { Theme } from "@mui/material";
+import { Theme, useTheme } from "@mui/material";
 
 import i18n from "@/i18n";
 import { ApiServerConfig, ApiServerInfo } from "@/model/apiServer";
@@ -122,6 +122,7 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
   const [timeChunkSize, setTimeChunkSize] = React.useState(
     settings.timeChunkSize + "",
   );
+  const theme = useTheme();
 
   React.useEffect(() => {
     const newTimeChunkSize = parseInt(timeChunkSize);
@@ -244,7 +245,7 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) {
     updateSettings({
-      applicationTheme: event.target.value as ApplicationThemes,
+      themeMode: event.target.value as ApplicationThemes,
     });
   }
   const overlayLayer = findLayer(overlayLayers, settings.selectedOverlayId);
@@ -295,7 +296,7 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
                 variant="standard"
                 select
                 sx={styles.textField}
-                value={settings.applicationTheme}
+                value={theme.palette.mode}
                 onChange={handleApplicationThemeChange}
                 margin="normal"
               >
diff --git a/src/components/UserPlacesDialog.tsx b/src/components/UserPlacesDialog.tsx
index c01dc8b0..8043aec7 100644
--- a/src/components/UserPlacesDialog.tsx
+++ b/src/components/UserPlacesDialog.tsx
@@ -42,7 +42,6 @@ import { json } from "@codemirror/lang-json";
 import { styled } from "@mui/system";
 
 import i18n from "@/i18n";
-import { Config } from "@/config";
 import { WithLocale } from "@/util/lang";
 import { FileUpload } from "./FileUpload";
 import {
@@ -59,6 +58,8 @@ import { geoJsonFormat, GeoJsonOptions } from "@/model/user-place/geojson";
 import { wktFormat, WktOptions } from "@/model/user-place/wkt";
 import { detectFormatName, Format } from "@/model/user-place/common";
 import { makeStyles } from "@/util/styles";
+import { useThemeContext } from "@/connected/App";
+import { useTheme } from "@mui/material";
 
 interface FormatWithCodeExt extends Format {
   codeExt: Extension[];
@@ -125,6 +126,14 @@ const UserPlacesDialog: React.FC<UserPlacesDialogProps> = ({
     userPlacesFormatOptions,
   );
 
+  const themeMode = useTheme();
+  // const resolvedTheme =
+  //   themeMode === "system"
+  //     ? window.matchMedia("(prefers-color-scheme: dark)").matches
+  //       ? "dark"
+  //       : "light"
+  //     : themeMode;
+
   React.useEffect(() => {
     setUserPlacesFormatName(userPlacesFormatName);
   }, [userPlacesFormatName]);
@@ -285,7 +294,7 @@ const UserPlacesDialog: React.FC<UserPlacesDialogProps> = ({
           />
         </RadioGroup>
         <CodeMirror
-          theme={Config.instance.branding.themeName || "light"}
+          theme={themeMode.palette.mode}
           placeholder={i18n.get("Enter text or drag & drop a text file.")}
           autoFocus
           height="400px"
diff --git a/src/components/UserVariablesDialog/UserVariablesDialog.tsx b/src/components/UserVariablesDialog/UserVariablesDialog.tsx
index da4831f8..deaf0ad1 100644
--- a/src/components/UserVariablesDialog/UserVariablesDialog.tsx
+++ b/src/components/UserVariablesDialog/UserVariablesDialog.tsx
@@ -61,7 +61,6 @@ interface UserVariablesDialogProps {
   ) => void;
   expressionCapabilities: ExpressionCapabilities | null;
   serverUrl: string;
-  applicationTheme: string;
 }
 
 export default function UserVariablesDialog({
@@ -74,7 +73,6 @@ export default function UserVariablesDialog({
   updateDatasetUserVariables,
   expressionCapabilities,
   serverUrl,
-  applicationTheme,
 }: UserVariablesDialogProps) {
   const [localUserVariables, setLocalUserVariables] =
     useState<UserVariable[]>(userVariables);
@@ -141,7 +139,6 @@ export default function UserVariablesDialog({
           <HelpButton
             size="medium"
             helpUrl={i18n.get("docs/user-variables.en.md")}
-            applicationTheme={applicationTheme}
           />
         </Box>
         <Box>
diff --git a/src/connected/App.tsx b/src/connected/App.tsx
index 02980db4..0c761c7e 100644
--- a/src/connected/App.tsx
+++ b/src/connected/App.tsx
@@ -47,32 +47,46 @@ import UserPlacesDialog from "./UserPlacesDialog";
 import UserLayersDialog from "./UserLayersDialog";
 import UserVariablesDialog from "./UserVariablesDialog";
 
+// ThemeContext to manage theme mode (light, dark, system)
+const ThemeContext = React.createContext<{
+  themeMode: "light" | "dark" | "system";
+  setThemeMode: (mode: "light" | "dark" | "system") => void;
+} | null>(null);
+
+export const useThemeContext = () => {
+  const context = React.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useThemeContext must be used within a ThemeProvider");
+  }
+  return context;
+};
+
 interface AppProps {
   compact: boolean;
-  applicationTheme: string;
+  themeMode: string;
 }
 
 // noinspection JSUnusedLocalSymbols
 const mapStateToProps = (_state: AppState) => {
   return {
     compact: Config.instance.branding.compact,
-    applicationTheme: _state.controlState.applicationTheme,
+    themeMode: _state.controlState.themeMode,
   };
 };
 
 const mapDispatchToProps = {};
 
-const _App: React.FC<AppProps> = ({ compact, applicationTheme }) => {
-
+const _App: React.FC<AppProps> = ({ compact, themeMode }) => {
   const systemMode = useMediaQuery("(prefers-color-scheme: dark)") ? "dark" : "light";
 
-  const createAppTheme = React.useCallback(() => {
-    const mode =
-      applicationTheme === "system"
-        ? systemMode
-        : applicationTheme === "dark"
-          ? "dark"
-          : "light";
+  const validatedThemeMode: "light" | "dark" | "system" =
+    themeMode === "light" || themeMode === "dark" || themeMode === "system"
+      ? themeMode
+      : "light"; // Default fallback
+
+  const theme = React.useMemo(() => {
+    const mode: "light" | "dark" = validatedThemeMode === "system" ? systemMode : validatedThemeMode;
+
 
     return createTheme({
       typography: {
@@ -80,14 +94,12 @@ const _App: React.FC<AppProps> = ({ compact, applicationTheme }) => {
         htmlFontSize: 14,
       },
       palette: {
-        mode: mode,
+        mode,
         primary: Config.instance.branding.primaryColor,
         secondary: Config.instance.branding.secondaryColor,
       },
     });
-  }, [applicationTheme, systemMode]);
-
-  const theme = createAppTheme();
+  }, [themeMode, systemMode]);
 
   return (
     <AuthWrapper>
@@ -96,18 +108,16 @@ const _App: React.FC<AppProps> = ({ compact, applicationTheme }) => {
           <CssBaseline />
           {!compact && <AppBar />}
           <AppPane />
-          <>
-            <LoadingDialog />
-            <ServerDialog />
-            <SettingsDialog />
-            <UserLayersDialog key="userOverlays" dialogId="userOverlays" />
-            <UserLayersDialog key="userBaseMaps" dialogId="userBaseMaps" />
-            <UserVariablesDialog />
-            <UserPlacesDialog />
-            <ExportDialog />
-            <LegalAgreementDialog />
-            <MessageLog />
-          </>
+          <LoadingDialog />
+          <ServerDialog />
+          <SettingsDialog />
+          <UserLayersDialog key="userOverlays" dialogId="userOverlays" />
+          <UserLayersDialog key="userBaseMaps" dialogId="userBaseMaps" />
+          <UserVariablesDialog />
+          <UserPlacesDialog />
+          <ExportDialog />
+          <LegalAgreementDialog />
+          <MessageLog />
         </ThemeProvider>
       </StyledEngineProvider>
     </AuthWrapper>
diff --git a/src/connected/UserVariablesDialog.tsx b/src/connected/UserVariablesDialog.tsx
index e5aa42d8..65e827d1 100644
--- a/src/connected/UserVariablesDialog.tsx
+++ b/src/connected/UserVariablesDialog.tsx
@@ -45,7 +45,7 @@ const mapStateToProps = (state: AppState) => {
     userVariables: selectedUserVariablesSelector(state),
     expressionCapabilities: expressionCapabilitiesSelector(state),
     serverUrl: selectedServerSelector(state).url,
-    applicationTheme: state.controlState.applicationTheme,
+    themeMode: state.controlState.themeMode,
   };
 };
 
diff --git a/src/states/controlState.ts b/src/states/controlState.ts
index 225ab80b..a42f2550 100644
--- a/src/states/controlState.ts
+++ b/src/states/controlState.ts
@@ -166,7 +166,7 @@ export interface ControlState {
   exportPlacesAsCollection: boolean;
   exportZipArchive: boolean;
   exportFileName: string;
-  applicationTheme: string;
+  themeMode: string;
 }
 
 export function newControlState(): ControlState {
@@ -242,7 +242,7 @@ export function newControlState(): ControlState {
     exportPlacesAsCollection: true,
     exportZipArchive: true,
     exportFileName: "export",
-    applicationTheme: Config.instance.branding.themeName
+    themeMode: Config.instance.branding.themeName
       ? Config.instance.branding.themeName
       : "system",
   };
diff --git a/src/states/userSettings.ts b/src/states/userSettings.ts
index a263a8e0..b350fcee 100644
--- a/src/states/userSettings.ts
+++ b/src/states/userSettings.ts
@@ -112,7 +112,7 @@ export function storeUserSettings(settings: ControlState) {
       storage.setPrimitiveProperty("exportFileName", settings);
       storage.setPrimitiveProperty("userPlacesFormatName", settings);
       storage.setObjectProperty("userPlacesFormatOptions", settings);
-      storage.setPrimitiveProperty("applicationTheme", settings);
+      storage.setPrimitiveProperty("themeMode", settings);
       if (import.meta.env.DEV) {
         console.debug("Stored user settings:", settings);
       }
@@ -214,7 +214,7 @@ export function loadUserSettings(defaultSettings: ControlState): ControlState {
         settings,
         defaultSettings,
       );
-      storage.getStringProperty("applicationTheme", settings, defaultSettings);
+      storage.getStringProperty("themeMode", settings, defaultSettings);
       if (import.meta.env.DEV) {
         console.debug("Loaded user settings:", settings);
       }

From eddcc4514fa296a5aa79b22701fc14abe33f6890 Mon Sep 17 00:00:00 2001
From: ruchimotwaniBC <ruchi.motwani@brockmann-consult.de>
Date: Fri, 22 Nov 2024 16:35:41 +0100
Subject: [PATCH 7/7] change

---
 src/components/UserPlacesDialog.tsx |  7 -------
 src/connected/App.tsx               | 17 ++---------------
 2 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/src/components/UserPlacesDialog.tsx b/src/components/UserPlacesDialog.tsx
index 8043aec7..41f08107 100644
--- a/src/components/UserPlacesDialog.tsx
+++ b/src/components/UserPlacesDialog.tsx
@@ -58,7 +58,6 @@ import { geoJsonFormat, GeoJsonOptions } from "@/model/user-place/geojson";
 import { wktFormat, WktOptions } from "@/model/user-place/wkt";
 import { detectFormatName, Format } from "@/model/user-place/common";
 import { makeStyles } from "@/util/styles";
-import { useThemeContext } from "@/connected/App";
 import { useTheme } from "@mui/material";
 
 interface FormatWithCodeExt extends Format {
@@ -127,12 +126,6 @@ const UserPlacesDialog: React.FC<UserPlacesDialogProps> = ({
   );
 
   const themeMode = useTheme();
-  // const resolvedTheme =
-  //   themeMode === "system"
-  //     ? window.matchMedia("(prefers-color-scheme: dark)").matches
-  //       ? "dark"
-  //       : "light"
-  //     : themeMode;
 
   React.useEffect(() => {
     setUserPlacesFormatName(userPlacesFormatName);
diff --git a/src/connected/App.tsx b/src/connected/App.tsx
index 0c761c7e..387b4fde 100644
--- a/src/connected/App.tsx
+++ b/src/connected/App.tsx
@@ -47,19 +47,6 @@ import UserPlacesDialog from "./UserPlacesDialog";
 import UserLayersDialog from "./UserLayersDialog";
 import UserVariablesDialog from "./UserVariablesDialog";
 
-// ThemeContext to manage theme mode (light, dark, system)
-const ThemeContext = React.createContext<{
-  themeMode: "light" | "dark" | "system";
-  setThemeMode: (mode: "light" | "dark" | "system") => void;
-} | null>(null);
-
-export const useThemeContext = () => {
-  const context = React.useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useThemeContext must be used within a ThemeProvider");
-  }
-  return context;
-};
 
 interface AppProps {
   compact: boolean;
@@ -79,6 +66,7 @@ const mapDispatchToProps = {};
 const _App: React.FC<AppProps> = ({ compact, themeMode }) => {
   const systemMode = useMediaQuery("(prefers-color-scheme: dark)") ? "dark" : "light";
 
+  // Validate and fallback for themeMode
   const validatedThemeMode: "light" | "dark" | "system" =
     themeMode === "light" || themeMode === "dark" || themeMode === "system"
       ? themeMode
@@ -87,7 +75,6 @@ const _App: React.FC<AppProps> = ({ compact, themeMode }) => {
   const theme = React.useMemo(() => {
     const mode: "light" | "dark" = validatedThemeMode === "system" ? systemMode : validatedThemeMode;
 
-
     return createTheme({
       typography: {
         fontSize: 12,
@@ -99,7 +86,7 @@ const _App: React.FC<AppProps> = ({ compact, themeMode }) => {
         secondary: Config.instance.branding.secondaryColor,
       },
     });
-  }, [themeMode, systemMode]);
+  }, [validatedThemeMode, systemMode]);
 
   return (
     <AuthWrapper>