diff --git a/layout/archive.ejs b/layout/archive.ejs
index 65ab9bc..acea3f5 100644
--- a/layout/archive.ejs
+++ b/layout/archive.ejs
@@ -18,7 +18,7 @@
                         year = post.year;
             %>
             <h3 class="archive-item archive-year">
-                <a id="archive-year-<%= year %>" href="<%= url_for("/") %>/archives/<%= year %>/">
+                <a id="archive-year-<%= year %>" href="<%= url_for("/archives") %>/<%= year %>/">
                     <%= year %>
                 </a>
             </h3>
@@ -50,6 +50,4 @@
         </nav>
     <% } %>
 
-    <%- partial('_partial/ad-article') %>
-
 <% } %>
\ No newline at end of file
diff --git a/source/style.scss b/source/style.scss
index b616d76..4b926a4 100644
--- a/source/style.scss
+++ b/source/style.scss
@@ -8,9 +8,9 @@
 @import "style/header";
 @import "style/footer";
 @import "style/sidebar";
-@import "style/main";
-@import "style/archive";
 @import "style/content";
+@import "style/post";
+@import "style/archive";
 @import "style/pagination";
 
 @import "style/search";
\ No newline at end of file
diff --git a/source/style/archive.scss b/source/style/archive.scss
index 2443eb2..387cffb 100644
--- a/source/style/archive.scss
+++ b/source/style/archive.scss
@@ -16,9 +16,17 @@
         background: transparent;
         transition: all ease 0.24s;
 
+        @media (prefers-color-scheme: dark) {
+          color: $dark-mode-text-color;
+        }
         &:hover {
-          border-left-color: lighten($accent-color,10%);
-          background: lighten($background-color,2%);
+          border-left-color: lighten($brand-color, 10%);
+          background-color: lighten($background-color, 2%);
+
+          @media (prefers-color-scheme: dark) {
+            border-left-color: lighten($dark-mode-brand-color, 10%);
+            background-color: darken($dark-mode-light-background, 5%);
+          }
         }
       }
     }
@@ -33,7 +41,11 @@
       }
       .title {
         font-size: 14px;
-        color: $accent-color;
+        color: $brand-color;
+
+        @media (prefers-color-scheme: dark) {
+          color: $dark-mode-brand-color;
+        }
       }
     }
   }
diff --git a/source/style/base.scss b/source/style/base.scss
index d50d2c0..9c4ff37 100644
--- a/source/style/base.scss
+++ b/source/style/base.scss
@@ -7,13 +7,10 @@
   padding: 0;
 }
 
