From 8f02612fb83b4f6b202d0c59a762b8d1b0c585f4 Mon Sep 17 00:00:00 2001
From: Mariusz Bartnik <mariusz.bartnik@complai.com>
Date: Thu, 5 Feb 2026 10:06:16 +0100
Subject: [PATCH] feat: improve theme handling by adding system preference
 support

Refactored theme logic to use a utility function `getCurrentTheme`, which considers system color scheme preference and stored theme settings.
---
 admin/src/components/Input.jsx     | 5 +++--
 admin/src/utils/getCurrentTheme.js | 6 ++++++
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 admin/src/utils/getCurrentTheme.js

diff --git a/admin/src/components/Input.jsx b/admin/src/components/Input.jsx
index 510cbd2..218446a 100644
--- a/admin/src/components/Input.jsx
+++ b/admin/src/components/Input.jsx
@@ -6,8 +6,9 @@ import { useIntl } from "react-intl";
 import TagsInput from "react-tagsinput";
 import Autosuggest from "react-autosuggest";
 import { getStyling } from "./styles/global";
+import { getCurrentTheme } from '../utils/getCurrentTheme';
 
-const ThemeStyle = getStyling(localStorage.getItem("STRAPI_THEME"));
+const ThemeStyle = getStyling(getCurrentTheme());
 
 const Tags = ({
   attribute,
@@ -145,7 +146,7 @@ const Tags = ({
           [attrName]: state[attrName] || "",
         }));
     }
-    
+
     return (
       <Autosuggest
         ref={props.ref}
diff --git a/admin/src/utils/getCurrentTheme.js b/admin/src/utils/getCurrentTheme.js
new file mode 100644
index 0000000..954ad4a
--- /dev/null
+++ b/admin/src/utils/getCurrentTheme.js
@@ -0,0 +1,6 @@
+export const getCurrentTheme = () => {
+  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
+  const strapiTheme = localStorage.getItem("STRAPI_THEME");
+
+  return (!strapiTheme || strapiTheme === 'system') ? systemTheme : strapiTheme;
+};
\ No newline at end of file