style: add dark mode switcher

3 files changed, 194 insertions, 100 deletions

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 69e3e66..23ddffd 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,8 +1,44 @@
 <div class="copyright">
 	{{ .Site.Params.footer.content | markdownify }}
-	<div class="rss-icon">
+	<div class="footer-item">
 		<a href="/rss">
 			<i class="fa fa-rss">🛜</i>
 		</a>
 	</div>
+	<div class="footer-item">
+		<button id="toggle-theme-btn">🌞/🌙</button>
+	</div>
+
 </div>
+<script>
+	console.log("Loaded")
+	const modes = {
+		Dark: "dark",
+		Light: "light",
+	}
+
+	function getCurrentMode() {
+		let mode = localStorage.getItem("theme");
+		return mode === null ? null : mode;
+	}
+
+	const toggleColorSchemeBtn = document.getElementById("toggle-theme-btn");
+	const body = document.body;
+	const currentMode = getCurrentMode()
+
+	if (currentMode === modes.Dark) {
+		body.classList.toggle("dark-mode")
+	}
+
+
+	toggleColorSchemeBtn.addEventListener("click", () => {
+		body.classList.toggle("dark-mode");
+
+		if (body.classList.contains("dark-mode")) {
+			localStorage.setItem("theme", modes.Dark);
+		} else {
+			localStorage.setItem("theme", modes.Light);
+		}
+	})
+
+</script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e3aed0f..73e5aaf 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,4 +1,6 @@
-<a href="{{ "" | relURL }}" class="title">
-  <h1 class="site-title">{{ .Site.Title }}</h1>
-</a>
+<div class="title">
+	<a href="{{ "" | relURL }}">
+		<h1 class="site-title">{{ .Site.Title }}</h1>
+	</a>
+</div>
 <nav>{{- partial "nav.html" . -}}</nav>
