diff --git a/luci-theme-argon/luasrc/view/themes/argon/header.htm b/luci-theme-argon/luasrc/view/themes/argon/header.htm
index cca6088..8f6a4f6 100644
--- a/luci-theme-argon/luasrc/view/themes/argon/header.htm
+++ b/luci-theme-argon/luasrc/view/themes/argon/header.htm
@@ -85,7 +85,20 @@
     <link rel="manifest" href="<%=media%>/icon/manifest.json"  crossorigin="use-credentials">
     <meta name="msapplication-TileColor" content="<%=bar_color%>">
     <meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
+    <% if mode == 'normal' then %>
     <meta name="theme-color" content="<%=bar_color%>">
+    <script type="text/javascript">
+        let prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (prefersDarkMode) {
+            viewport = document.querySelector("meta[name=theme-color]");
+            viewport.setAttribute('content', '#000');
+        }
+    </script>
+    <% elseif mode == 'dark' then %>
+    <meta name="theme-color" content="#000">
+    <% elseif mode == 'light' then %>
+    <meta name="theme-color" content="<%=bar_color%>">
+    <% end -%>
     <link rel="stylesheet" href="<%=media%>/css/cascade.css?v=<%=math.random(1,100000)%>">
     <style title="text/css">
         <% if mode == 'normal' then %>
diff --git a/luci-theme-argon/luasrc/view/themes/argon/header_login.htm b/luci-theme-argon/luasrc/view/themes/argon/header_login.htm
index 36fe3bd..afa18d7 100644
--- a/luci-theme-argon/luasrc/view/themes/argon/header_login.htm
+++ b/luci-theme-argon/luasrc/view/themes/argon/header_login.htm
@@ -81,7 +81,20 @@
     <link rel="manifest" href="<%=media%>/icon/manifest.json" crossorigin="use-credentials">
     <meta name="msapplication-TileColor" content="<%=bar_color%>">
     <meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
+    <% if mode == 'normal' then %>
     <meta name="theme-color" content="<%=bar_color%>">
+    <script type="text/javascript">
+        let prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (prefersDarkMode) {
+            viewport = document.querySelector("meta[name=theme-color]");
+            viewport.setAttribute('content', '#000');
+        }
+    </script>
+    <% elseif mode == 'dark' then %>
+    <meta name="theme-color" content="#000">
+    <% elseif mode == 'light' then %>
+    <meta name="theme-color" content="<%=bar_color%>">
+    <% end -%>
     <link rel="stylesheet" href="<%=media%>/css/cascade.css?v=<%=math.random(1,100000)%>">
     <style title="text/css">
         <% if mode == 'normal' then %>