diff --git a/README.md b/README.md
index 3a64ab8..0b25f55 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Liebling
 
-Liebling is a beautiful and clean Ghost theme that is easy and comfortable to use. **It's free** and you can use it for any kind of content you might have.
+Liebling is a beautiful and clean Ghost theme that is easy and comfortable to use. **It's free** and you can use it for any kind of content you might have. Now with dark mode 🌓!
 
 If you use it and you like it, please consider to make a donation to support its development! 🙏🏼
 
@@ -48,6 +48,7 @@ To get the latest version please head over the [releases page](https://github.co
 
 ### Liebling unique features
 
+* Dark mode
 * Search
 * Custom Subscribe page
 * Custom authors page
diff --git a/package.json b/package.json
index f5b4d04..82c65f8 100644
--- a/package.json
+++ b/package.json
@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.4.4"
+  "version": "0.5.0"
 }
diff --git a/page-authors.hbs b/page-authors.hbs
index 0f70eb6..5118849 100644
--- a/page-authors.hbs
+++ b/page-authors.hbs
@@ -38,7 +38,9 @@ into the {body} of the default.hbs template --}}
                 </div>
                 <div class="m-article-card__info">
                   <a href="{{url}}" class="m-article-card__info-link">
+                    {{#if bio}}
                     <p class="m-article-card__excerpt">{{bio}}</p>
+                    {{/if}}
                   </a>
                   <div class="m-article-card__author-stats">
                     <span>
diff --git a/post.hbs b/post.hbs
index 43ffb4b..28ed604 100644
--- a/post.hbs
+++ b/post.hbs
@@ -49,7 +49,7 @@ into the {body} of the default.hbs template --}}
                   <button class="m-icon-button filled in-share progress js-scrolltop" aria-label="Scroll to top">
                     <span class="icon-arrow-top"></span>
                     <svg>
-                      <circle class="progress-ring__circle js-progress" stroke="#04aeee" fill="transparent" r="0" />
+                      <circle class="progress-ring__circle js-progress" fill="transparent" r="0" />
                     </svg>
                   </button>
                 </div>
diff --git a/src/js/app.js b/src/js/app.js
index 05443cb..0c971a4 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,9 +1,12 @@
+import cssVars from 'css-vars-ponyfill'
 import $ from 'jquery'
 import slick from 'slick-carousel'
 import tippy from 'tippy.js'
 import AOS from 'aos'
 import Fuse from 'fuse.js'
 
+cssVars({})
+
 $(document).ready(() => {
   const isRTL = $('html').attr('lang') === 'ar' || $('html').attr('lang') === 'he'
 
diff --git a/src/package-lock.json b/src/package-lock.json
index fcb4f5f..70c0d91 100644
--- a/src/package-lock.json
+++ b/src/package-lock.json
@@ -3454,6 +3454,11 @@
       "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=",
       "dev": true
     },
+    "css-vars-ponyfill": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/css-vars-ponyfill/-/css-vars-ponyfill-2.1.2.tgz",
+      "integrity": "sha512-Jfff/j2AGwr+WJaIbxVroTa9sFXy9b0xe5zjWEVQ9aoeCpd0e6iOo4D+d3OoLDTWcHCf2UBTswis/hN6fKEKiA=="
+    },
     "css-what": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
diff --git a/src/package.json b/src/package.json
index ce21faf..7f21271 100644
--- a/src/package.json
+++ b/src/package.json
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "aos": "^2.3.4",
+    "css-vars-ponyfill": "^2.1.2",
     "fitvids": "^2.0.0",
     "fuse.js": "^3.4.2",
     "jquery": "^3.3.1",
diff --git a/src/sass/app.scss b/src/sass/app.scss
index 1b76ded..2b87de7 100644
--- a/src/sass/app.scss
+++ b/src/sass/app.scss
@@ -3,6 +3,7 @@
 @import "common/reset";
 @import "common/mixins";
 @import "common/variables";
+@import "common/themes";
 @import "common/helpers";
 @import "common/global";
 @import "common/icons";
