Add theme handling when without user context

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:

frontend/src/configuration/colours/colourConstant.ts

@@ -1,7 +0,0 @@
-export const ColourConstant = {
-  Dark: 'dark.css',
-  Light: 'light.css',
-  Matrix: 'matrix.css',
-  Midnight: 'midnight.css',
-  Custom: 'custom.css',
-};