Add dark mode.

1 files changed, 26 insertions, 1 deletions

diff --git a/static/js/journal.js b/static/js/journal.js
index eaa68d2..2d7a8c9 100644
--- a/static/js/journal.js
+++ b/static/js/journal.js
@@ -7,6 +7,7 @@ app = new Vue({
         navOpacity: 0,
         isDrawerOpen: false,
         mounted: false,
+        isDarkMode: false
     },
     methods: {
             sgn(t, x) {
@@ -48,6 +49,16 @@ app = new Vue({
                 this.isDrawerOpen = false;
                 document.getElementsByTagName('html')[0].style.overflow = this.isDrawerOpen ? 'hidden' : 'unset';
             },
+            toggleDarkMode() {
+                this.isDarkMode = !this.isDarkMode;
+                if (this.isDarkMode==true){
+                    document.cookie = "night=1;path=/";
+                    document.body.classList.add("night");
+                } else {
+                    document.cookie = "night=0;path=/";
+                    document.body.classList.remove("night");
+                }
+            }
     },
     created() {
         window.addEventListener('scroll', this.handleScroll);
@@ -59,6 +70,20 @@ app = new Vue({
             })(navigator.userAgent || navigator.vendor || window.opera);
             return check;
         };
+        
+        // From https://www.jdeal.cn/archives/Dark.html
+        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+        if (night==""){
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                this.toggleDarkMode();
+            }
+        }else{
+            // If night is not empty
+            if (night=="1") {
+                this.toggleDarkMode();
+            }
+        }
+        
     },
     mounted() {
         this.handleScroll();
@@ -88,4 +113,4 @@ Vue.component('parent',{
         </div>
     </div>
     `
-});
\ No newline at end of file
+});