From eff14a1c6acb252fa08d46054643973749ab96fa Mon Sep 17 00:00:00 2001
From: sbwml <admin@cooluc.com>
Date: Sat, 5 Mar 2022 06:02:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=20Argon=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=20&=20=E7=B3=BB=E7=BB=9F=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=A4=96=E8=A7=82=20=E6=94=B9=E5=8F=98=E6=B5=8F=E8=A7=88?=
 =?UTF-8?q?=E5=99=A8=E8=89=B2=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../luasrc/view/themes/argon/header.htm             | 13 +++++++++++++
 .../luasrc/view/themes/argon/header_login.htm       | 13 +++++++++++++
 2 files changed, 26 insertions(+)

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 %>