From cff6004f62c1afed313cd72795684544aedd97ed Mon Sep 17 00:00:00 2001
From: wizardforcel <562826179@qq.com>
Date: Sat, 8 May 2021 23:08:22 +0800
Subject: [PATCH] 2021-05-08 23:08:22
---
asset/dark-mode.css | 23 +++++++++++++++++++++++
asset/dark-mode.js | 42 ++++++++++++++++++++++++++++++++++++++++++
asset/moon.svg | 1 +
asset/sun.svg | 1 +
index.html | 3 +++
5 files changed, 70 insertions(+)
create mode 100644 asset/dark-mode.css
create mode 100644 asset/dark-mode.js
create mode 100644 asset/moon.svg
create mode 100644 asset/sun.svg
diff --git a/asset/dark-mode.css b/asset/dark-mode.css
new file mode 100644
index 0000000..460957c
--- /dev/null
+++ 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');
+}
\ No newline at end of file
diff --git a/asset/dark-mode.js b/asset/dark-mode.js
new file mode 100644
index 0000000..471dcf8
--- /dev/null
+++ 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
new file mode 100644
index 0000000..bc0bf10
--- /dev/null
+++ b/asset/moon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/asset/sun.svg b/asset/sun.svg
new file mode 100644
index 0000000..8fb9960
--- /dev/null
+++ b/asset/sun.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 2165c25..3fc7ede 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,9 @@
+
+
+
now loading...
--
GitLab