Viewer theme can be switched between dark or light theme

CHANGES.md

@@ -1,5 +1,9 @@
 ## Changes in version 1.3.1 (in development)
 
+### New Features 
+
+* Users can now change the application theme from light, dark or system mode from settings.
+
 ### Fixes
 
 * The `<Time>` parameter is now no longer required to calculate the statistics 

src/components/HelpButton.tsx

@@ -32,9 +32,10 @@ import MarkdownPopover from "@/components/MarkdownPopover";
 interface HelpButtonProps {
   size?: "small" | "medium" | "large";
   helpUrl?: string;
+  applicationTheme?: string;
 }
 
-export default function HelpButton({ size, helpUrl }: HelpButtonProps) {
+export default function HelpButton({ size, helpUrl, applicationTheme }: 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}
+        applicationTheme={applicationTheme}
       />
     </>
   );

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",

src/components/MarkdownPopover.tsx

@@ -31,19 +31,32 @@ interface MarkdownPopoverProps {
   open: boolean;
   onClose?: () => void;
   markdownText?: string;
+  applicationTheme?: string;
 }
 
 export default function MarkdownPopover({
   anchorEl,
   markdownText,
   open,
   onClose,
+  applicationTheme,
 }: MarkdownPopoverProps) {
   if (!markdownText) {
     return null;
   }
 
   const components = {
+    a: (props: Record<string, unknown>) => {
+      const { node: _, ...rest } = props;
+      return (
+        <a
+          {...rest}
+          style={{
+            color: applicationTheme ? "#90caf9" : "#1e90ff",
+          }}
+        />
+      );
+    },
     code: (props: Record<string, unknown>) => {
       const { node: _, ...rest } = props;
       return <code {...rest} style={{ color: "green" }} />;

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 {
@@ -238,6 +240,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);
 
@@ -279,8 +288,25 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
                 ))}
               </TextField>
             </SettingsSubPanel>
+            <SettingsSubPanel
+              label={i18n.get("Change application theme")}
+            >
+              <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")}

src/components/UserVariablesDialog/UserVariablesDialog.tsx

@@ -61,6 +61,7 @@ interface UserVariablesDialogProps {
   ) => void;
   expressionCapabilities: ExpressionCapabilities | null;
   serverUrl: string;
+  applicationTheme: string;
 }
 
 export default function UserVariablesDialog({
@@ -73,6 +74,7 @@ export default function UserVariablesDialog({
   updateDatasetUserVariables,
   expressionCapabilities,
   serverUrl,
+  applicationTheme,
 }: 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")}
+            applicationTheme={applicationTheme}
           />
         </Box>
         <Box>

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;
+  applicationTheme: string;
 }
 
 // noinspection JSUnusedLocalSymbols
 const mapStateToProps = (_state: AppState) => {
   return {
     compact: Config.instance.branding.compact,
+    applicationTheme: _state.controlState.applicationTheme,
   };
 };
 
 const mapDispatchToProps = {};
 
-const newTheme = () =>
-  createTheme({
-    typography: {
-      fontSize: 12,
-      htmlFontSize: 14,
-    },
-    palette: {
-      mode: Config.instance.branding.themeName,
-      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();
 
-const _App: React.FC<AppProps> = ({ compact }) => {
   return (
     <AuthWrapper>
       <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={newTheme()}>
+        <ThemeProvider theme={theme}>
           <CssBaseline />
           {!compact && <AppBar />}
           <AppPane />

src/connected/UserVariablesDialog.tsx

@@ -45,6 +45,7 @@ const mapStateToProps = (state: AppState) => {
     userVariables: selectedUserVariablesSelector(state),
     expressionCapabilities: expressionCapabilitiesSelector(state),
     serverUrl: selectedServerSelector(state).url,
+    applicationTheme: state.controlState.applicationTheme,
   };
 };
 

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,6 +166,7 @@ export interface ControlState {
   exportPlacesAsCollection: boolean;
   exportZipArchive: boolean;
   exportFileName: string;
+  applicationTheme: string;
 }
 
 export function newControlState(): ControlState {
@@ -235,6 +242,9 @@ export function newControlState(): ControlState {
     exportPlacesAsCollection: true,
     exportZipArchive: true,
     exportFileName: "export",
+    applicationTheme: Config.instance.branding.themeName
+      ? Config.instance.branding.themeName
+      : "system",
   };
   return loadUserSettings(state);
 }

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("applicationTheme", 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.getStringProperty("applicationTheme", settings, defaultSettings);
       if (import.meta.env.DEV) {
         console.debug("Loaded user settings:", settings);
       }

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;