From d2ef1198f5f39d37a1a72dce73a21bc5748f856a Mon Sep 17 00:00:00 2001
From: Yoki <74389358+iamyoki@users.noreply.github.com>
Date: Tue, 17 Aug 2021 13:15:20 +0800
Subject: [PATCH] docs: improve theme switch experience (#31816)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 优化暗色主题模式下刷新白屏且延迟切换的问题，优化主题路由自动切换逻辑

* feat: 添加系统主题color-scheme, 在暗色模式下滚动条等系统控件也变为暗色主题

* feat: remove logic about localstorage theme, query theme from url search
---
 site/theme/static/template.html             | 66 +++++++++++++++++++++
 site/theme/template/Content/MainContent.jsx |  2 +
 2 files changed, 68 insertions(+)

diff --git a/site/theme/static/template.html b/site/theme/static/template.html
index ed7d9a89cf..f274ab1cb4 100644
--- a/site/theme/static/template.html
+++ b/site/theme/static/template.html
@@ -21,6 +21,72 @@
     </style>
     <link rel="stylesheet/less" type="text/css" href="{{ root }}color.less" />
     <script src="https://b.alicdn.com/s/polyfill.min.js?features=default,es2015,Intl"></script>
+    <link id="darkThemeLink" rel="stylesheet" href="/dark.css" />
+    <script>
+      /* -------------------------- 主题相关 -------------------------- */
+      (function () {
+        /* 获取查询参数对象 */
+        function getSearchParam(search) {
+          // 处理入参错误
+          var search = search || location.search;
+          if (search === undefined) return;
+
+          var pattern = /(\w+)=(\w+)/gi; // 定义正则
+          var matches = search.match(pattern);
+          if (!matches) return;
+
+          var searchParam = Object.fromEntries(matches.map(item => item.split('=')));
+          return searchParam;
+        }
+
+        /* 转成查询参数字符串 */
+        function fromSearchParam(searchParam) {
+          // 处理入参错误
+          if (searchParam === undefined) return;
+
+          var search = Object.entries(searchParam)
+            .map(item => item.join('='))
+            .join('&');
+          return search;
+        }
+
+        var searchParam = getSearchParam(location.search) || {}; // 查询参数对象
+
+        var isDarkMode = searchParam.theme === 'dark'; // 判断当前主题
+        var isComponentsPage = location.pathname.startsWith('/components'); // 判断是否组件页面
+
+        // 1. 暗色主题刷新时无白屏
+        // 如果是暗色主题，且在components路由下
+        var darkThemeLinkEl = document.getElementById('darkThemeLink');
+        if (isDarkMode && isComponentsPage) {
+          // 将预先定义的暗色主题link移动到body内
+          document.addEventListener(
+            'readystatechange',
+            () => {
+              document.body.prepend(darkThemeLinkEl);
+            },
+            { once: true },
+          );
+          // load后卸载
+          window.addEventListener('load', () => darkThemeLinkEl.remove(), { once: true });
+
+          // 清除dark.css中的全部transition 待解析完后恢复
+          var styleElement = document.createElement('style');
+          styleElement.type = 'text/css';
+          styleElement.innerHTML =
+            '* {transition: none !important;} html {background: rgb(20, 20, 20)}';
+          document.head.appendChild(styleElement);
+          document.documentElement.style.backgroundColor = 'black';
+          window.addEventListener('load', () => styleElement.remove(), { once: true });
+
+          // 设置系统主题
+          document.documentElement.style.colorScheme = 'dark';
+        } else {
+          document.documentElement.style.colorScheme = 'light';
+          darkThemeLinkEl.remove();
+        }
+      })();
+    </script>
     <script>
       (function () {
         function isLocalStorageNameSupported() {
diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
index 5588c65aae..3dd835d928 100644
--- a/site/theme/template/Content/MainContent.jsx
+++ b/site/theme/template/Content/MainContent.jsx
@@ -319,8 +319,10 @@ class MainContent extends Component {
     if (selectedTheme !== theme) {
       setTheme(theme);
       if (theme === 'default') {
+        document.documentElement.style.colorScheme = 'light';
         delete query.theme;
       } else {
+        if (theme === 'dark') document.documentElement.style.colorScheme = 'dark';
         query.theme = theme;
       }
       browserHistory.push({