diff --git a/src/sass/common/_colors.scss b/src/sass/common/_colors.scss
index 0dd5113..39eea83 100644
--- a/src/sass/common/_colors.scss
+++ b/src/sass/common/_colors.scss
@@ -9,6 +9,7 @@
   --primary-border-color: #9b9b9b;
   --secondary-border-color: aliceblue;
   --article-shadow: 0 4px 60px 0 rgba(0,0,0,.2);
+  --transparent-background-color: rgba(255,255,255,0.99);
   --foter-background-color: #293951;
 }
 
@@ -17,13 +18,14 @@
     --background-color: #111;
     --primary-foreground-color: #ccc;
     --secondary-foreground-color: #fff;
-    --primary-subtle-color: #04aeee;
+    --primary-subtle-color: #2c2fe6;
     --secondary-subtle-color: #141920;
     --titles-color: #b4b4b4;
-    --link-color: #2c5de6;
-    --primary-border-color: #9b9b9b;
+    --link-color: #2c2fe6;
+    --primary-border-color: #1d1d1d;
     --secondary-border-color: #0f0f0f;
     --article-shadow: 0 4px 0px 10px rgba(0,0,0,.2);
+    --transparent-background-color: rgba(0,0,0,0.99);
     --foter-background-color: #080808;
   }
 }
diff --git a/src/sass/common/_global.scss b/src/sass/common/_global.scss
index 998102f..64657e9 100644
--- a/src/sass/common/_global.scss
+++ b/src/sass/common/_global.scss
@@ -50,23 +50,27 @@ fieldset {
   text-align: left !important;
 }
 
+.medium-zoom-overlay {
+  background-color: var(--background-color) !important;
+}
+
 .medium-zoom-overlay,
 .medium-zoom-image {
   z-index: 5;
 }
 
 ::-webkit-input-placeholder {
-  color: var(--primary-border-color);
+  color: $gray;
 }
 
 ::-moz-placeholder {
-  color: var(--primary-border-color);
+  color: $gray;
 }
 
 :-ms-input-placeholder {
-  color: var(--primary-border-color);
+  color: $gray;
 }
 
 :-moz-placeholder {
-  color: var(--primary-border-color);
+  color: $gray;
 }
