Viewer theme can be switched between dark or light theme

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 

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}
       />
     </>
   );

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;
+  currentAppTheme?: boolean;
 }
 
 export default function MarkdownPopover({
   anchorEl,
   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" }} />;

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")}>

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>

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",
       primary: Config.instance.branding.primaryColor,
       secondary: Config.instance.branding.secondaryColor,
     },
   });
-
-const _App: React.FC<AppProps> = ({ compact }) => {
   return (
     <AuthWrapper>
       <StyledEngineProvider injectFirst>

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,
   };
 };
 

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);
 }

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);
       }