diff --git a/static/style.css b/static/style.css
index 6a90c3c..33f72f0 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,4 +1,10 @@
 :root {
+    --btn-bg: #f0f0f0;
+    --btn-border: #cccccc;
+    --btn-color: #333333;
+    --btn-bg-hover: #e0e0e0;
+    --btn-border-hover: #aaaaaa;
+
     --width-max: 730px;
     --font-secondary: "Georgia", "Noto Serif", "Times New Roman", serif;
     --font-size-primary: 1.08rem;
@@ -51,7 +57,7 @@ h4 { font-size: var(--font-size-h4); font-weight: 600; line-height: 1.4; margin:
 h5 { font-size: var(--font-size-h5); font-weight: 500; line-height: 1.5; margin: 1.67em 0; text-transform: uppercase; }
 h6 { font-size: var(--font-size-h6); font-weight: 500; line-height: 1.5; margin: 2em 0; color: #666; }
 
-p {
+p, li {
     font-size: var(--font-size-primary);
     line-height: 2;
 }
@@ -69,7 +75,7 @@ p {
     display: block;
 }
 
-summary p {
+summary, summary p {
     color: var(--summary-text-color);
 }
 
@@ -147,6 +153,20 @@ div.summary p {
     line-height: 2;
 }
 
+p, details {
+    margin: 0;
+}
+
+/* 再统一设置上下边距 */
+p, details {
+    margin: 1em 0; /* 根据设计需求调整数值 */
+}
+
+div.faq summary {
+    color: var(--body-text-color);
+
+}
+
 a {
     text-decoration: none;
     border-bottom: 1px dotted;
@@ -194,6 +214,26 @@ a.title h1 {
     font-size: 2.15em;
 }
 
+div.title {
+    display: inline-block;
+}
+
+.theme-toggler {
+    float: right;
+    margin-top: 1.3rem;
+    padding: 0;
+}
+
+#toggle-theme-btn{
+    margin-right: 1rem;
+    padding: 0;
+    background: var(--btn-bg-color);
+    border: 1px solid var(--btn-border-color);
+    color: var(--btn-color);
+    border-radius: 4px;
+    cursor: pointer;
+}
+
 .title span {
     font-weight: 400;
 }
@@ -349,7 +389,7 @@ img[src*="#minipic"] {
     height: 100%;
 }
 
-.rss-icon {
+.footer-item {
     display: inline;
     font-size: 16px;
     float: right;
@@ -632,99 +672,115 @@ ul li:has(input) {
     margin-left: -25.5px;
 }
 
-/* @media (prefers-color-scheme: dark) { */
-/*     :root { */
-/*         --body-text-color: #bbb; */
-/*         --title-color: #aaa; */
-
-/*         --body-bg-color: #0f0f0f; */
-/*         --summary-text-color: #a8a8a8; */
-/*         --bold-text-color: #ffffff; */
-/*         --text-color-tertiary: #bbb; */
-
-/*         --link-color: #5cc2ff; */
-/*         --link-visited-color: #9d7eff; */
-
-/*         --code-bg-color: #1a1a1a; */
-/*         --code-text-color: #d4d4d4; */
-/*         --blockquote-border-color: #555555; */
-/*         --blockquote-text-color: #bbbbbb; */
-
-/*         --table-border-color: #444444; */
-/*         --table-th-bg-color: #1f1f1f; */
-
-/*         --img-border-color: #444444; */
-/*         --toc-text-color: #aaaaaa; */
-/*         --toc-hover-color: #5cc2ff; */
-/*         --summary-text-color: #878686; */
-/*         --color-background: var(--body-bg-color) !important; */
-/*     } */
-
-/*     a { */
-/*         color: var(--link-color); */
-/*         cursor: pointer; */
-/*     } */
-
-/*     h3.recent-post-title a { */
-/*         color: var(--body-text-color); */
-/*     } */
-
-/*     .post-meta-item svg { */
-/*         filter: invert(1) hue-rotate(180deg); */
-/*     } */
-
-/*     strong { */
-/*         /\* font-weight: 650; *\/ */
-/*     } */
-
-/*     .music-btn { */
-/*         background-color: var(--music-bg-dark); */
-/*     } */
-/*     .music-btn:hover { */
-/*         background-color: var(--music-bg-hover-dark); */
-/*     } */
-
-/*     .category-link { */
-/*         color: #dbdbdb; */
-/*     } */
-
-/*     .wm { */
-/*         background-color: #161b22; */
-/*         border-color: #30363d; */
-/*         color: var(--body-text-color); */
-/*         padding: 10px; */
-/*     } */
-
-/*     .wm input { */
-/*         background-color: #010409; */
-/*         border: #30363d 1px solid; */
-/*         color: var(--body-text-color); */
-/*         outline: none; */
-/*     } */
-
-/*     #webmention-source:focus { */
-/*         border-color: var(--color-accent-fg, #0969da); */
-/*         box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1); */
-/*     } */
-
-/*     .wm button { */
-/*         color: var(--body-text-color); */
-/*         background-color: #161b22; */
-/*         border: #30363d 1px solid; */
-/*     } */
-
-/*     .post-summary { */
-/*         color: var(--text-color-primary) !important; */
-/*     } */
-
-/*     .post-item { */
-/*         border-bottom: 1px solid #414141 !important; */
-/*     } */
-
-/*     .pagination-link { */
-/*         border: 1px solid #414141 !important; */
-/*     } */
-/* } */
+button {
+background: var(--btn-bg-color);
+    border: 1px solid var(--btn-border-color);
+    color: var(--btn-color, currentColor);
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+}
+
+body.dark-mode {
+
+    --btn-bg: #3a3a3a;
+    --btn-border: #555555;
+    --btn-color: #eeeeee;
+    --btn-bg-hover: #4a4a4a;
+    --btn-border-hover: #777777;
+
+
+    --body-text-color: #bbb; 
+
+    --title-color: #aaa;
+
+    --body-bg-color: #1b1a1d;
+    --summary-text-color: #a8a8a8;
+    --bold-text-color: #ffffff;
+    --text-color-tertiary: #bbb;
+
+    --link-color: #5cc2ff;
+    --link-visited-color: #9d7eff;
+
+    --code-bg-color: #1a1a1a;
+    --code-text-color: #d4d4d4;
+    --blockquote-border-color: #555555;
+    --blockquote-text-color: #bbbbbb;
+
+    --table-border-color: #444444;
+    --table-th-bg-color: #1f1f1f;
+
+    --img-border-color: #444444;
+    --toc-text-color: #aaaaaa;
+    --toc-hover-color: #5cc2ff;
+    --summary-text-color: #878686;
+    --color-background: var(--body-bg-color) !important;
+
+    a {
+        color: var(--link-color);
+        cursor: pointer;
+    }
+
+    h3.recent-post-title a {
+        color: var(--body-text-color);
+    }
+
+    .post-meta-item svg {
+        filter: invert(1) hue-rotate(180deg);
+    }
+
+    strong {
+        /* font-weight: 650; */
+    }
+
+    .music-btn {
+        background-color: var(--music-bg-dark);
+    }
+    .music-btn:hover {
+        background-color: var(--music-bg-hover-dark);
+    }
+
+    .category-link {
+        color: #dbdbdb;
+    }
+
+    .wm {
+        background-color: #161b22;
+        border-color: #30363d;
+        color: var(--body-text-color);
+        padding: 10px;
+    }
+
+    .wm input {
+        background-color: #010409;
+        border: #30363d 1px solid;
+        color: var(--body-text-color);
+        outline: none;
+    }
+
+    #webmention-source:focus {
+        border-color: var(--color-accent-fg, #0969da);
+        box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
+    }
+
+    .wm button {
+        color: var(--body-text-color);
+        background-color: #161b22;
+        border: #30363d 1px solid;
+    }
+
+    .post-summary {
+        color: var(--text-color-primary) !important;
+    }
+
+    .post-item {
+        border-bottom: 1px solid #414141 !important;
+    }
+
+    .pagination-link {
+        border: 1px solid #414141 !important;
+    }
+}
 
 @media (min-width: 768px) {
     .music-card {