diff --git a/src/sass/common/_global.scss b/src/sass/common/_global.scss
index f2c3e1d..64657e9 100644
--- a/src/sass/common/_global.scss
+++ b/src/sass/common/_global.scss
@@ -5,12 +5,12 @@ body {
   flex-direction: column;
   width: 100%;
   min-height: 100vh;
-  color: $body;
+  color: var(--primary-foreground-color);
   font-size: 1rem;
   font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
   font-display: swap;
   overflow-x: hidden;
-  background-color: white;
+  background-color: var(--background-color);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
@@ -50,6 +50,10 @@ fieldset {
   text-align: left !important;
 }
 
+.medium-zoom-overlay {
+  background-color: var(--background-color) !important;
+}
+
 .medium-zoom-overlay,
 .medium-zoom-image {
   z-index: 5;
diff --git a/src/sass/common/_helpers.scss b/src/sass/common/_helpers.scss
index 9d1b612..3c10caa 100644
--- a/src/sass/common/_helpers.scss
+++ b/src/sass/common/_helpers.scss
@@ -1,8 +1,4 @@
-@charset "UTF-8";
-
-/**
- *  Helpers
- */
+/** Helpers */
 
 .hide {
   display: none;
diff --git a/src/sass/common/_themes.scss b/src/sass/common/_themes.scss
new file mode 100644
index 0000000..f6d599d
--- /dev/null
+++ b/src/sass/common/_themes.scss
@@ -0,0 +1,39 @@
+:root {
+  --background-color: #fff;
+  --primary-foreground-color: #4a4a4a;
+  --secondary-foreground-color: #000;
+  --primary-subtle-color: #04aeee;
+  --secondary-subtle-color: #f4f8fd;
+  --titles-color: #333;
+  --link-color: #293951;
+  --primary-border-color: #9b9b9b;
+  --secondary-border-color: aliceblue;
+  --article-shadow-normal: 0 10px 10px rgba(0,0,0,0.08);
+  --article-shadow-hover: 0 4px 60px 0 rgba(0,0,0,0.2);
+  --transparent-background-color: rgba(255,255,255,0.99);
+  --foter-background-color: #293951;
+  --submenu-shadow-color-opacity: 0.25;
+  --button-shadow-color-normal: rgba(108, 108, 108, 0.2);
+  --button-shadow-color-hover: rgba(108, 108, 108, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #111;
+    --primary-foreground-color: #ccc;
+    --secondary-foreground-color: #fff;
+    --primary-subtle-color: #2c2fe6;
+    --secondary-subtle-color: #141920;
+    --titles-color: #b4b4b4;
+    --link-color: #2c2fe6;
+    --primary-border-color: #1d1d1d;
+    --secondary-border-color: #0f0f0f;
+    --article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);
+    --article-shadow-hover: 0 4px 5px 10px rgba(0,0,0,0.1);
+    --transparent-background-color: rgba(0,0,0,0.99);
+    --foter-background-color: #080808;
+    --submenu-shadow-color-opacity: 0.55;
+    --button-shadow-color-normal: rgba(10, 10, 10, 0.5);
+    --button-shadow-color-hover: rgba(10, 10, 10, 0.5);
+  }
+}
diff --git a/src/sass/common/_variables.scss b/src/sass/common/_variables.scss
index 54d3e6f..821f273 100644
--- a/src/sass/common/_variables.scss
+++ b/src/sass/common/_variables.scss
@@ -1,14 +1,12 @@
 /** Colors */
+
 $white: #fff;
 $black: #000;
-$main-color: #04aeee;
 $titles: #333;
-$body: #4a4a4a;
-$light-blue: #f4f8fd;
-$dark-blue: #293951;
 $gray: #9b9b9b;
 
-/** Box Model  */
+/** Config  */
+
 $mobile-space: 20px;
 $mobile-bar-height: 50px;
 $desktop-bar-height: 64px;
diff --git a/src/sass/components/404/_subtitle.scss b/src/sass/components/404/_subtitle.scss
index df351de..2f6820b 100644
--- a/src/sass/components/404/_subtitle.scss
+++ b/src/sass/components/404/_subtitle.scss
@@ -1,5 +1,5 @@
 .m-404-subtitle {
-  color: $body;
+  color: var(--primary-foreground-color);
   letter-spacing: 0.4px;
   line-height: 1;
   font-size: 1.250rem;
diff --git a/src/sass/components/404/_title.scss b/src/sass/components/404/_title.scss
index 3c0805d..f1e63ae 100644
--- a/src/sass/components/404/_title.scss
+++ b/src/sass/components/404/_title.scss
@@ -1,5 +1,5 @@
 .m-404-title {
-  color: $body;
+  color: var(--primary-foreground-color);
   letter-spacing: 3px;
   line-height: 1;
   font-size: 9.000rem;
diff --git a/src/sass/components/_footer.scss b/src/sass/components/_footer.scss
index 3142156..f471fff 100644
--- a/src/sass/components/_footer.scss
+++ b/src/sass/components/_footer.scss
@@ -1,6 +1,6 @@
 .m-footer {
   flex-shrink: 0;
-  background-color: $dark-blue;
+  background-color: var(--foter-background-color);
 }
 
 .m-footer__content {
diff --git a/src/sass/components/articles/_article-card.scss b/src/sass/components/articles/_article-card.scss
index b551453..5259989 100644
--- a/src/sass/components/articles/_article-card.scss
+++ b/src/sass/components/articles/_article-card.scss
@@ -4,9 +4,9 @@
   position: relative;
   margin-bottom: 20px;
   height: 400px;
-  background-color: $white;
+  background-color: var(--background-color);
   border-radius: 10px;
-  border: 1px solid aliceblue;
+  border: 1px solid var(--secondary-border-color);
   z-index: 1;
   @include transition(all .25s cubic-bezier(.02,.01,.47,1));
 
@@ -14,7 +14,7 @@
     @include transform(translateY(-5px));
 
     &:before {
-      @include bs(0 4px 60px 0 rgba(0,0,0,.2));
+      @include bs(var(--article-shadow-hover));
     }
 
     .m-article-card__author {
@@ -43,7 +43,7 @@
     }
 
     .m-article-card__info {
-      background-color: $light-blue;
+      background-color: var(--secondary-subtle-color);
     }
 
     .m-article-card__title {
@@ -85,7 +85,7 @@
     bottom: 0;
     left: 10px;
     border-radius: 10px;
-    @include bs(0 10px 10px rgba(0,0,0,0.08));
+    @include bs(var(--article-shadow-normal));
     @include transition(all .25s cubic-bezier(.02,.01,.47,1));
   }
 }
@@ -94,7 +94,7 @@
   position: relative;
   height: 200px;
   border-radius: 10px 10px 0 0;
-  background-color: $light-blue;
+  background-color: var(--secondary-subtle-color);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -191,7 +191,7 @@
   height: 200px;
   overflow: hidden;
   border-radius: 0 0 10px 10px;
-  background-color: $white;
+  background-color: var(--background-color);
 
   @include respond-to('medium') {
     padding-top: 53px;
@@ -214,7 +214,7 @@
   position: absolute;
   top: $mobile-space;
   left: $mobile-space;
-  color: $dark-blue;
+  color: var(--link-color);
   letter-spacing: 0.2px;
   font-size: 0.875rem;
   font-weight: 600;
@@ -240,7 +240,7 @@
 }
 
 .m-article-card__title {
-  color: $titles;
+  color: var(--titles-color);
   letter-spacing: 0.4px;
   line-height: 1.3;
   font-size: 1.250rem;
@@ -257,26 +257,17 @@
   position: relative;
   overflow: hidden;
   height: 100%;
-  color: $titles;
+  color: var(--titles-color);
   letter-spacing: 0.3px;
   line-height: 1.5;
   font-size: 1rem;
-  &:after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 20px;
-    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
-  }
 }
 
 .m-article-card__timestamp,
 .m-article-card__author-stats {
   display: flex;
   align-items: center;
-  color: $titles;
+  color: var(--titles-color);
   letter-spacing: 0.2px;
   font-size: 0.875rem;
 
@@ -308,7 +299,7 @@
     margin-left: 22px;
 
     a {
-      color: $body;
+      color: var(--primary-foreground-color);
       font-size: 0.938rem;
 
       span {
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/_featured-slider.scss b/src/sass/components/articles/_featured-slider.scss
index feeaa84..80cb2c3 100644
--- a/src/sass/components/articles/_featured-slider.scss
+++ b/src/sass/components/articles/_featured-slider.scss
@@ -11,7 +11,7 @@
     }
 
     &:before {
-      @include bs(0 4px 60px 0 rgba(0,0,0,.2));
+      @include bs(var(--article-shadow-hover));
     }
   }
 
@@ -36,7 +36,7 @@
     bottom: 0;
     left: 10px;
     border-radius: 10px;
-    @include bs(0 10px 10px rgba(0,0,0,0.08));
+    @include bs(var(--article-shadow-normal));
     @include transition(all .25s cubic-bezier(.02,.01,.47,1));
   }
 }
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 3493e45..203abd6 100644
--- a/src/sass/components/author/_author.scss
+++ b/src/sass/components/author/_author.scss
@@ -1,8 +1,10 @@
 .m-author {
   padding: 40px $mobile-space;
-  border-color: $light-blue;
-  border-top-width: 2px;
-  border-bottom-width: 2px;
+  border-color: var(--secondary-subtle-color);
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-left-width: 0;
+  border-right-width: 0;
   border-style: solid;
   margin: 0 auto;
 
@@ -17,7 +19,7 @@
   }
 
   &.no-subscribers {
-    background-color: $light-blue;
+    background-color: var(--secondary-subtle-color);
   }
 }
 
@@ -65,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/comments/_load-comments.scss b/src/sass/components/comments/_load-comments.scss
index 62a576d..aecf945 100644
--- a/src/sass/components/comments/_load-comments.scss
+++ b/src/sass/components/comments/_load-comments.scss
@@ -15,7 +15,7 @@
   top: 50%;
   height: 1px;
   z-index: 1;
-  background-color: $light-blue;
+  background-color: var(--secondary-subtle-color);
 }
 
 .m-load-comments__iframe {
diff --git a/src/sass/components/header/_header.scss b/src/sass/components/header/_header.scss
index a71d5af..7b01a89 100644
--- a/src/sass/components/header/_header.scss
+++ b/src/sass/components/header/_header.scss
@@ -12,7 +12,7 @@
   &.fixed {
     position: fixed;
     opacity: 0;
-    background-color: $white;
+    background-color: var(--background-color);
     @include transform(translateY(-100%));
     @include bs(0 4px 8px rgba(0, 0, 0, 0.05));
     @include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
@@ -28,7 +28,7 @@
   }
 
   &.submenu-is-active {
-    background-color: $white;
+    background-color: var(--background-color);
 
     .m-header__shadow {
       display: none;
@@ -36,6 +36,6 @@
   }
 
   &.with-picture {
-    background-color: $white;
+    background-color: var(--background-color);
   }
 }
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/header/_nav.scss b/src/sass/components/header/_nav.scss
index 0eb711f..bb99bed 100644
--- a/src/sass/components/header/_nav.scss
+++ b/src/sass/components/header/_nav.scss
@@ -23,7 +23,7 @@
     }
 
     li {
-      color: $titles;
+      color: var(--titles-color);
       letter-spacing: 0.3px;
       font-size: 1.125rem;
       margin-bottom: 15px;
diff --git a/src/sass/components/header/_recent-article.scss b/src/sass/components/header/_recent-article.scss
index 5d491aa..a04c6cf 100644
--- a/src/sass/components/header/_recent-article.scss
+++ b/src/sass/components/header/_recent-article.scss
@@ -35,7 +35,7 @@
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
-    background-color: $light-blue;
+    background-color: var(--secondary-subtle-color);
     -webkit-backface-visibility: visible !important;
     backface-visibility: visible !important;
     @include transition(transform .5s cubic-bezier(0.165, 0.84, 0.44, 1));
@@ -47,7 +47,7 @@
 }
 
 .m-recent-article__title {
-  color: $titles;
+  color: var(--titles-color);
   letter-spacing: 0.2px;
   line-height: 1.438rem;
   font-size: 1rem;
@@ -61,7 +61,7 @@
 }
 
 .m-recent-article__date {
-  color: $titles;
+  color: var(--titles-color);
   letter-spacing: 0.15px;
   font-size: 0.813rem;
 }
