Add dark mode

static/main.js

@@ -1,24 +1,17 @@
+// Highlight
 hljs.initHighlightingOnLoad();
 
-const listBg = document.querySelector('.list-bg');
-
-if (listBg) {
-  const halfAnHour = 1000 * 60 * 30;
-
-  function setListBgStyle() {
-    const now = new Date();
-    const time = now.getHours() + now.getMinutes() / 60;
-
-    let opacity = Math.abs(time - 14);
-    opacity = opacity > 12 ? 10 + Math.abs(opacity - 14) : opacity;
-    opacity = Number((opacity / 12).toFixed(2));
-
-    listBg.setAttribute('style', `opacity: ${opacity}`);
+// SunriseSunset
+const getSunrise = SunriseSunsetJS.getSunrise;
+const getSunset = SunriseSunsetJS.getSunset;
+navigator.geolocation.getCurrentPosition((position) => {
+  const latitude = position.coords.latitude;
+  const longitude = position.coords.longitude;
+  const sunrise = getSunrise(latitude, longitude).getTime();
+  const sunset = getSunset(latitude, longitude).getTime();
+  const now = Date.now();
+  if (now < sunrise || now < sunset) {
+    const body = document.querySelector('body');
+    body.classList.add('dark');
   }
-
-  requestAnimationFrame(setListBgStyle);
-
-  setInterval(() => {
-    requestAnimationFrame(setListBgStyle);
-  }, halfAnHour);
-}
+});

static/style.css

@@ -3,10 +3,10 @@
  * A simple, clean, flexible Hugo theme
  * https://github.com/nanxiaobei/hugo-paper
  * Designed by MR.LEE (https://mrlee.me/)
- * Updated in 2019.9.15
+ * Updated in 2019.10.15
  */
 
-/* Variables
+/* Theme
 -------------------------------------------------- */
 :root {
   --gap: 24px;
@@ -17,6 +17,7 @@
   --footer-height: 60px;
   --radius: 8px;
 
+  --theme: #fff;
   --primary: rgba(0, 0, 0, 0.88);
   --secondary: rgba(0, 0, 0, 0.56);
   --tertiary: rgba(0, 0, 0, 0.16);
@@ -25,6 +26,22 @@
   --code-bg: #f5f5f5;
   --border: #eee;
 }
+.dark {
+  --theme: #3c3c3c;
+  --primary: rgba(255, 255, 255, 0.88);
+  --secondary: rgba(255, 255, 255, 0.56);
+  --tertiary: rgba(255, 255, 255, 0.16);
+
+  --hljs-bg: #2a2a2a;
+  --code-bg: #4f4f4f;
+  --border: #5f5f5f;
+}
+.list {
+  background: linear-gradient(135deg, #e2e2e2, #f8f8f8, #ddd);
+}
+.dark.list {
+  background: linear-gradient(135deg, #1c1c1c, #2a2a2a, #000);
+}
 /* Reset
 -------------------------------------------------- */
 *,
@@ -43,6 +60,7 @@ body {
   font-size: 18px;
   line-height: 1.8;
   word-break: break-word;
+  background: var(--theme);
 }
 article,
 aside,
@@ -112,7 +130,7 @@ textarea {
 }
 input:-webkit-autofill,
 textarea:-webkit-autofill {
-  box-shadow: 0 0 0 50px #fff inset;
+  box-shadow: 0 0 0 50px var(--theme) inset;
 }
 img {
   display: block;
@@ -153,22 +171,6 @@ img {
 .menu a {
   font-size: 16px;
 }
-/* Body
--------------------------------------------------- */
-.list {
-  position: relative;
-  background: linear-gradient(135deg, #e2e2e2, #f8f8f8, #ddd);
-}
-.list-bg {
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.24);
-  opacity: 0;
-}
 /* Main
 -------------------------------------------------- */
 .main {
@@ -189,7 +191,7 @@ img {
   display: flex;
 }
 .pagination a {
-  color: #fff;
+  color: var(--theme);
   font-size: 13px;
   line-height: 36px;
   background: var(--primary);
@@ -236,7 +238,7 @@ img {
   position: relative;
   margin-bottom: var(--gap);
   padding: var(--gap);
-  background: #fff;
+  background: var(--theme);
   border-radius: var(--radius);
   transition: transform 0.1s;
 }