Add Dark Mode

assets/scss/overrides.scss

@@ -1,4 +1,12 @@
 // The following variables can be overridden
 
-// The primary accent color can take any css color property, including hex, named props, rgba etc.
-// $primary:
+// The colors can take any css color property, including hex, named props, rgba etc.
+
+// $themes: (
+//   newTheme: (
+//     text: #hex,
+//     ...
+//   ),
+// );
+
+

assets/scss/pages/about.scss

@@ -30,19 +30,25 @@
 }
 
 .fancy {
-  color: $primary;
+  @include theme() {
+    color: theme-get('accent');
+  }
 }
 
 .handle {
   display: inline-block;
   margin-top: 0.275em;
-  color: $grey;
+  @include theme() {
+    color: theme-get('neutral');
+  }
   letter-spacing: 0.5px;
 }
 
 .writing {
+  @include theme() {
+    color: theme-get('accent');
+  }
   text-decoration: none;
-  color: $primary;
 }
 
 /* overrides */

assets/scss/pages/post.scss

@@ -28,13 +28,17 @@ $tocBreakpoint: 1024px;
       text-decoration: none;
       position: absolute;
       left: -1rem;
-      color: $grey;
+      @include theme() {
+        color: theme-get('neutral');
+      }
       font-size: 1.2rem;
       font-weight: 400;
     }
 
     .anchor:hover {
-      color: $darkGrey;
+      @include theme() {
+        color: theme-get('high-neutral');
+      }
     }
   }
 
@@ -44,7 +48,9 @@ $tocBreakpoint: 1024px;
     font-size: 1rem;
 
     a {
-      color: $darkGrey;
+      @include theme() {
+        color: theme-get('high-neutral');
+      }
       text-decoration: underline;
     }
   }
@@ -63,7 +69,9 @@ $tocBreakpoint: 1024px;
 }
 
 .post__date {
-  color: $grey;
+  @include theme() {
+    color: theme-get('neutral');
+  }
   font-size: 0.8rem;
 }
 
@@ -128,12 +136,18 @@ $tocBreakpoint: 1024px;
   text-decoration: none;
   padding: 0.2em 0.4em;
   border-radius: 3px;
-  background: lighten($primary, 41%);
-  color: $primary;
+  @include theme() {
+    background: lighten(theme-get('accent'), 41%);;
+  }
+  @include theme() {
+    color: theme-get('accent');
+  }
   font-size: 0.8rem;
 
   &:hover {
-    background: lighten($primary, 38%);
+    @include theme() {
+      background: lighten(theme-get('accent'), 38%);
+    }
   }
 }
 
@@ -182,24 +196,32 @@ $tocBreakpoint: 1024px;
 }
 
 .pagination__label {
-  color: $grey;
+  @include theme() {
+    color: theme-get('neutral');
+  }
   font-size: 0.8rem;
 }
 
 .pagination__title {
-  color: $black;
+  @include theme() {
+    color: theme-get('text');
+  }
   font-weight: 700;
   margin-top: 0.25rem;
 }
 
 footer {
   text-align: center;
   padding: 0 1.5rem;
-  background: $white;
+  @include theme() {
+    background: theme-get('bg');
+  }
 
   p {
     margin-top: 1rem; // reduce margin top due to social icons' padding
-    color: $grey;
+    @include theme() {
+      color: theme-get('neutral');
+    }
     font-size: 0.65rem;
   }
 }
@@ -214,12 +236,23 @@ footer {
 
       &::before {
         content: "-";
-        color: $darkGrey;
+        @include theme() {
+          color: theme-get('high-neutral');
+        }
         position: absolute;
         margin-left: -15px;
       }
     }
   }
