2021-05-08 22:39:09

RaymondZZQ · May 8, 2021 · 4bc4553 · 4bc4553
1 parent 128b781
commit 4bc4553
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 1 deletion.
diff --git a/asset/dark-mode.css b/asset/dark-mode.css
@@ -0,0 +1,23 @@
+#dark-mode-btn {
+	position: fixed;
+	right: 20px;
+	top: 100px;
+	width: 25px;
+	height: 25px;
+	background-repeat: no-repeat;
+	background-size: cover;
+	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	transition: background-image .15s ease-in-out .15s;
+}
+
+.dark-logo {	
+	background-image: url('sun.svg');	
+}
+
+.light-logo {
+	background-image: url('moon.svg');
+}
diff --git a/asset/dark-mode.js b/asset/dark-mode.js
@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', function() {
+	var style = document.querySelector('#invert')
+	if (style == null) {
+		style = document.createElement('style')
+		style.id = 'invert'
+		document.head.append(style)
+	}
+	var btn = document.querySelector('#dark-mode-btn')
+	if (btn == null) {
+		btn = document.createElement('div')
+		btn.id = 'dark-mode-btn'
+		btn.classList.add('light-logo')
+		document.body.append(btn)
+	}
+
+	var enableDarkMode = function() {
+		style.innerText = 'html,img,pre,#dark-mode-btn{filter:invert(100%)}'
+		btn.classList.remove('light-logo')
+		btn.classList.add('dark-logo')
+		localStorage.darkLight = 'dark'
+
+	}
+	var disableDarkMode = function() {
+		style.innerText = ''		
+		btn.classList.remove('dark-logo')
+		btn.classList.add('light-logo')
+		localStorage.darkLight = 'light'
+	}
+
+	btn.addEventListener('click', function(){
+		var currMode = localStorage.darkLight || 'light'
+		if (currMode == 'light')
+			enableDarkMode()
+		else 
+			disableDarkMode()
+	})
+
+	if (localStorage.darkLight == 'dark')
+		enableDarkMode()
+
+})
+
diff --git a/asset/moon.svg b/asset/moon.svg
diff --git a/asset/sun.svg b/asset/sun.svg
diff --git a/index.html b/index.html
@@ -15,6 +15,9 @@
 
   <!-- google webmaster -->
   <meta name="google-site-verification" content="pyo9N70ZWyh8JB43bIu633mhxesJ1IcwWCZlM3jUfFo" />
+
+  <link rel="stylesheet" href="asset/dark-mode.css">
+  <script src="asset/dark-mode.js"></script>
 </head>
 <body>
   <div id="app">now loading...</div>
@@ -57,6 +60,5 @@
   <script src="asset/docsify-cnzz.js"></script>
   <script src="asset/docsify-apachecn-footer.js"></script>
   <script src="asset/docsify-clicker.js"></script>
-  <script src="asset/docsify-clicker.js"></script>
 </body>
 </html>