2021-05-08 23:05:27

a4883f73 · wizardforcel · 8f655c59 · a4883f73 · a4883f73 · a4883f73
Showing with 70 addition and 0 deletion

asset/dark-mode.css asset/dark-mode.css +23 -0

asset/dark-mode.js asset/dark-mode.js +42 -0

asset/moon.svg asset/moon.svg +1 -0

asset/sun.svg asset/sun.svg +1 -0

index.html index.html +3 -0

未找到文件。
--- a/asset/dark-mode.css
+++ b/asset/dark-mode.css
+#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');
+}
\ No newline at end of file
--- a/asset/dark-mode.js
+++ b/asset/dark-mode.js
+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()
+	
+})
+
--- a/asset/moon.svg
+++ b/asset/moon.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff" stroke="#34495e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
\ No newline at end of file
--- a/asset/sun.svg
+++ b/asset/sun.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
\ No newline at end of file
--- 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>