color scheme: Use the users prefered colour scheme if one isn't defined in the store

src/frontend/src/contexts/colorSchema.tsx

@@ -21,10 +21,16 @@ export function localStorageColorSchemeManager({
       }
 
       try {
-        return (
-          (window.localStorage.getItem(key) as MantineColorScheme) ||
-          defaultValue
-        );
+        const storedValue = window.localStorage.getItem(key);
+
+        // If a value exists in storage, return it
+        if (storedValue && isMantineColorScheme(storedValue)) {
+          return storedValue;
+        }
+
+        // If no value, check the system preference
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        return systemPrefersDark ? 'dark' : 'light';
       } catch {
         return defaultValue;
       }