Dark mode optimization.

2 files changed, 81 insertions, 74 deletions

diff --git a/assets/scss/dark-mode.scss b/assets/scss/dark-mode.scss
index 7bbd9cc..6dce39d 100644
--- a/assets/scss/dark-mode.scss
+++ b/assets/scss/dark-mode.scss
@@ -2,25 +2,25 @@
 
 $light-accent: lighten($color-accent, 10%);
 $deep-light-accent: lighten($color-accent, 30%);
-$dark-mode-text: darken(#FFF, 10%);
+$dark-mode-text: darken(#fff, 10%);
 
 $dark-mode-back-container-background: #212121;
 $dark-mode-front-container-background: #282828;
 
 body.night {
   background: $dark-mode-back-container-background;
-  :root{
+  :root {
     --color_555: #ccc;
     --color_ededed: #000;
   }
 
   img {
-    opacity: .8;
+    opacity: 0.8;
   }
 
   blockquote {
     * {
-        color: $deep-light-accent !important;
+      color: $deep-light-accent !important;
     }
   }
 
@@ -45,6 +45,7 @@ body.night {
       background: none !important;
       color: $dark-mode-text !important;
     }
+    color: $dark-mode-text !important;
   }
 
   table * {
@@ -87,26 +88,32 @@ body.night {
         &:hover {
           border-right: 2px solid
             rgba($color-accent, $nav-item-hover-indicator-alpha);
-          color: lighten($color-accent, $nav-item-hover-color-lighten) !important;
+          color: lighten(
+            $color-accent,
+            $nav-item-hover-color-lighten
+          ) !important;
         }
         &.active {
           border-right: 2px solid $color-accent;
           background: rgba($color-accent, $nav-item-active-background-alpha);
-          color: lighten($color-accent, $nav-item-active-color-lighten) !important;
+          color: lighten(
+            $color-accent,
+            $nav-item-active-color-lighten
+          ) !important;
         }
       }
     }
   }
   .stream-container {
-    .post-head-wrapper-text-only *{
+    .post-head-wrapper-text-only * {
       color: $dark-mode-text;
     }
-    .post{
+    .post {
       background: $dark-mode-front-container-background;
       @media screen and (max-width: $single-column-max-width) {
         background: $dark-mode-back-container-background;
       }
-      .post-pagination a:not([href]){
+      .post-pagination a:not([href]) {
         color: $dark-mode-text;
       }
       .post-comment-wrapper * {
@@ -114,45 +121,40 @@ body.night {
       }
     }
     .post-list-container {
-      -webkit-transition: all 0.5s ease;
-      -moz-transition: all 0.5s ease;
-      -o-transition: all 0.5s ease;
-      transition: all 0.5s ease;
       background: $dark-mode-front-container-background;
       @media screen and (max-width: $single-column-max-width) {
         background: $dark-mode-back-container-background;
       }
       &,
-    > * {
-      .post-item-wrapper {
-        * {
-          color: $dark-mode-text;
-        }
-        .post-item-info-wrapper{
+      > * {
+        .post-item-wrapper {
+          * {
+            color: $dark-mode-text;
+          }
+          .post-item-info-wrapper {
+            @media screen and (max-width: $single-column-max-width) {
+              box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+              background: $dark-mode-front-container-background;
+            }
+          }
+
           @media screen and (max-width: $single-column-max-width) {
             box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
             background: $dark-mode-front-container-background;
           }
-        }
-
-        @media screen and (max-width: $single-column-max-width) {
-          box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-          background: $dark-mode-front-container-background;
-        }
-        &:not(.post-item-wrapper-no-hover):hover {
-          background: rgba(255,255,255, 0.03);
-          * {
-            color: $deep-light-accent !important;
+          &:not(.post-item-wrapper-no-hover):hover {
+            background: rgba(255, 255, 255, 0.03);
+            * {
+              color: $deep-light-accent !important;
+            }
           }
         }
-        }
       }
     }
-    
   }
 
   .single-column-nav-container {
-    * { 
+    * {
       color: $dark-mode-text;
     }
     @media screen and (max-width: $single-column-max-width) {
@@ -164,7 +166,7 @@ body.night {
       .navbar-brand {
         color: $dark-mode-text;
         &:hover {
-            color: $dark-mode-text;
+          color: $dark-mode-text;
         }
       }
       .nav-background {
@@ -175,27 +177,26 @@ body.night {
   }
 
   .single-column-header-container {
-      @media screen and (max-width: $single-column-max-width) {
-        * {
-          font-family: $sans-preferred-font-list;
-          color: $deep-light-accent;
-        }
-        .single-column-header-title {
-          color: $dark-mode-text;
-        }
-        .single-column-header-subtitle {
-          color: $dark-mode-text;
-        }
+    @media screen and (max-width: $single-column-max-width) {
+      * {
+        font-family: $sans-preferred-font-list;
+        color: $deep-light-accent;
       }
+      .single-column-header-title {
+        color: $dark-mode-text;
+      }
+      .single-column-header-subtitle {
+        color: $dark-mode-text;
+      }
+    }
   }
 
-
   .single-column-drawer-container {
     @media screen and (max-width: $single-column-max-width) {
       .drawer-content {
         background: $dark-mode-front-container-background;
-        .toc{
-          background-color: lighten($dark-mode-front-container-background,10%);
+        .toc {
+          background-color: lighten($dark-mode-front-container-background, 10%);
         }
         .drawer-menu {
           .drawer-menu-item {
@@ -214,22 +215,29 @@ body.night {
     color: $dark-mode-text;
   }
 
-  .toc{
+  .toc {
     background-color: $dark-mode-front-container-background;
-    *{
+    * {
       color: $dark-mode-text;
     }
     a {
       color: $dark-mode-text;
     }
-    .toc-active{
+    .toc-active {
       color: $light-accent !important;
     }
   }
 
-  .post-body p,h1,h2,h3,h4,h5,h6,li {
+  .post-body p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  li {
     color: $dark-mode-text;
-    *:not(a){
+    *:not(a) {
       color: $dark-mode-text;
     }
   }
@@ -244,9 +252,8 @@ body.night {
   .vcontent p {
     color: $dark-mode-text !important;
   }
-  
-  .gsc-control-searchbox-only table *{
+
+  .gsc-control-searchbox-only table * {
     color: black !important;
   }
-
 }
diff --git a/static/js/journal.js b/static/js/journal.js
index 6b4a91f..8893bf8 100644
--- a/static/js/journal.js
+++ b/static/js/journal.js
@@ -212,27 +212,8 @@ document.querySelectorAll("table").forEach(function (elem) {
 
 // Night mode
 
-var night = document.cookie.replace(
-  /(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/,
-  "$1"
-);
-
 var isDarkMode = false;
 
-if (night == "") {
-  if (
-    window.matchMedia &&
-    window.matchMedia("(prefers-color-scheme: dark)").matches
-  ) {
-    isDarkMode = true;
-  }
-} else {
-  // If night is not empty
-  if (night == "1") {
-    isDarkMode = true;
-  }
-}
-
 var toggleDarkMode = function () {
   isDarkMode = !isDarkMode;
   let icon = document.getElementById("darkModeToggleIcon");
@@ -250,6 +231,25 @@ var toggleDarkMode = function () {
   }
 };
 
+let night = document.cookie.replace(
+  /(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/,
+  "$1"
+);
+
+if (night == "") {
+  if (
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  ) {
+    toggleDarkMode();
+  }
+} else {
+  // If night is not empty
+  if (night === "1") {
+    toggleDarkMode();
+  }
+}
+
 document
   .getElementById("darkModeToggleButton")
   .addEventListener("click", function () {