diff --git a/src/sass/components/articles/_featured-article.scss b/src/sass/components/articles/_featured-article.scss
index 82db997..4183747 100644
--- a/src/sass/components/articles/_featured-article.scss
+++ b/src/sass/components/articles/_featured-article.scss
@@ -1,7 +1,7 @@
 .m-featured-article {
   position: relative;
   height: 100%;
-  background-color: $main-color;
+  background-color: var(--primary-subtle-color);
   z-index: 1;
 
   &:hover {
@@ -12,7 +12,7 @@
 
   &.no-picture {
     .m-featured-article__picture {
-      background-color: $dark-blue;
+      background-color: var(--link-color);
     }
   }
 }
diff --git a/src/sass/components/articles/_share.scss b/src/sass/components/articles/_share.scss
index a4daae1..11eb6cc 100644
--- a/src/sass/components/articles/_share.scss
+++ b/src/sass/components/articles/_share.scss
@@ -5,7 +5,7 @@
   width: 100%;
   height: 45px;
   z-index: 3;
-  background-color: rgba(255,255,255,0.98);
+  background-color: var(--transparent-background-color);
   @include bs(0 -4px 10px rgba(0,0,0,0.1));
 
   @include respond-to('medium') {
diff --git a/src/sass/components/author/_author.scss b/src/sass/components/author/_author.scss
index b9220d6..203abd6 100644
--- a/src/sass/components/author/_author.scss
+++ b/src/sass/components/author/_author.scss
@@ -1,8 +1,8 @@
 .m-author {
   padding: 40px $mobile-space;
   border-color: var(--secondary-subtle-color);
-  border-top-width: 2px;
-  border-bottom-width: 2px;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
   border-left-width: 0;
   border-right-width: 0;
   border-style: solid;
@@ -67,7 +67,7 @@
 }
 
 .m-author__name {
-  color: $dark-blue;
+  color: var(--link-color);
   letter-spacing: 0.2px;
   line-height: 1.3;
   font-size: 1.125rem;
diff --git a/src/sass/components/header/_menu.scss b/src/sass/components/header/_menu.scss
index 17b433a..e287e99 100644
--- a/src/sass/components/header/_menu.scss
+++ b/src/sass/components/header/_menu.scss
@@ -8,7 +8,7 @@
   opacity: 0;
   overflow-y: auto;
   z-index: 2;
-  background-color: rgba(255,255,255,0.99);
+  background-color: var(--transparent-background-color);
   -webkit-overflow-scrolling: touch;
   @include transform(scale(1.2));
   @include transition(all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
diff --git a/src/sass/components/heading/_meta.scss b/src/sass/components/heading/_meta.scss
index 2458953..9a0b85f 100644
--- a/src/sass/components/heading/_meta.scss
+++ b/src/sass/components/heading/_meta.scss
@@ -13,7 +13,7 @@
 
 .m-heading__meta__tag,
 .m-heading__meta__time {
-  color: $dark-blue !important;
+  color: var(--link-color) !important;
 }
 
 .m-heading__meta__tag {
@@ -22,6 +22,6 @@
 
 .m-heading__meta__divider {
   display: inline-block;
-  color: $gray;
+  color: var(--primary-border-color);
   margin: 0 10px;
 }
diff --git a/src/sass/components/heading/_title.scss b/src/sass/components/heading/_title.scss
index 865b6c6..da0e690 100644
--- a/src/sass/components/heading/_title.scss
+++ b/src/sass/components/heading/_title.scss
@@ -1,5 +1,5 @@
 .m-heading__title {
-  color: $titles;
+  color: var(--titles-color);
   letter-spacing: 0.4px;
   line-height: 1.3;
   font-size: 1.750rem;
diff --git a/src/sass/components/hero/_title.scss b/src/sass/components/hero/_title.scss
index e6f13c3..e371b36 100644
--- a/src/sass/components/hero/_title.scss
+++ b/src/sass/components/hero/_title.scss
@@ -1,5 +1,5 @@
 .m-hero-title {
-  color: $titles;
+  color: var(--titles-color);
   letter-spacing: 0.4px;
   line-height: 1.3;
   font-size: 1.750rem;
diff --git a/src/sass/components/search/_result.scss b/src/sass/components/search/_result.scss
index 8a00c6e..3e7c39c 100644
--- a/src/sass/components/search/_result.scss
+++ b/src/sass/components/search/_result.scss
@@ -1,5 +1,5 @@
 .m-result {
-  border-bottom: 1px solid lighten($gray, 30%);
+  border-bottom: 1px solid var(--primary-border-color);
 
   &.last {
     border-bottom: 0;
@@ -37,7 +37,7 @@
 }
 
 .m-result__date {
-  color: $titles;
+  color: var(--titles-color);
   letter-spacing: 0.2px;
   font-size: 0.813rem;
 
diff --git a/src/sass/components/search/_search.scss b/src/sass/components/search/_search.scss
index 9444781..a4c63c6 100644
--- a/src/sass/components/search/_search.scss
+++ b/src/sass/components/search/_search.scss
@@ -8,7 +8,7 @@
   opacity: 0;
   overflow-y: auto;
   z-index: 2;
-  background-color: rgba(255,255,255,0.99);
+  background-color: var(--transparent-background-color);
   -webkit-overflow-scrolling: touch;
   @include transform(scale(1.2));
   @include transition(all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
diff --git a/src/sass/components/subscribe/_subscribe-section.scss b/src/sass/components/subscribe/_subscribe-section.scss
index 36755c0..100c9be 100644
--- a/src/sass/components/subscribe/_subscribe-section.scss
+++ b/src/sass/components/subscribe/_subscribe-section.scss
@@ -38,7 +38,7 @@
 }
 
 .m-subscribe-section__title {
-  color: $titles;
+  color: var(--titles-color);
   letter-spacing: 0.3px;
   line-height: 1.3;
   font-size: 1.250rem;
diff --git a/src/sass/components/ui/_back.scss b/src/sass/components/ui/_back.scss
index 5990911..ce489f4 100644
--- a/src/sass/components/ui/_back.scss
+++ b/src/sass/components/ui/_back.scss
@@ -4,7 +4,7 @@
   position: absolute;
   top: $mobile-space;
   left: $mobile-space;
-  color: $titles;
+  color: var(--titles-color);
   letter-spacing: 0.2px;
   font-size: 0.875rem;
   font-weight: 600;
diff --git a/src/sass/components/ui/_button.scss b/src/sass/components/ui/_button.scss
index 3d607fc..dd6c3ed 100644
--- a/src/sass/components/ui/_button.scss
+++ b/src/sass/components/ui/_button.scss
@@ -41,6 +41,6 @@
 
   &.primary {
     color: $white;
-    background-color: $main-color;
+    background-color: var(--primary-subtle-color);
   }
 }
diff --git a/src/sass/components/ui/_icon-button.scss b/src/sass/components/ui/_icon-button.scss
index 46d4836..2314e62 100644
--- a/src/sass/components/ui/_icon-button.scss
+++ b/src/sass/components/ui/_icon-button.scss
@@ -52,7 +52,6 @@
     height: 32px;
     font-size: 0.625rem;
     z-index: 2;
-    background-color: var(--background-color);
 
     @include respond-to('medium') {
       top: 30px;
@@ -86,7 +85,7 @@
     position: relative;
 
     &.active {
-      color: $main-color;
+      color: var(--primary-subtle-color);
     }
   }
 
@@ -113,7 +112,7 @@
 
   &.in-featured-articles {
     position: absolute;
-    color: var(--background-color);
+    color: $white;
     font-size: 0.875rem;
     width: 29px;
     height: 22px;
diff --git a/src/sass/components/ui/_input.scss b/src/sass/components/ui/_input.scss
index 6c35738..ad83615 100644
--- a/src/sass/components/ui/_input.scss
+++ b/src/sass/components/ui/_input.scss
@@ -1,13 +1,14 @@
 .m-input {
+  color: var(--primary-foreground-color);
   letter-spacing: 0.2px;
   line-height: 1.3;
   font-size: 1rem;
   width: 100%;
   border-radius: 5px;
   padding: 11px 15px;
-  border: 1px solid $gray;
+  border: 1px solid var(--primary-border-color);
   outline: 0;
-  background-color: $white;
+  background-color: var(--background-color);
   @extend .no-appearance;
 
   &.in-search {
diff --git a/src/sass/components/ui/_pagination.scss b/src/sass/components/ui/_pagination.scss
index a18a266..06e5c83 100644
--- a/src/sass/components/ui/_pagination.scss
+++ b/src/sass/components/ui/_pagination.scss
@@ -7,7 +7,7 @@
 
 .m-pagination__text {
   display: inline-block;
-  color: $titles;
+  color: var(--titles-color);
   letter-spacing: 0.2px;
   text-align: center;
   font-size: 0.875rem;
diff --git a/src/sass/layouts/_post-content.scss b/src/sass/layouts/_post-content.scss
index 2f2f1ac..036f419 100644
--- a/src/sass/layouts/_post-content.scss
+++ b/src/sass/layouts/_post-content.scss
@@ -16,7 +16,7 @@
   h4,
   h5,
   h6 {
-    color: $titles;
+    color: var(--titles-color);
     line-height: 1.3;
     font-weight: 700;
     padding-top: 5px;
@@ -99,7 +99,7 @@
   }
 
   a {
-    color: $black;
+    color: var(--primary-foreground-color);
     text-decoration: underline;
   }
 
@@ -254,7 +254,7 @@
     position: relative;
     margin: 30px 0;
     border: 0;
-    border-top: 1px solid darken($light-blue, 5%);
+    border-top: 1px solid var(--secondary-subtle-color);
 
     @include respond-to('medium') {
       margin: 50px 0;
@@ -268,14 +268,14 @@
       width: 10px;
       height: 10px;
       border-radius: 50%;
-      background-color: darken($light-blue, 5%);
-      @include bs(0 0 0 10px $white);
+      background-color: var(--secondary-subtle-color);
+      @include bs(0 0 0 10px var(--background-color));
       @include transform(translate(-50%,-50%));
 
       @include respond-to('medium') {
         width: 12px;
         height: 12px;
-        @include bs(0 0 0 20px $white);
+        @include bs(0 0 0 20px var(--background-color));
       }
     }
   }
@@ -303,7 +303,7 @@
       position: absolute;
       top: 0;
       left: 0;
-      color: darken($light-blue, 10%);
+      color: var(--primary-foreground-color);
       line-height: 1;
       font-size: 2.625rem;
 
@@ -318,7 +318,7 @@
   }
 
   table {
-    color: $titles;
+    color: var(--titles-color);
     font-size: 0.875rem;
     width: calc(100% + 40px);
     margin: 0 -#{$mobile-space} 25px;
@@ -355,11 +355,11 @@
 
   code {
     display: inline-block;
-    color: $dark-blue;
+    color: var(--link-color);
     font-size: 0.9rem;
     padding: 0 5px;
     border-radius: 5px;
-    background-color: lighten($gray, 35%);
+    background-color: var(--secondary-subtle-color);
   }
 
   pre {
@@ -419,7 +419,7 @@
     width: 100%;
     padding: 0 !important;
     margin: 30px auto !important;
-    background: $white;
+    background: var(--background-color);
 
     @include respond-to('medium') {
       margin: 40px auto !important;