diff --git a/src/sass/components/header/_submenu.scss b/src/sass/components/header/_submenu.scss
index 666efc6..172f340 100644
--- a/src/sass/components/header/_submenu.scss
+++ b/src/sass/components/header/_submenu.scss
@@ -8,10 +8,10 @@
     left: 0;
     width: 100%;
     padding: 30px 0 20px 0;
-    background-color: $white;
-    border-top: 1px solid aliceblue;
+    background-color: var(--background-color);
+    border-top: 1px solid var(--secondary-border-color);
     z-index: 5;
-    @include bs(0 60px 60px rgba(0,0,0,0.25));
+    @include bs(0 60px 60px rgba(0,0,0,var(--submenu-shadow-color-opacity)));
   }
 
   @include respond-to('extra-large') {
diff --git a/src/sass/components/header/_tags.scss b/src/sass/components/header/_tags.scss
index eb09784..99f23d2 100644
--- a/src/sass/components/header/_tags.scss
+++ b/src/sass/components/header/_tags.scss
@@ -15,7 +15,7 @@
       }
 
       a {
-        color: $dark-blue;
+        color: var(--link-color);
       }
     }
   }
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/_hero.scss b/src/sass/components/hero/_hero.scss
index 1723fde..fab84e8 100644
--- a/src/sass/components/hero/_hero.scss
+++ b/src/sass/components/hero/_hero.scss
@@ -4,7 +4,7 @@
   min-height: 365px;
   overflow: hidden;
   padding: 100px 0 75px;
