feat: 不切换主题自动根据时间切换

Mereithhh · Jul 18, 2022 · 0fe3881 · 0fe3881
1 parent 98c59b2
commit 0fe3881
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 22 deletions.
diff --git a/packages/website/public/initTheme.js b/packages/website/public/initTheme.js
@@ -1,15 +1,26 @@
 window.onload = function () {
-  if (
-    localStorage.theme === "dark" ||
-    (!("theme" in localStorage) &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches)
-  ) {
-    document.documentElement.classList.add("dark");
-    document.documentElement.classList.remove("light");
-    localStorage.theme = "dark";
+  if (!("theme" in localStorage)) {
+    // 按照时间算吧
+    if (new Date().getHours() > 17) {
+      document.documentElement.classList.add("dark");
+      document.documentElement.classList.remove("light");
+    } else {
+      document.documentElement.classList.remove("dark");
+      document.documentElement.classList.add("light");
+    }
   } else {
-    document.documentElement.classList.remove("dark");
-    document.documentElement.classList.add("light");
-    localStorage.theme = "light";
+    if (
+      localStorage.theme === "dark" ||
+      (!("theme" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+      document.documentElement.classList.add("dark");
+      document.documentElement.classList.remove("light");
+      localStorage.theme = "dark";
+    } else {
+      document.documentElement.classList.remove("dark");
+      document.documentElement.classList.add("light");
+      localStorage.theme = "light";
+    }
   }
 }
diff --git a/packages/website/utils/theme.ts b/packages/website/utils/theme.ts
@@ -1,17 +1,28 @@
 export const initTheme = () => {
   // On page load or when changing themes, best to add inline in `head` to avoid FOUC
-  if (
-    localStorage.theme === "dark" ||
-    (!("theme" in localStorage) &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches)
-  ) {
-    document.documentElement.classList.add("dark");
-    document.documentElement.classList.remove("light");
-    localStorage.theme = "dark";
+  if (!("theme" in localStorage)) {
+    // 按照时间算吧
+    if (new Date().getHours() > 17) {
+      document.documentElement.classList.add("dark");
+      document.documentElement.classList.remove("light");
+      localStorage.theme = "dark";
+    } else {
+      document.documentElement.classList.remove("dark");
+      document.documentElement.classList.add("light");
+      localStorage.theme = "light";
+    }
   } else {
-    document.documentElement.classList.remove("dark");
-    document.documentElement.classList.add("light");
-    localStorage.theme = "light";
+    if (
+      localStorage.theme === "dark" ||
+      (!("theme" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+      document.documentElement.classList.add("dark");
+      document.documentElement.classList.remove("light");
+    } else {
+      document.documentElement.classList.remove("dark");
+      document.documentElement.classList.add("light");
+    }
   }
   return localStorage.theme;
 };