From 13431dae529289e05517f7d3580e653554cebbf5 Mon Sep 17 00:00:00 2001
From: nanxiaobei <nanxiaobei@gmail.com>
Date: Tue, 24 Aug 2021 20:35:04 +0800
Subject: [PATCH] fix dark mode

---
 assets/app.css               |  4 ++--
 layouts/partials/header.html | 35 +++++++++++++----------------------
 2 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/assets/app.css b/assets/app.css
index 308811c..2540cb3 100644
--- a/assets/app.css
+++ b/assets/app.css
@@ -202,7 +202,7 @@ img {
   white-space: nowrap;
 }
 
-.btn-theme {
+.btn-dark {
   width: 3rem;
   margin-left: 2rem;
   cursor: pointer;
@@ -210,7 +210,7 @@ img {
   transition: background-position 0.4s steps(6);
 }
 
-.dark .btn-theme {
+.dark .btn-dark {
   background-position: right;
 }
 
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index be6b724..6c42ebf 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,39 +1,30 @@
 <header class="header">
   {{ if .IsHome }}
   <h1 class="logo">
-    <a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-theme"></a>
+    <a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-dark"></a>
   </h1>
   {{ else }}
   <p class="logo">
-    <a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-theme"></a>
+    <a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-dark"></a>
   </p>
   {{ end }}
 
   <script>
-    let bodyClass = document.body.classList;
-    let buttonDark = document.querySelector('.btn-theme');
-    let schemeDark = window.matchMedia('(prefers-color-scheme: dark)');
+    let bodyClx = document.body.classList;
+    let btnDark = document.querySelector('.btn-dark');
+    let sysDark = window.matchMedia('(prefers-color-scheme: dark)');
+    let darkVal = localStorage.getItem('dark');
 
-    let setDark = () => {
-      bodyClass.add('dark');
-      localStorage.setItem('dark', 'true');
-    };
-    let setLight = () => {
-      bodyClass.remove('dark');
-      localStorage.removeItem('dark');
+    let setDark = (isDark) => {
+      bodyClx[isDark ? 'add' : 'remove']('dark');
+      localStorage.setItem('dark', isDark ? 'yes' : 'no');
     };
 
-    if (schemeDark.matches || localStorage.getItem('dark')) setDark();
-    requestAnimationFrame(() => {
-      bodyClass.remove('not-ready');
-    });
+    setDark(darkVal ? darkVal === 'yes' : sysDark.matches);
+    requestAnimationFrame(() => bodyClx.remove('not-ready'));
 
-    buttonDark.addEventListener('click', () => {
-      bodyClass.contains('dark') ? setLight() : setDark();
-    });
-    schemeDark.addEventListener('change', (event) => {
-      event.matches ? setDark() : setLight();
-    });
+    btnDark.addEventListener('click', () => setDark(!bodyClx.contains('dark')));
+    sysDark.addEventListener('change', (event) => setDark(event.matches));
   </script>
 
   {{ $url := .RelPermalink }}<!---->