From bd236a78a1bbb534510ecddec99d82cf3ee546b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Mon, 23 Aug 2021 10:46:56 +0800
Subject: [PATCH] chore: add theme color meta (#31872)

---
 site/theme/static/template.html             | 11 ++++++++++-
 site/theme/template/Content/MainContent.jsx |  6 +++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/site/theme/static/template.html b/site/theme/static/template.html
index 33e1e46e75..9af6d83795 100644
--- a/site/theme/static/template.html
+++ b/site/theme/static/template.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#1890ff" />
     <title>{% if title %}{{ title | safe }}{% else %}{% endif %}</title>
     {% if meta %}{{ meta | safe }}{% endif %}
     <link
@@ -23,6 +24,13 @@
     <script src="https://b.alicdn.com/s/polyfill.min.js?features=default,es2015,Intl"></script>
     <link id="darkThemeLink" rel="stylesheet" href="/dark.css" />
     <script>
+      /* 设置 meta theme-color 的值，默认会设置一个 #1890ff   */
+      function setColor(isDarken) {
+        try {
+          const theme = document.getElementsByTagName('meta')['theme-color'];
+          theme.setAttribute('content', isDarken ? 'rgba(0,0,0,0.65)' : '#1890ff');
+        } catch (error) {}
+      }
       /* -------------------------- 主题相关 -------------------------- */
       (function () {
         /* 获取查询参数对象 */
@@ -58,7 +66,7 @@
           );
           // load后卸载
           window.addEventListener('load', () => darkThemeLinkEl.remove(), { once: true });
-
+          setColor(true);
           // 清除dark.css中的全部transition 待解析完后恢复
           var styleElement = document.createElement('style');
           styleElement.type = 'text/css';
@@ -71,6 +79,7 @@
           // 设置系统主题
           document.documentElement.style.colorScheme = 'dark';
         } else {
+          setColor(false);
           document.documentElement.style.colorScheme = 'light';
           darkThemeLinkEl.remove();
         }
diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
index 3dd835d928..b6a257779f 100644
--- a/site/theme/template/Content/MainContent.jsx
+++ b/site/theme/template/Content/MainContent.jsx
@@ -320,9 +320,13 @@ class MainContent extends Component {
       setTheme(theme);
       if (theme === 'default') {
         document.documentElement.style.colorScheme = 'light';
+        setColor(false);
         delete query.theme;
       } else {
-        if (theme === 'dark') document.documentElement.style.colorScheme = 'dark';
+        if (theme === 'dark') {
+          document.documentElement.style.colorScheme = 'dark';
+          setColor(true);
+        }
         query.theme = theme;
       }
       browserHistory.push({