color scheme: Use the users prefered mode by default (#12227)

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

* fix style

---------

Co-authored-by: Matthias Mair <code@mjmair.com>

src/frontend/src/contexts/colorSchema.tsx

@@ -1,5 +1,4 @@
 import {
-  type MantineColorScheme,
   type MantineColorSchemeManager,
   isMantineColorScheme
 } from '@mantine/core';
@@ -21,10 +20,18 @@ export function localStorageColorSchemeManager({
       }
 
       try {
-        return (
+        const storedValue = window.localStorage.getItem(key);
-          (window.localStorage.getItem(key) as MantineColorScheme) ||
+
-          defaultValue
+        // 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;
       }