+
+  a[href] {
+    @include theme() {
+      color: theme-get('accent-text');
+      &:visited {
+        color: theme-get('accent-bg')
+      }
+    }
+  }
 }
 
 .twitter-tweet.twitter-tweet-rendered {
@@ -232,12 +265,16 @@ table {
   border-spacing: 0;
 
   thead {
-    background: $lightGrey;
+    @include theme() {
+      background: theme-get('low-neutral');
+    }
   }
 
   th,
   td {
     padding: 0.5em 1em;
-    border: 1px double $greyTableBorder;
+    @include theme() {
+      border: 1px double theme-get('neutral-table-border');
+    }
   }
 }

assets/scss/pages/posts.scss

@@ -36,7 +36,6 @@
 
 .tag__link {
   text-decoration: none;
-  color: $grey;
   font-size: 0.9rem;
 
   &::before {
@@ -45,8 +44,11 @@
     padding-right: 1px;
   }
 
-  &:hover {
-    color: $darkGrey;
+  @include theme() {
+  color: theme-get('neutral');
+    &:hover {
+      color: theme-get('high-neutral');
+    }
   }
 }
 

assets/scss/pages/tags.scss

@@ -8,7 +8,9 @@
 
   a,
   .separator {
-    color: $grey;
+    @include theme() {
+      color: theme-get('neutral');
+    }
     font-size: 1.5rem;
   }
 

assets/scss/partials/_burger.scss

@@ -5,7 +5,9 @@
   padding: 0 1.5rem;
   position: fixed;
   width: 100%;
-  background: $white;
+  @include theme() {
+    background: theme-get('bg');
+  }
   z-index: 2;
 
   @media screen and (min-width: $medium) {
@@ -24,7 +26,9 @@
   position: absolute;
   width: $meatWidth;
   height: $meatHeight;
-  background: $black;
+  @include theme() {
+    background: theme-get('text');
+  }
   top: calc(50% - #{$meatHeight} / 2);
   left: calc(50% - #{$meatWidth} / 2);
   transition: all 150ms ease-in;

assets/scss/partials/_nav.scss

@@ -6,10 +6,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: $white;
+  @include theme() {
+    background: theme-get('bg');
+  }
   visibility: hidden;
   z-index: 1;
-
   @media screen and (min-width: $medium) {
     display: block;
     visibility: visible;
@@ -64,16 +65,22 @@
 }
 
 .nav__list a {
-  color: $grey;
+  @include theme() {
+    color: theme-get('neutral');
+  }
   text-decoration: none;
   font-size: 2em;
 
   &.active {
-    color: $black;
+    @include theme() {
+      color: theme-get('text');
+    }
   }
 
   &:hover {
-    color: $black;
+    @include theme() {
+      color: theme-get('text');
+    }
   }
 
   @media screen and (min-width: $medium) {

assets/scss/partials/_post-list.scss

@@ -23,12 +23,16 @@
   font-weight: 500;
 
   a {
-    color: $black;
+    @include theme() {
+      color: theme-get('text');
+    }
     text-decoration: none;
   }
 }
 
 .post__date {
-  color: $grey;
+  @include theme() {
+    color: theme-get('neutral');
+  }
   font-size: 0.8rem;
 }

assets/scss/partials/_reset.scss

@@ -1,7 +1,9 @@
 html,
 body {
-  background-color: $white;
-  color: $black;
+  @include theme() {
+    background-color: theme-get('bg');
+    color: theme-get('text');
+  }
   height: 100%;
 }
 

assets/scss/partials/_social-icons.scss

@@ -15,5 +15,8 @@
     height: 1.4rem;
     background-size: contain;
     background-repeat: no-repeat;
+    @include theme() {
+      color: theme-get('text');
+    }
   }
 }

assets/scss/partials/_typography.scss

@@ -86,13 +86,17 @@ blockquote {
     margin-left: -0.2em;
 
     z-index: -1;
-    color: darken($white, 7%);
+    @include theme() {
+      color: darken(theme-get('bg'), 7%);
+    }
   }
 
   margin-top: $leading;
   margin-bottom: $leading;
   line-height: $leading;
-  color: $black;
+  @include theme() {
+    color: theme-get('text');
+  }
 
   cite {
     &::before {
@@ -101,7 +105,9 @@ blockquote {
 
     font-style: italic;
     font-size: 0.95em;
-    color: $darkGrey;
+    @include theme() {
+      color: theme-get('high-neutral');
+    }
   }
 }