-/* My Base */
-
 html {
   width: 100%;
   height: 100%;
   font-size: 62.5%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 body {
@@ -24,7 +21,7 @@ body {
   line-height: 1.5em;
   color: $text-color;
   text-rendering: geometricPrecision;
-  background-color: $background-color;
+  background-color: transparent;
 
   &.modal-active {
     overflow: hidden;
@@ -52,13 +49,13 @@ body {
 }
 
 ::-moz-selection {
-  background: fade(lighten($material-orange, 15%), 70%);
-  color: $black;
+  background: rgba(lighten($material-orange, 15%), 70%);
+  color: darken($text-color, 20%);
 }
 
 ::selection {
-  background: fade(lighten($material-orange, 15%), 70%);
-  color: $black;
+  background: rgba(lighten($material-orange, 15%), 70%);
+  color: darken($text-color, 20%);
 }
 
 h1, h2, h3,
@@ -95,7 +92,7 @@ h6 {
 }
 
 a {
-  color: $black;
+  color: $text-color;
   text-decoration: none;
   transition: all 0.24s ease;
 
@@ -109,10 +106,10 @@ pre {
 
   code {
     display: block;
-    background: white;
-    color: #4d4d4c;
     line-height: 1.5;
     border: 1px solid #ccc;
+    background-color: white;
+    color: #4d4d4c;
     padding: 10px;
   }
 }
@@ -120,26 +117,39 @@ pre {
 ::-webkit-input-placeholder {
   color: lighten($grey-color, 20%);
   font-weight: normal;
+
+  @media (prefers-color-scheme: dark) {
+    color: darken($dark-mode-text-color, 20%);
+  }
 }
 
 :-moz-placeholder { /* Firefox 18- */
   color: lighten($grey-color, 20%);
   font-weight: normal;
+
+  @media (prefers-color-scheme: dark) {
+    color: darken($dark-mode-text-color, 20%);
+  }
 }
 
 ::-moz-placeholder {  /* Firefox 19+ */
   color: lighten($grey-color, 20%);
   font-weight: normal;
+
+  @media (prefers-color-scheme: dark) {
+    color: darken($dark-mode-text-color, 20%);
+  }
 }
 
 :-ms-input-placeholder {
   color: lighten($grey-color, 20%);
   font-weight: normal;
+
+  @media (prefers-color-scheme: dark) {
+    color: darken($dark-mode-text-color, 20%);
+  }
 }
 
-/**
- *  Util
- */
 .clearfix {
   zoom: 1;
 
@@ -189,6 +199,10 @@ pre {
   transition: all 0.24s ease;
   z-index: 10;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: $dark-mode-background;
+  }
+
   .overlay {
     position: absolute;
     top: 0;
@@ -197,7 +211,7 @@ pre {
     height: 100%;
     content: "";
     opacity: 0;
-    background-color: fade($white, 50%);
+    background-color: rgba($black, 0.3);
     transition: all 0.24s ease;
     visibility: hidden;
     z-index: 9999;
diff --git a/source/style/button.scss b/source/style/button.scss
index bb3bc8d..69ce7f4 100644
--- a/source/style/button.scss
+++ b/source/style/button.scss
@@ -2,17 +2,26 @@
 
 .dark-btn {
   display: inline-block;
-  background: rgba(0,0,0,0.3);
-  border: 1px solid black;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid $black;
   padding: 0 15px;
   font-size: 13px;
   font-family: $base-font-family;
   text-align: center;
   color: lighten(#8f8f8f, 20%);
 
+  @media (prefers-color-scheme: dark) {
+    color: $dark-mode-text-color;
+  }
+
   &:hover {
-    color: lighten(#8f8f8f, 40%);
+    color: darken($text-color, 10%);
     background-color: $brand-color;
+
+    @media (prefers-color-scheme: dark) {
+      color: darken($dark-mode-text-color, 60%);
+      background-color: $dark-mode-brand-color;
+    }
   }
   .icon {
     margin-right: 5px;
diff --git a/source/style/content.scss b/source/style/content.scss
index 113eb3b..3f05ac5 100644
--- a/source/style/content.scss
+++ b/source/style/content.scss
@@ -1,11 +1,14 @@
 @import "variables";
 
 .content {
-  color: lighten($black, 2%);
+  color: lighten($text-color, 2%);
   font-size: 14px;
   line-height: 1.75em;
   padding: 0 30px;
 
+  @media (prefers-color-scheme: dark) {
+    color: $dark-mode-text-color;
+  }
   @media (max-width: $on-phone) {
     padding: 0 20px;
   }
@@ -13,17 +16,25 @@
   #pixiv-artist-count {
     color: $brand-color;
     font-weight: bolder;
+
+    @media (prefers-color-scheme: dark) {
+      color: $dark-mode-brand-color;
+    }
   }
   img {
     position: relative;
     display: block;
     width: 114%;
     margin: 0 -7%;
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
     padding: 5px;
-    background: white;
+    background-color: $white;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
     transition: all 0.24s ease;
 
+    @media (prefers-color-scheme: dark) {
+      background-color: lighten($dark-mode-light-background, 5%);
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    }
     @media (max-width: $on-phone)  {
       width: 100%;
       margin: 0;
@@ -33,6 +44,10 @@
   hr {
     border: 0;
     border-bottom: 1px solid #ddd;
+
+    @media (prefers-color-scheme: dark) {
+      border-bottom-color: lighten($dark-mode-light-background, 8%);
+    }
   }
   p.small-img,
   div.small-img {
@@ -53,15 +68,27 @@
     padding-left: 30px;
   }
   a {
-    color: darken($accent-color, 2%);
+    color: darken($brand-color, 2%);
 
+    @media (prefers-color-scheme: dark) {
+      color: darken($dark-mode-brand-color, 2%);
+    }
     &:hover {
-      color: darken($accent-color, 3%);
-      background: fade($accent-color, 10%);
+      color: darken($brand-color, 4%);
+      background: rgba($brand-color, 0.1);
+
+      @media (prefers-color-scheme: dark) {
+        color: darken($dark-mode-brand-color, 4%);
+        background: rgba($dark-mode-brand-color, 0.1);
+      }
     }
     &:active {
-      background: fade($accent-color, 20%);
       color: $white;
+      background: rgba($brand-color, 0.6);
+
+      @media (prefers-color-scheme: dark) {
+        background: rgba($dark-mode-brand-color, 0.6);
+      }
     }
   }
   h1, h2, h3, h4, h5, h6 {
@@ -107,18 +134,16 @@
     box-sizing: border-box;
     font-family: $code-font-family;
     width: 100%;
-    font-size: 12px;
     margin: 20px 0;
     padding: 10px 15px;
-    background: lighten($background-color,5%);
     white-space: pre;
     overflow: auto;
 
     code {
-      color: $black;
+      color: $text-color;
       margin: 0;
       font-size: 1em;
-      background: transparent;
+      background-color: transparent;
       border: 0;
       white-space: inherit;
     }
@@ -134,16 +159,24 @@
     border-radius: 2px;
     white-space: nowrap;
     font-size: 1em;
-    background: lighten($background-color, 5%);
+    background-color: lighten($background-color, 5%);
+
+    @media (prefers-color-scheme: dark) {
+      color: darken($dark-mode-brand-color, 2%);
+      background-color: darken($dark-mode-background, 5%);
+    }
   }
   .highlight {
     width: 100%;
     margin: 20px 0;
-    background: lighten($background-color, 5%);
+    background-color: lighten($background-color, 5%);
     overflow: auto;
 
+    @media (prefers-color-scheme: dark) {
+      background-color: darken($dark-mode-background, 5%);
+    }
     figcaption {
-      background: white;
+      background-color: transparent;
       padding-bottom: 15px;
     }
     pre {
@@ -157,7 +190,7 @@
     }
     .line {
       &.marked {
-        background: #F6F6F8;
+        background-color: transparent;
       }
     }
   }
@@ -166,18 +199,27 @@
 
     a {
       position: relative;
-      padding: 4px 10px 4px 20px;
+      padding: 4px 10px 4px 18px;
       margin-right: 5px;
       font-size: 12px;
-      background: $background-color;
       border-radius: 2px;
       vertical-align: middle;
       line-height: 1.75em;
-      color: $black;
+      color: $text-color;
+      background-color: $background-color;
+
+      @media (prefers-color-scheme: dark) {
+        color: $dark-mode-text-color;
+        background-color: rgba(0, 0, 0, 0.2);
+      }
 
       &:hover {
-        background: $black;
-        color: white;
+        background-color: $text-color;
+        color: $dark-mode-light-text-color;
+
+        @media (prefers-color-scheme: dark) {
+          background-color: rgba(0, 0, 0, 0.4);
+        }
       }
       &::before {
         position: absolute;
@@ -204,7 +246,7 @@
     h3 {
       font-size: 1.3em;
     }
-    h4{
+    h4 {
       font-size: 1.2em;
     }
     h5 {
diff --git a/source/style/footer.scss b/source/style/footer.scss
index bd59ded..ab1aa09 100644
--- a/source/style/footer.scss
+++ b/source/style/footer.scss
@@ -14,12 +14,19 @@
   transition: all 0.4s ease;
   z-index: 3;
 
+  @media (prefers-color-scheme: dark) {
+    color: darken($dark-mode-text-color, 20%);
+  }
   &.loaded {
     transform: translate3d(0px, 0px, 0px);
     opacity: 1;
   }
   .codename {
-    color: $material-orange;
+    color: darken($brand-color, 10%);
+
+    @media (prefers-color-scheme: dark) {
+      color: darken($dark-mode-brand-color, 5%);
+    }
   }
   .social-wrapper {
     padding-top: 20px;
@@ -30,9 +37,17 @@
   a {
     color: $grey-color;
 
+    @media (prefers-color-scheme: dark) {
+      color: $dark-mode-text-color;
+    }
     &:hover {
-      background: fade($accent-color, 10%);
-      color: darken($accent-color, 3%);
+      color: darken($brand-color, 3%);
+      background-color: rgba($brand-color, 0.1);
+
+      @media (prefers-color-scheme: dark) {
+        color: darken($dark-mode-brand-color, 3%);
+        background-color: rgba($dark-mode-brand-color, 0.1);
+      }
     }
     &.social {
       position: relative;
@@ -99,16 +114,20 @@
     font-family: $base-font-family;
     border: none;
     border-radius: 0 !important;
-    background: $black;
-    color: white;
+    background: $text-color;
+    color: $white;
     box-sizing: border-box;
     -webkit-appearance: none;
     box-shadow: none;
     transition: all 0.24s ease;
 
+    @media (prefers-color-scheme: dark) {
+      color: $dark-mode-text-color;
+      background: $dark-mode-light-background;
+    }
     &:focus {
-      background: black;
-      border-color: black;
+      background: $dark-mode-dark-background;
+      border-color: $black;
     }
   }
 }
diff --git a/source/style/header.scss b/source/style/header.scss
index 90d1599..f776d8f 100644
--- a/source/style/header.scss
+++ b/source/style/header.scss
@@ -3,21 +3,31 @@
 #header {
   position: relative;
   width: 100%;
-  color: $black;
+  color: $text-color;
   margin-bottom: 30px;
-  border-top: 2px solid black;
+  border-top: 2px solid $black;
   transition: all 0.24s ease;
   z-index: 3;
 
+  @media (prefers-color-scheme: dark) {
+    border-top-color: darken($dark-mode-background, 3%);
+  }
+
   #header-wrapper {
     position: relative;
     width: 100%;
     height: 70px;
-    background: white;
+    background: $white;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
-    border-bottom: 1px solid lighten(#DEDFE1,1%);
+    border-bottom: 1px solid lighten(#DEDFE1, 1%);
     padding: 0 20px;
     z-index: 3;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: $dark-mode-light-background;
+      border-bottom: 0;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
   }
 
   #logo {
@@ -28,9 +38,19 @@
     margin-left: -80px;
     width: 160px;
     height: 82px;
-    background: #000;
+    background-color: $black;
     padding: 10px 0 12px 0;
-    transition: all 0.24s;
+    transition: all 0.36s;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: darken($dark-mode-light-background, 3%);
+    }
+
+    &:hover {
+      @media (prefers-color-scheme: dark) {
+        background-color: darken($dark-mode-light-background, 6%);
+      }
+    }
 
     @media (max-width: $on-phone)  {
       width: 140px;
@@ -73,6 +93,10 @@
     cursor: pointer;
     transition: all 0.24s ease;
 
+    @media (prefers-color-scheme: dark) {
+      color: $dark-mode-text-color;
+    }
+
     &.active {
       transform: rotate(90deg);
     }
diff --git a/source/style/loading.scss b/source/style/loading.scss
index 10c6c7e..adf688f 100644
--- a/source/style/loading.scss
+++ b/source/style/loading.scss
@@ -12,6 +12,10 @@
   position: relative;
   width: 0;
   height: 2px;
-  background-color: fade(lighten($accent-color, 2%), 100%);
+  background-color: rgba(lighten($brand-color, 2%), 100%);
   transition: all 0.5s ease;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: rgba(lighten($dark-mode-brand-color, 2%), 100%);
+  }
 }
\ No newline at end of file
diff --git a/source/style/pagination.scss b/source/style/pagination.scss
index 4eced4f..09084df 100644
--- a/source/style/pagination.scss
+++ b/source/style/pagination.scss
@@ -14,12 +14,20 @@
   .prev {
     font-size: 13px;
     font-weight: normal;
-    color: lighten($black, 40%);
+    color: lighten($text-color, 40%);
     border-radius: 2px;
 
+    @media (prefers-color-scheme: dark) {
+      color: darken($dark-mode-text-color, 30%);
+    }
     &:hover {
-      color: white;
-      background: $black;
+      color: $white;
+      background-color: $text-color;
+
+      @media (prefers-color-scheme: dark) {
+        color: $dark-mode-text-color;
+        background-color: $dark-mode-dark-background;
+      }
     }
     span {
       line-height: 20px;
diff --git a/source/style/main.scss b/source/style/post.scss
similarity index 56%
rename from source/style/main.scss
rename to source/style/post.scss
index fd0948b..2ff6ad4 100644
--- a/source/style/main.scss
+++ b/source/style/post.scss
@@ -37,6 +37,10 @@
       font-size: 13px;
       font-weight: normal;
       color: lighten($grey-color, 20%);
+
+      @media (prefers-color-scheme: dark) {
+        color: darken($dark-mode-text-color, 30%);
+      }
     }
   }
 
@@ -44,9 +48,13 @@
     position: relative;
     padding: 30px;
     margin: 30px 0;
-    background: white;
+    background-color: $white;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
 
+    @media (prefers-color-scheme: dark) {
+      background-color: $dark-mode-light-background;
+    }
+
     @media (max-width: $on-phone) {
       padding: 20px;
     }
@@ -58,16 +66,21 @@
     position: relative;
     margin-bottom: 30px;
     padding: 40px 0;
-    background: white;
+    background-color: $white;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
 
+    @media (prefers-color-scheme: dark) {
+      background-color: $dark-mode-light-background;
+    }
+
     &.no-title {
       padding: 20px 0;
 
-      >time {
+      > time {
         text-align: left;
         padding-left: 30px;
         margin: 0;
+
         @media (max-width: $on-phone) {
           padding-left: 20px;
         }
@@ -78,82 +91,7 @@
     &#archive-page {
       margin-bottom: 0;
     }
-    &.author-profile {
-      position: relative;
-      padding: 30px 20px;
-      height: auto;
-      text-align: center;
-      margin-bottom: 30px;
-      transition: all 0.24s ease;
-
-      @media (max-width: $on-phone) {
-        padding: 20px;
-      }
-      .author-title,
-      .author-bio {
-        position: relative;
-        font-size: 16px;
-        z-index: 1;
-
-        span,
-        a {
-          display: inline-block;
-          background: rgba(0, 0, 0, 0.5);
-          color: white;
-          padding: 5px 15px 7px 15px;
-          border-radius: 5px;
-          font-weight: bolder;
-          letter-spacing: 1px;
-        }
-        a:hover {
-          color: $accent-color;
-          background: rgba(0, 0, 0, 0.75);
-        }
-      }
-      .author-title {
-
-        a {
-          font-size: 1.25em;
-
-          @media (max-width: $on-phone) {
-            font-size: 1.25em;
-            padding: 7px 20px;
-          }
-        }
-      }
-      .author-avatar {
-        position: relative;
-        margin: 0 auto 20px auto;
-        width: 80px;
-        height: 80px;
-        border-radius: 50%;
-        overflow: hidden;
-        z-index: 1;
-
-        img {
-          display: block;
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .author-cover {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: $black;
-        z-index: 0;
-
-        .img {
-          display: block;
-          width: 100%;
-          height: 100%;
-          background-size: cover;
-        }
-      }
-    }
-    >.title {
+    > .title {
       display: block;
       text-align: center;
       font-size: 1.25em;
@@ -166,19 +104,31 @@
         display: inline;
         line-height: 1.25;
         font-weight: normal;
-        color: lighten($black, 2%);
+        color: lighten($text-color, 2%);
+
+        @media (prefers-color-scheme: dark) {
+          color: lighten($dark-mode-text-color, 5%);
+        }
 
         &:hover {
-          color: lighten($material-green, 3%);
+          color: lighten($accent-color, 3%);
+
+          @media (prefers-color-scheme: dark) {
+            color: lighten($dark-mode-accent-color, 5%);
+          }
         }
       }
     }
-    >time {
+    > time {
       display: block;
       text-align: center;
       color: lighten($grey-color, 20%);
       font-size: 0.75em;
       margin-bottom: 30px;
+
+      @media (prefers-color-scheme: dark) {
+        color: darken($dark-mode-text-color, 30%);
+      }
     }
     .image {
       position: relative;
diff --git a/source/style/search.scss b/source/style/search.scss
index bbfdcde..5bc75be 100644
--- a/source/style/search.scss
+++ b/source/style/search.scss
@@ -16,11 +16,11 @@ $material-blue-grey: #607d8b;
 $material-grey: #9e9e9e;
 $material-yellow: #FFEB3B;
 
-$black: #414141;
+$black: #000000;
 $white: #ffffff;
 $brand-color: $material-blue;
 $accent-color: $material-orange;
-$text-color: $black;
+$text-color: #414141;
 $grey-color: #828282;
 
 *, *:before, *:after {
@@ -226,7 +226,7 @@ body {
       height: 50px;
       padding: 0 15px;
       background: #fff;
-      border-top: 1px solid lighten($black, 60%);
+      border-top: 1px solid lighten($text-color, 60%);
 
       &__metadata {
         position: relative;
@@ -250,7 +250,7 @@ body {
       z-index: 1;
 
       &:hover {
-        color: $black;
+        color: $text-color;
       }
       &__next {
         margin-left: 10px;
@@ -304,7 +304,7 @@ body {
 
         &__excerpt,
         .icon {
-          color: $black;
+          color: $text-color;
         }
       }
       &__title {
diff --git a/source/style/sidebar.scss b/source/style/sidebar.scss
index c168c95..bf80fd0 100644
--- a/source/style/sidebar.scss
+++ b/source/style/sidebar.scss
@@ -7,8 +7,7 @@
   width: 280px;
   height: 100%;
   padding: 20px;
-  background: url("/img/sidebar-bg.png") repeat;
-  background-size: 102px 102px;
+  background-color: lighten($dark-mode-light-background, 5%);
   text-align: center;
   overflow: hidden;
   transform: translate3d(280px, 0, 0);
@@ -61,8 +60,12 @@
       font-size: 12px;
 
       &.active {
-        color: lighten(#8f8f8f, 40%);
+        color: darken($text-color, 10%);
         background-color: $brand-color;
+
+        @media (prefers-color-scheme: dark) {
+          background-color: $dark-mode-brand-color;
+        }
       }
       .icon {
         line-height: 30px;
@@ -121,20 +124,18 @@
   }
   .about-me {
     padding: 12px 5px 15px 5px;
-    background: rgba(0,0,0,0.1);
-    border: 1px solid lighten(black, 15%);
-    transition: background 0.24s, border-color 0.24s;
+    background-color: rgba(0, 0, 0, 0.1);
+    transition: background-color 0.24s, border-color 0.24s;
 
     &:hover {
-      background: rgba(0,0,0,0.2);
-      border-color: lighten(black, 10%);
+      background-color: rgba(0, 0, 0, 0.2);
     }
     .avatar {
       display: block;
       width: 96px;
       height: 96px;
       margin: 4px auto;
-      background: rgba(0,0,0,0.3);
+      background-color: rgba(0,0,0,0.3);
       border-radius: 50%;
       border: 1px solid black;
       padding: 3px;
@@ -153,26 +154,33 @@
 
       &:hover {
         background-color: $brand-color;
+
+        @media (prefers-color-scheme: dark) {
+          background-color: $dark-mode-brand-color;
+        }
       }
       .icon {
         margin-right: 0;
       }
     }
     .info {
-      color: lighten(#8f8f8f, 10%);
+      color: lighten($text-color, 40%);
       margin-top: 10px;
       line-height: 140%;
       padding: 0 15px;
       font-size: 12px;
+
+      @media (prefers-color-scheme: dark) {
+        color: darken($dark-mode-text-color, 25%);
+      }
     }
   }
 }
 
 .site-toc {
   position: relative;
-  padding: 12px 10px 15px 10px;
-  background: rgba(0,0,0,0.1);
-  border: 1px solid lighten(black, 15%);
+  padding: 10px 12px;
+  background: rgba(0, 0, 0, 0.1);
   max-height: 450px;
   overflow: auto;
   opacity: 0;
@@ -190,11 +198,15 @@
     li {
 
       a {
-        color: darken(white, 10%);
-        font-size: 15px;
+        color: lighten($text-color, 100%);
+        font-size: 14px;
 
         &:hover {
           color: $brand-color;
+
+          @media (prefers-color-scheme: dark) {
+            color: $dark-mode-brand-color;
+          }
         }
       }
       ol {
diff --git a/source/style/variables.scss b/source/style/variables.scss
index ef7cc48..b3fc6e0 100644
--- a/source/style/variables.scss
+++ b/source/style/variables.scss
@@ -43,14 +43,24 @@ $behance-color: #1769FF;
 $tixora-color: #33475A;
 
 // Colors
-$black: #414141;
+$black: #000000;
 $white: #ffffff;
-$text-color: $black;
+$text-color: #414141;
 $background-color: #EBECEE;
-$brand-color: $material-teal;
-$accent-color: $material-orange;
+$brand-color: $material-orange;
+$accent-color: $material-teal;
 $grey-color: #828282;
 
+// Dark mode
+$dark-mode-brand-color: $material-teal;
+$dark-mode-accent-color: $material-orange;
+$dark-mode-background: darken(#15202b, 5%);
+$dark-mode-light-background: lighten($dark-mode-background, 5%);
+$dark-mode-dark-background: darken($dark-mode-background, 5%);
+$dark-mode-text-color: lighten($dark-mode-background, 60%);
+$dark-mode-light-text-color: lighten($dark-mode-background, 80%);
+$dark-mode-dark-text-color: lighten($dark-mode-background, 40%);
+
 // Responsive limits
 $modal-threshold: 680px;
 $on-phone: 820px;