-  background-color: $light-blue;
+  background-color: var(--secondary-subtle-color);
   @extend .content-centered;
 
   @include respond-to('medium') {
@@ -14,7 +14,7 @@
 
   &.with-picture {
     color: $white;
-    background-color: darken($body, 25%);
+    background-color: $black;
 
     @include respond-to('medium') {
       min-height: 450px;
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 103a7f7..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;
@@ -18,7 +18,7 @@
 }
 
 .m-result__title {
-  color: $body;
+  color: var(--primary-foreground-color);
   letter-spacing: 0.3px;
   line-height: 1.4;
   font-size: 1rem;
@@ -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 0c2d4ee..100c9be 100644
--- a/src/sass/components/subscribe/_subscribe-section.scss
+++ b/src/sass/components/subscribe/_subscribe-section.scss
@@ -1,6 +1,6 @@
 .m-subscribe-section {
   padding: 50px 0;
-  background-color: $light-blue;
+  background-color: var(--secondary-subtle-color);
 
   @include respond-to('medium') {
     padding: 80px 0;
@@ -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 5989f64..bfba950 100644
--- a/src/sass/components/ui/_button.scss
+++ b/src/sass/components/ui/_button.scss
@@ -16,16 +16,17 @@
   @include transition(all .25s cubic-bezier(.02,.01,.47,1));
 
   &.outlined {
-    border: 1px solid $body;
+    color: var(--titles-color);
+    border: 1px solid var(--primary-foreground-color);
   }
 
   &.filled,
   &.primary {
-    @include bs(0 2px 4px rgba(108, 108, 108, 0.2));
+    @include bs(0 2px 4px var(--button-shadow-color-normal));
 
     &:hover {
       @include transform(translateY(-2px));
-      @include bs(0 4px 8px rgba(108, 108, 108, 0.3));
+      @include bs(0 4px 8px var(--button-shadow-color-hover));
     }
   }
 
@@ -41,6 +42,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 f691236..02a792a 100644
--- a/src/sass/components/ui/_icon-button.scss
+++ b/src/sass/components/ui/_icon-button.scss
@@ -1,5 +1,5 @@
 .m-icon-button {
-  color: $titles;
+  color: var(--titles-color);
   font-size: 1.125rem;
   border: 0;
   outline: 0;
@@ -11,17 +11,17 @@
 
   &.outlined {
     border-radius: 50%;
-    border: 1px solid $body;
+    border: 1px solid var(--primary-foreground-color);
   }
 
   &.filled {
-    background-color: $white;
+    background-color: var(--background-color);
     border-radius: 50%;
-    @include bs(0 2px 4px rgba(108, 108, 108, 0.2));
+    @include bs(0 2px 4px var(--button-shadow-color-normal));
     @include transition(all .25s cubic-bezier(.02,.01,.47,1));
 
     &:hover {
-      @include bs(0 4px 8px rgba(108, 108, 108, 0.3));
+      @include bs(0 4px 8px var(--button-shadow-color-hover));
     }
   }
 
@@ -52,7 +52,6 @@
     height: 32px;
     font-size: 0.625rem;
     z-index: 2;
-    background-color: $white;
 
     @include respond-to('medium') {
       top: 30px;
@@ -86,7 +85,7 @@
     position: relative;
 
     &.active {
-      color: $main-color;
+      color: var(--primary-subtle-color);
     }
   }
 
@@ -175,7 +174,7 @@
   }
 
   &.in-share {
-    color: $titles;
+    color: var(--titles-color);
     font-size: 0.750rem;
     text-decoration: none;
     width: 31px;
@@ -208,6 +207,7 @@
       opacity: 0;
 
       circle {
+        stroke: var(--primary-subtle-color);
         transform-origin: 50% 50%;
         @include transform(rotate(-90deg));
         @include transition(stroke-dashoffset 0.2s);
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/components/ui/_section-title.scss b/src/sass/components/ui/_section-title.scss
index 061610a..c565769 100644
--- a/src/sass/components/ui/_section-title.scss
+++ b/src/sass/components/ui/_section-title.scss
@@ -1,5 +1,5 @@
 .m-section-title {
-  color: $body;
+  color: var(--primary-foreground-color);
   text-align: center;
   letter-spacing: 0.3px;
   line-height: 1.3;
diff --git a/src/sass/layouts/_post-content.scss b/src/sass/layouts/_post-content.scss
index f6f112e..6c7ed08 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 {
@@ -411,7 +411,7 @@
   }
 
   button:not(.m-icon-button) {
-    border: 1px solid $body !important;
+    border: 1px solid var(--primary-foreground-color) !important;
     @extend .m-button;
   }
 
@@ -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;
@@ -432,7 +432,7 @@
 
   .kg-bookmark-container {
     display: flex;
-    color: $body;
+    color: var(--primary-foreground-color);
     text-decoration: none !important;
     min-height: 148px;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px,