feat: 夜间模式完善

youranreus · Nov 8, 2021 · 14e67ec · 14e67ec
1 parent eeaf6ed
commit 14e67ec
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 18 deletions.
diff --git a/components/comments.php b/components/comments.php
@@ -55,7 +55,7 @@ function threadedComments($comments, $options) {
                     <!-- 如果当前用户已经登录 -->
                     <?php if($this->user->hasLogin()): ?>
                         <!-- 显示当前登录用户的用户名以及登出连接 -->
-                        <span style="font-size: 0.875rem;position: absolute;top: 1.5rem;right: 1.5rem;">🙋<?php $this->user->screenName(); ?></span> 
+                        <span style="font-size: 0.875rem;position: absolute;top: 1.5rem;right: 1.5rem;color:var(--theme-text-main);">🙋<?php $this->user->screenName(); ?></span> 
                     <!-- 若当前用户未登录 -->
                     <?php else: ?>
                     <!-- 要求输入名字、邮箱、网址 -->

diff --git a/components/footer.php b/components/footer.php
@@ -22,10 +22,11 @@
         </p>
     </footer>
 </div>
+<div id="dark-cover"></div>
+<?php $this->need('components/toolbar.php'); ?>
 <?php $this->footer(); ?>
 <script src="<?php echo G::staticUrl('static/js/lib.js'); ?>?v=3.10012"></script>
 <script src="<?php echo G::staticUrl('static/js/prism.js'); ?>?v=1.01" data-manual></script>
-<script src="<?php echo G::staticUrl('static/js/G.js'); ?>?v=3.211"></script>
-<?php $this->need('components/toolbar.php'); ?>
+<script src="<?php echo G::staticUrl('static/js/G.js'); ?>?v=3.214"></script>
 </body>
 </html>
diff --git a/components/header.php b/components/header.php
@@ -22,7 +22,9 @@
     </style>
     <link rel="stylesheet" href="<?php echo G::staticUrl('static/css/normalize.css'); ?>">
     <link rel="stylesheet" href="<?php echo G::staticUrl('static/css/prism.css'); ?>?v=1.01">
-    <link rel="stylesheet" href="<?php echo G::staticUrl('static/css/G.css'); ?>?v=3.214">
+    <link rel="stylesheet" href="<?php echo G::staticUrl('static/css/G.css'); ?>?v=3.218">
+    <link rel="stylesheet" href="<?php echo G::staticUrl('static/css/dark.css'); ?>?v=3.218">
+
     <style>
         /* 设置自定义背景[颜色/图片] */
         html::before {

diff --git a/components/toolbar.php b/components/toolbar.php
@@ -1,3 +1,3 @@
-<div id="toolbar">
+<!-- <div id="toolbar">
     
-</div>
+</div> -->
diff --git a/static/css/G.css b/static/css/G.css
@@ -1,13 +1,18 @@
 @charset "UTF-8";
 @import "animation.css";
-@import "shortcode.css?v=3.10003";
+@import "shortcode.css?v=3.10004";
 
 @font-face {
 	font-family: "Jetbrains Mono";
 	src: url(../font/JB.ttf) format("truetype");
 }
 
-:root {
+html {
+	font-size: 18px;
+	font-weight: 400;
+	line-height: 1.15;
+	-webkit-text-size-adjust: 100%;
+	transition: font-size 0.2s ease;
 	--theme-text-main: #000;
 	--theme-bg-main: #fff;
 	--theme-text-strong: RGB(204, 53, 54);
@@ -33,14 +38,6 @@
 	--theme-pap-text-main: #202020;
 }
 
-html {
-	font-size: 18px;
-	font-weight: 400;
-	line-height: 1.15;
-	-webkit-text-size-adjust: 100%;
-	transition: font-size 0.2s ease;
-}
-
 html::-webkit-scrollbar-thumb {
 	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
 		inset 0 -1px 0 rgba(0, 0, 0, 0.07);
@@ -465,6 +462,7 @@ h3.archive-title {
 }
 
 .PAP-banner div p {
+	color: var(--theme-text-main);
 	margin: 0.5rem 0 0 0;
 	font-size: 0.875rem;
 	text-align: center;
@@ -535,6 +533,7 @@ h3.archive-title {
 .PAP-content h3,
 .PAP-content h4,
 .PAP-content h5 {
+	color: var(--theme-text-main);
 	margin: 0 1.5rem 1.25rem;
 	position: relative;
 	font-weight: 400;
@@ -750,6 +749,7 @@ pre[class*="language-"] {
 }
 
 #post-footer p {
+	color: var(--theme-text-main);
 	margin: 0;
 	opacity: 0.7;
 }
@@ -948,6 +948,7 @@ pre[class*="language-"] {
 }
 
 #comments-form h3 {
+	color: var(--theme-text-main);
 	margin: 0;
 	font-size: 1.125rem;
 	font-weight: 600;
@@ -963,7 +964,7 @@ pre[class*="language-"] {
 
 .comments-Input input {
 	width: 30%;
-	background: RGBA(46, 50, 56, 0.05);
+	background: #F4F5F5;
 	border: 1px solid transparent;
 	outline: none;
 	padding: 0.438rem 0.525rem;
@@ -976,7 +977,7 @@ pre[class*="language-"] {
 	box-sizing: border-box;
 	width: 100%;
 	margin: 0.5rem 0 0 0;
-	background: RGBA(46, 50, 56, 0.05);
+	background: #F4F5F5;
 	border: 1px solid transparent;
 	outline: none;
 	padding: 0.438rem 0.525rem;
@@ -1065,6 +1066,7 @@ pre[class*="language-"] {
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: .5rem;
+	color: var(--theme-text-main);
 }
 
 .comment-meta span:first-child {
@@ -1078,6 +1080,7 @@ pre[class*="language-"] {
 }
 
 .comment-content p {
+	color: var(--theme-text-main);
 	margin-bottom: 0;
 	line-height: 1.7;
 	letter-spacing: 0.03rem;

diff --git a/static/css/dark.css b/static/css/dark.css
@@ -0,0 +1,111 @@
+html[theme-mode="dark"] {
+	--theme-text-main: rgba(249, 249, 249, 0.8);
+	--theme-bg-main: #2c2a2a;
+	--theme-text-strong: RGB(204, 53, 54);
+	--theme-text-code: #dd4a68;
+	--theme-bg-sub: RGBA(244, 245, 245, 1);
+	--theme-text-blockq-bg: #383737;
+	--theme-text-blockq: #878c93;
+	--theme-table-th-bg: #f8f8f8;
+	--theme-table-td-bg: #fff;
+	--theme-table-td-bg-even: #f8f8f8;
+	--theme-table-tr-border: #ccc;
+	--theme-table-td-border: #ddd;
+	--theme-banner-bg: #343232;
+	--theme-banner-title: #fff;
+	--theme-pap-text-main: rgba(249, 249, 249, 0.8);
+	--header-color: #2c2a2a;
+}
+
+html[theme-mode="dark"] .article-banner-wrap {
+	display: none;
+}
+
+html[theme-mode="dark"] #dark-cover {
+	position: fixed;
+	background: RGBA(0, 0, 0, 0.8);
+	width: 100vw;
+	height: 100vh;
+	top: 0;
+	left: 0;
+	z-index: -1;
+}
+
+html[theme-mode="dark"] .article-title a,
+html[theme-mode="dark"] .article-title {
+	color: #fff;
+}
+
+html[theme-mode="dark"] .article-data span {
+	color: var(--theme-text-main);
+}
+
+html[theme-mode="dark"] .article-banner {
+	display: none;
+}
+
+html[theme-mode="dark"] a.prev,
+html[theme-mode="dark"] a.next {
+	background: rgba(22, 22, 26, 0.99);
+	border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+html[theme-mode="dark"] #post-footer-tag p a,
+html[theme-mode="dark"] #tag-cloud li a {
+	background-color: #403e3e;
+	color: #f0f0f0;
+}
+
+html[theme-mode="dark"] #comments-textarea,
+html[theme-mode="dark"] .comments-Input input {
+	background: #343232;
+	color: var(--theme-text-main);
+}
+
+html[theme-mode="dark"] #comments-form input.submit {
+	background: #2e2f34;
+}
+
+/* html[theme-mode="dark"] .comment-avatar span a {
+	background: var(--theme-bg-main);
+} */
+
+html[theme-mode="dark"] .collapse-title {
+	background: rgb(64, 62, 62);
+}
+
+html[theme-mode="dark"] .collapse-box {
+	border: 1px solid #555;
+}
+
+html[theme-mode="dark"] .shortcode-warn {
+	background: #3e3536;
+	color: var(--theme-text-main);
+	opacity: 0.6;
+}
+
+html[theme-mode="dark"] .shortcode-notice {
+	background: #37373a;
+	color: var(--theme-text-main);
+	opacity: 0.6;
+}
+
+html[theme-mode="dark"] .link-item-content h4 {
+	color: var(--theme-text-main);
+}
+
+html[theme-mode="dark"] .link-item-content p {
+	-webkit-text-stroke: 2px var(--theme-text-main);
+}
+
+html[theme-mode="dark"] .archives a {
+	color: rgb(240, 240, 240);
+}
+
+html[theme-mode="dark"] .archives a:hover {
+	background: rgb(64, 62, 62);
+}
+
+html[theme-mode="dark"] .archives a .time {
+	color: rgb(204, 204, 204);
+}
diff --git a/static/css/shortcode.css b/static/css/shortcode.css
@@ -118,6 +118,7 @@
 }
 
 .collapse-content-inner {
+	color:var(--theme-text-main);
 	margin: 1.5rem;
 }
 

diff --git a/static/js/G.js b/static/js/G.js
@@ -152,6 +152,14 @@ let makeGallery = () => {
 		}
 }
 
+let darkModeToggle = () => {
+	let h = document.querySelector('html');
+	if(h.hasAttribute('theme-mode'))
+		h.removeAttribute('theme-mode');
+	else
+		h.setAttribute('theme-mode', 'dark');
+};
+
 window.onload = function () {
 	console.log("G.js onload");
 	makePrismLineNum();
@@ -177,6 +185,7 @@ window.ready(function () {
 	lazyload(pics, function (element, observe) {
 		lazyPic(element, observe);
 	});
+	darkModeToggle();
 });
 
 window.onbeforeunload = function() {