From 3bf410c31360f7700549e985bb52ad8837311b8e Mon Sep 17 00:00:00 2001
From: Phil <preid@electromag.com.au>
Date: Tue, 23 Jun 2026 14:26:06 +0800
Subject: [PATCH] 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 | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/contexts/colorSchema.tsx b/src/frontend/src/contexts/colorSchema.tsx
index 131e9da8e4..a2a734a8ce 100644
--- a/src/frontend/src/contexts/colorSchema.tsx
+++ b/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 (
-          (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;
       }