Add dark mode.

2 files changed, 176 insertions, 4 deletions

diff --git a/assets/scss/dark-mode.scss b/assets/scss/dark-mode.scss
new file mode 100644
index 0000000..bd393ac
--- /dev/null
+++ b/assets/scss/dark-mode.scss
@@ -0,0 +1,146 @@
+@import "journal";
+
+$dark-mode-text: #ccc;
+
+body.night {
+  background: $dark-mode-back-container-background;
+  :root{
+    --color_555: #ccc;
+  }
+
+  img {
+    opacity: .8;
+  }
+
+  blockquote {
+      * {
+          color: $deep-light-accent;
+      }
+  }
+
+  code {
+    color: $deep-light-accent;
+  }
+
+  a {
+      color: $light-accent;
+      &:hover {
+        color: $deep-light-accent !important;
+      }
+      @media screen and (max-width: $single-column-max-width) {
+        &:hover {
+          text-decoration: none !important;
+        }
+      }
+  }
+
+  .nav-link-list {
+    $nav-item-hover-color-lighten: 30%;
+    $nav-item-active-background-alpha: 0.03;
+    $nav-item-active-color-lighten: 20%;
+    flex-grow: 1;
+    .nav-link-item {
+      color: $dark-mode-text !important;
+      &:hover {
+        color: lighten($color-accent, $nav-item-hover-color-lighten) !important;
+      }
+      &.active {
+        color: lighten($color-accent, $nav-item-active-color-lighten) !important;
+      }
+    }
+  }
+
+  .stream-container {
+    .post{
+      background: $dark-mode-front-container-background;
+      .post-comment-wrapper *{
+        color: $dark-mode-text !important;
+      }
+    }
+    .post-list-container {
+      background: $dark-mode-back-container-background;
+      &,
+    > * {
+      .post-item-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;
+          }
+          .post-item{
+            background: $dark-mode-front-container-background;
+          }
+          &:not(.post-item-wrapper-no-hover):hover {
+            * {
+              color: $deep-light-accent;
+            }
+          }
+        }
+      }
+    }
+  }
+  * {
+    color: $dark-mode-text;
+  }
+
+  .single-column-nav-container {
+      @media screen and (max-width: $single-column-max-width) {
+        .nav-dropdown-toggle {
+          &:hover {
+            color: #3f587d !important;
+          }
+        }
+        .navbar-brand {
+          color: $dark-mode-text;
+          &:hover {
+              color: $dark-mode-text;
+          }
+        }
+        .nav-background {
+          background: $dark-mode-front-container-background;
+          box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+        }
+      }
+  }
+
+  .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;
+        }
+      }
+  }
+
+
+  .single-column-drawer-container {
+    @media screen and (max-width: $single-column-max-width) {
+      .drawer-content {
+        background: $dark-mode-back-container-background;
+        .drawer-menu {
+          .drawer-menu-item {
+            color: $dark-mode-text;
+            &.active {
+              border-right: 2px solid $color-accent;
+              color: $light-accent;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .toc{
+    a {
+      color: $dark-mode-text;
+    }
+    .toc-active{
+      color: $light-accent !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/journal.scss b/assets/scss/journal.scss
index b238c58..5c4f69e 100644
--- a/assets/scss/journal.scss
+++ b/assets/scss/journal.scss
@@ -1,6 +1,8 @@
 $color-accent: #1976d2;
 $back-container-background: #fcfcfc;
 $front-container-background: #ffffff;
+$dark-mode-back-container-background: #222222;
+$dark-mode-front-container-background: #333333;
 
 $default-font-list: "Lora", "Noto Serif SC", serif;
 $mono-font-list: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro",
@@ -18,7 +20,7 @@ $nav-subtitle-size: 18px;
 $nav-link-size: 20px;
 $nav-footer-size: 12px;
 $post-title-size: 30px;
-$post-subtitle-size: 16px;
+$post-subtitle-size: 12px;
 $post-summary-size: 16px;
 $post-body-size: 16px;
 $post-meta-size: 16px;
@@ -27,6 +29,8 @@ $toc-size: 16px;
 
 $dark-accent: darken($color-accent, 10%);
 $deep-dark-accent: darken($color-accent, 50%);
+$light-accent: lighten($color-accent, 10%);
+$deep-light-accent: lighten($color-accent, 30%);
 $color-text: $deep-dark-accent;
 
 @if lightness($color-accent) <10% {
@@ -56,6 +60,11 @@ $h-diff: 3px;
 }
 
 body {
+  //-webkit-transition: all 0.5s ease;
+  //-moz-transition: all 0.5s ease;
+  //-o-transition: all 0.5s ease;
+  //transition: all 0.2s ease;
+
   background: $back-container-background;
   padding: 0;
   margin: 0;
@@ -247,7 +256,11 @@ a {
     .navbar-brand {
       opacity: 0;
       text-align: left;
-      padding-left: 12px !important;
+      padding-left: 12px;
+      padding-top: 8px;
+      //justify-content: space-between;
+      //align-items: stretch;
+      flex: 1;
     }
     .nav-dropdown-toggle {
       display: flex;
@@ -257,7 +270,20 @@ a {
       justify-content: center;
       background: none !important;
       border: none;
-      padding-top: 1px;
+      //padding-top: 1px;
+      &:hover {
+        color: #3f587d !important;
+      }
+    }
+    .nav-darkmode-toggle {
+      display: flex;
+      align-content: center;
+      align-items: center;
+      justify-items: center;
+      justify-content: center;
+      background: none !important;
+      border: none;
+      //padding-top: 1px;
       &:hover {
         color: #3f587d !important;
       }
@@ -1037,4 +1063,4 @@ a {
 
 .year {
   color: $dark-accent;
-}
\ No newline at end of file
+}