From 068cd2e4073ab6391ae29793990edcb029d540da Mon Sep 17 00:00:00 2001
From: MerlinScheurer <merlin.scheurer@Yahoo.de>
Date: Fri, 23 May 2025 18:54:29 +0200
Subject: [PATCH] Add theme handling when without user context

---
 frontend/src/api/actions/updateUserConfig.ts  |  8 +++++
 .../src/configuration/colours/Colours.tsx     | 30 +++++++++++++++++--
 .../configuration/colours/colourConstant.ts   |  7 -----
 frontend/src/pages/SettingsUser.tsx           |  5 +++-
 4 files changed, 40 insertions(+), 10 deletions(-)
 delete mode 100644 frontend/src/configuration/colours/colourConstant.ts

diff --git a/frontend/src/api/actions/updateUserConfig.ts b/frontend/src/api/actions/updateUserConfig.ts
index 84c5ce3d..ac806e20 100644
--- a/frontend/src/api/actions/updateUserConfig.ts
+++ b/frontend/src/api/actions/updateUserConfig.ts
@@ -8,6 +8,14 @@ export type ColourVariants =
   | 'midnight.css'
   | 'custom.css';
 
+export const ColourConstant = {
+  Dark: 'dark.css',
+  Light: 'light.css',
+  Matrix: 'matrix.css',
+  Midnight: 'midnight.css',
+  Custom: 'custom.css',
+};
+
 export const FileSizeUnits = {
   Binary: 'binary',
   Metric: 'metric',
diff --git a/frontend/src/configuration/colours/Colours.tsx b/frontend/src/configuration/colours/Colours.tsx
index c4654f32..312be577 100644
--- a/frontend/src/configuration/colours/Colours.tsx
+++ b/frontend/src/configuration/colours/Colours.tsx
@@ -1,14 +1,40 @@
+import { ColourConstant, ColourVariants } from '../../api/actions/updateUserConfig';
 import { useUserConfigStore } from '../../stores/UserConfigStore';
-import { ColourConstant } from './colourConstant';
 import CustomStylesheet from './components/Custom';
 import DarkStylesheet from './components/Dark';
 import LightStylesheet from './components/Light';
 import MatrixStylesheet from './components/Matrix';
 import MidnightStylesheet from './components/Midnight';
 
+function getThemeFromLocalStorage(stylesheet: string): ColourVariants {
+  // Check when localStorage when its possibly the default theme. ( e.g. login page )
+  if (stylesheet === ColourConstant.Dark) {
+    const fromLocalStorage = localStorage.getItem('stylesheet');
+
+    if (!fromLocalStorage) {
+      localStorage.setItem('stylesheet', stylesheet);
+    }
+
+    if (fromLocalStorage) {
+      stylesheet = fromLocalStorage;
+    }
+  } else {
+    const fromLocalStorage = localStorage.getItem('stylesheet');
+
+    // Re-sync when localStorage is not the same as in userConfig
+    if (stylesheet !== fromLocalStorage) {
+      localStorage.setItem('stylesheet', stylesheet);
+    }
+  }
+
+  return stylesheet as ColourVariants;
+}
+
 const Colours = () => {
   const { userConfig } = useUserConfigStore();
-  const stylesheet = userConfig?.stylesheet;
+  let stylesheet = userConfig?.stylesheet;
+
+  stylesheet = getThemeFromLocalStorage(stylesheet);
 
   switch (stylesheet) {
     case ColourConstant.Dark:
diff --git a/frontend/src/configuration/colours/colourConstant.ts b/frontend/src/configuration/colours/colourConstant.ts
deleted file mode 100644
index b910fe9a..00000000
--- a/frontend/src/configuration/colours/colourConstant.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const ColourConstant = {
-  Dark: 'dark.css',
-  Light: 'light.css',
-  Matrix: 'matrix.css',
-  Midnight: 'midnight.css',
-  Custom: 'custom.css',
-};
diff --git a/frontend/src/pages/SettingsUser.tsx b/frontend/src/pages/SettingsUser.tsx
index b822eb05..3efe7693 100644
--- a/frontend/src/pages/SettingsUser.tsx
+++ b/frontend/src/pages/SettingsUser.tsx
@@ -1,4 +1,5 @@
 import updateUserConfig, {
+  ColourConstant,
   ColourVariants,
   FileSizeUnits,
   UserConfigType,
@@ -10,7 +11,6 @@ import useIsAdmin from '../functions/useIsAdmin';
 import { useUserConfigStore } from '../stores/UserConfigStore';
 import { useEffect, useState } from 'react';
 import ToggleConfig from '../components/ToggleConfig';
-import { ColourConstant } from '../configuration/colours/colourConstant';
 
 const SettingsUser = () => {
   const { userConfig, setUserConfig } = useUserConfigStore();
@@ -38,6 +38,9 @@ const SettingsUser = () => {
   const handleStyleSheetChange = async (selectedStyleSheet: ColourVariants) => {
     handleUserConfigUpdate({ stylesheet: selectedStyleSheet });
     setStyleSheet(selectedStyleSheet);
+
+    // Store in local storage for pages like login, without a userConfig
+    localStorage.setItem('stylesheet', selectedStyleSheet);
   };
 
   const handlePageSizeChange = async () => {