diff --git a/.gitignore b/.gitignore
index 754490c..ef20aea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,6 +35,7 @@ eggs/
 
 lib/
 !src/newsreader/scss/lib
+!src/newsreader/js/lib
 
 lib64/
 parts/
diff --git a/src/newsreader/js/index.js b/src/newsreader/js/index.js
index 1ed14ed..ccb9553 100644
--- a/src/newsreader/js/index.js
+++ b/src/newsreader/js/index.js
@@ -1,3 +1,4 @@
+import './lib/index.js';
 import './pages/homepage/index.js';
 import './pages/categories/index.js';
 import './pages/rules/index.js';
diff --git a/src/newsreader/js/lib/index.js b/src/newsreader/js/lib/index.js
new file mode 100644
index 0000000..31b03f6
--- /dev/null
+++ b/src/newsreader/js/lib/index.js
@@ -0,0 +1 @@
+import './theme.js';
diff --git a/src/newsreader/js/lib/theme.js b/src/newsreader/js/lib/theme.js
new file mode 100644
index 0000000..ee7ef48
--- /dev/null
+++ b/src/newsreader/js/lib/theme.js
@@ -0,0 +1,76 @@
+function isCSSVariablesSupported() {
+  return window.CSS && window.CSS.supports('color', 'var(--fake-color');
+}
+
+function changeTheme(e) {
+  const currentPref = sessionStorage.getItem('t-dark');
+  const isDark = currentPref && currentPref === 'true' ? true : false;
+
+  if (isDark) {
+    document.documentElement.classList.remove('dark-theme');
+  } else {
+    document.documentElement.classList.add('dark-theme');
+  }
+
+  try {
+    sessionStorage.setItem('t-dark', !isDark);
+  } catch (e) {
+    // do nothing.
+  }
+}
+
+function prefersDarkTheme() {
+  try {
+    const currentPref = sessionStorage.getItem('t-dark');
+
+    if (currentPref && currentPref === 'true') {
+      return true;
+    } else if (
+      !currentPref &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  } catch (e) {
+    return false;
+  }
+}
+
+function toggleDarkTheme(isDark) {
+  if (isDark) {
+    document.documentElement.classList.add('dark-theme');
+  } else {
+    document.documentElement.classList.remove('dark-theme');
+  }
+
+  try {
+    sessionStorage.setItem('t-dark', isDark);
+  } catch (e) {
+    // do nothing.
+  }
+}
+
+function initThemeSelector() {
+  const themeButton = document.getElementsByClassName('theme-switcher')[0];
+  const mqPrefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+  if (prefersDarkTheme()) {
+    toggleDarkTheme(true);
+  }
+
+  themeButton.addEventListener('click', changeTheme);
+
+  mqPrefersDarkTheme.addListener(mq => {
+    toggleDarkTheme(mq.matches);
+  });
+}
+
+function init() {
+  if (isCSSVariablesSupported()) {
+    initThemeSelector();
+  }
+}
+
+init();
diff --git a/src/newsreader/scss/components/body/_body.scss b/src/newsreader/scss/components/body/_body.scss
index fed260b..ff111dd 100644
--- a/src/newsreader/scss/components/body/_body.scss
+++ b/src/newsreader/scss/components/body/_body.scss
@@ -3,7 +3,6 @@
   padding: 0;
 
   font-family: Rubik, sans-serif;
-  color: $font-color;
 }
 
 body {
diff --git a/src/newsreader/scss/components/card/_card.scss b/src/newsreader/scss/components/card/_card.scss
index b77522a..fbde877 100644
--- a/src/newsreader/scss/components/card/_card.scss
+++ b/src/newsreader/scss/components/card/_card.scss
@@ -7,7 +7,7 @@
 
   width: 50%;
 
-  background-color: $white;
+  background-color: var(--background-color);
 
   &__header {
     display: flex;
@@ -16,7 +16,7 @@
 
     padding: 15px 0;
 
-    border-bottom: 2px $gray solid;
+    border-bottom: 2px var(--lightest-accent-color) solid;
   }
 
   &__content {
diff --git a/src/newsreader/scss/components/category/_category.scss b/src/newsreader/scss/components/category/_category.scss
index 6710af2..8f5e109 100644
--- a/src/newsreader/scss/components/category/_category.scss
+++ b/src/newsreader/scss/components/category/_category.scss
@@ -36,6 +36,6 @@
   }
 
   &--selected, &:hover {
-    background-color: $gray;
+    background-color: var(--lighter-accent-color);
   }
 }
diff --git a/src/newsreader/scss/components/form/_form.scss b/src/newsreader/scss/components/form/_form.scss
index 9af3b12..e43110c 100644
--- a/src/newsreader/scss/components/form/_form.scss
+++ b/src/newsreader/scss/components/form/_form.scss
@@ -4,7 +4,7 @@
 
   width: 70%;
 
-  background-color: $white;
+  background-color: var(--background-color);
 
   &__section {
     &--last {
diff --git a/src/newsreader/scss/components/index.scss b/src/newsreader/scss/components/index.scss
index b82a22d..0240ee1 100644
--- a/src/newsreader/scss/components/index.scss
+++ b/src/newsreader/scss/components/index.scss
@@ -3,6 +3,7 @@
 @import './main/index';
 @import './navbar/index';
 @import './loading-indicator/index';
+@import './theme-switcher/index';
 
 @import './modal/index';
 
diff --git a/src/newsreader/scss/components/modal/_modal.scss b/src/newsreader/scss/components/modal/_modal.scss
index 3ca246c..4ed5b41 100644
--- a/src/newsreader/scss/components/modal/_modal.scss
+++ b/src/newsreader/scss/components/modal/_modal.scss
@@ -20,7 +20,7 @@
 
     width: 60%;
 
-    background-color: $white;
+    background-color: var(--accent-color);
   }
 
   &__header {
diff --git a/src/newsreader/scss/components/navbar/_navbar.scss b/src/newsreader/scss/components/navbar/_navbar.scss
index 60c9f48..5a3051c 100644
--- a/src/newsreader/scss/components/navbar/_navbar.scss
+++ b/src/newsreader/scss/components/navbar/_navbar.scss
@@ -1,6 +1,7 @@
 .nav {
   display: flex;
   justify-content: center;
+  align-items: center;
 
   margin: 0 0 5px 0;
   padding: 10px 0;
diff --git a/src/newsreader/scss/components/post-message/_post-message.scss b/src/newsreader/scss/components/post-message/_post-message.scss
index 574d633..f4704c3 100644
--- a/src/newsreader/scss/components/post-message/_post-message.scss
+++ b/src/newsreader/scss/components/post-message/_post-message.scss
@@ -7,8 +7,6 @@
   width: 60%;
   height: 80vh;
 
-  background-color: $white;
-
   &__message {
     font-size: 16px;
   }
diff --git a/src/newsreader/scss/components/post/_post.scss b/src/newsreader/scss/components/post/_post.scss
index 7a8ea22..c4b6039 100644
--- a/src/newsreader/scss/components/post/_post.scss
+++ b/src/newsreader/scss/components/post/_post.scss
@@ -11,7 +11,7 @@
 
   overflow-y: auto;
 
-  background-color: $white;
+  background-color: var(--background-color);
 
   cursor: initial;
 
@@ -33,7 +33,7 @@
 
   &__title {
     &--read {
-      color: $gainsboro;
+      color: var(--read-color);
     }
   }
 
@@ -55,7 +55,7 @@
   }
 
   &__rule, &__category {
-    background-color: $orange !important;
+    background-color: var(--lightest-accent-color) !important;
 
     & a {
       color: $black;
diff --git a/src/newsreader/scss/components/posts/_posts.scss b/src/newsreader/scss/components/posts/_posts.scss
index 3854b56..7566f48 100644
--- a/src/newsreader/scss/components/posts/_posts.scss
+++ b/src/newsreader/scss/components/posts/_posts.scss
@@ -33,7 +33,7 @@
     }
 
     & .badge {
-      background-color: $orange;
+      background-color: var(--lightest-accent-color);
     }
 
     &:last-child {
@@ -48,7 +48,7 @@
     font-size: 16px;
 
     &--read {
-      color: darken($gainsboro, +10%);
+      color: var(--read-color);
     }
 
     &:hover {
diff --git a/src/newsreader/scss/components/rules/_rules.scss b/src/newsreader/scss/components/rules/_rules.scss
index 527d99a..9166195 100644
--- a/src/newsreader/scss/components/rules/_rules.scss
+++ b/src/newsreader/scss/components/rules/_rules.scss
@@ -14,11 +14,11 @@
 
     &:hover {
       cursor: pointer;
-      background-color: $gray;
+      background-color: var(--lighter-accent-color);
     }
 
     &--selected {
-      background-color: $gray;
+      background-color: var(--lighter-accent-color);
     }
   }
 
diff --git a/src/newsreader/scss/components/table/_table.scss b/src/newsreader/scss/components/table/_table.scss
index 74d5d6e..e39f4c0 100644
--- a/src/newsreader/scss/components/table/_table.scss
+++ b/src/newsreader/scss/components/table/_table.scss
@@ -1,7 +1,7 @@
 .table {
   table-layout: fixed;
 
-  background-color: $white;
+  background-color: var(--background-color);
   width: 90%;
   padding: 20px;
 
diff --git a/src/newsreader/scss/components/theme-switcher/_theme-switcher.scss b/src/newsreader/scss/components/theme-switcher/_theme-switcher.scss
new file mode 100644
index 0000000..78959f2
--- /dev/null
+++ b/src/newsreader/scss/components/theme-switcher/_theme-switcher.scss
@@ -0,0 +1,5 @@
+.theme-switcher {
+  &:hover {
+    cursor: pointer;
+  }
+}
diff --git a/src/newsreader/scss/components/theme-switcher/index.scss b/src/newsreader/scss/components/theme-switcher/index.scss
new file mode 100644
index 0000000..0037786
--- /dev/null
+++ b/src/newsreader/scss/components/theme-switcher/index.scss
@@ -0,0 +1 @@
+@import './theme-switcher';
diff --git a/src/newsreader/scss/elements/badge/_badge.scss b/src/newsreader/scss/elements/badge/_badge.scss
index efdd1b7..08b4ee8 100644
--- a/src/newsreader/scss/elements/badge/_badge.scss
+++ b/src/newsreader/scss/elements/badge/_badge.scss
@@ -6,7 +6,7 @@
 
   text-align: center;
 
-  background-color: $gainsboro;
+  background-color: var(--lighter-accent-color);
 
   font-size: small;
 }
diff --git a/src/newsreader/scss/elements/checkbox/_checkbox.scss b/src/newsreader/scss/elements/checkbox/_checkbox.scss
index f23a7c3..174f348 100644
--- a/src/newsreader/scss/elements/checkbox/_checkbox.scss
+++ b/src/newsreader/scss/elements/checkbox/_checkbox.scss
@@ -14,7 +14,7 @@
 
     &:checked + .checkbox__label {
       .checkbox__box {
-        background-color: $checkbox-blue;
+        background-color: var(--lightest-accent-color);
       }
     }
   }
@@ -29,7 +29,7 @@
 
     height: 100%;
     width: 100%;
-    border: 2px solid darken($gainsboro, 10%);
+    border: 2px solid var(--lighter-accent-color);
     cursor: pointer;
   }
 }
diff --git a/src/newsreader/scss/elements/h1/_h1.scss b/src/newsreader/scss/elements/h1/_h1.scss
index 6ddee05..ce168c8 100644
--- a/src/newsreader/scss/elements/h1/_h1.scss
+++ b/src/newsreader/scss/elements/h1/_h1.scss
@@ -1,5 +1,5 @@
 .h1 {
-  color: $header-color;
+  color: var(--font-color);
   font-size: 20px;
 }
 
diff --git a/src/newsreader/scss/elements/h2/_h2.scss b/src/newsreader/scss/elements/h2/_h2.scss
index 9f77ad8..41cd57c 100644
--- a/src/newsreader/scss/elements/h2/_h2.scss
+++ b/src/newsreader/scss/elements/h2/_h2.scss
@@ -1,5 +1,5 @@
 .h2 {
-  color: $header-color;
+  color: var(--font-color);
 }
 
 h2 {
diff --git a/src/newsreader/scss/elements/h3/_h3.scss b/src/newsreader/scss/elements/h3/_h3.scss
index 7394bd7..89fdaf9 100644
--- a/src/newsreader/scss/elements/h3/_h3.scss
+++ b/src/newsreader/scss/elements/h3/_h3.scss
@@ -1,5 +1,5 @@
 .h3 {
-  color: $header-color;
+  color: var(--font-color);
 }
 
 h3 {
diff --git a/src/newsreader/scss/elements/h4/_h4.scss b/src/newsreader/scss/elements/h4/_h4.scss
index ab24888..1ff0da6 100644
--- a/src/newsreader/scss/elements/h4/_h4.scss
+++ b/src/newsreader/scss/elements/h4/_h4.scss
@@ -1,5 +1,5 @@
 .h4 {
-  color: $header-color;
+  color: var(--font-color);
 }
 
 h4 {
diff --git a/src/newsreader/scss/elements/h5/_h5.scss b/src/newsreader/scss/elements/h5/_h5.scss
index 5efa58e..4791e71 100644
--- a/src/newsreader/scss/elements/h5/_h5.scss
+++ b/src/newsreader/scss/elements/h5/_h5.scss
@@ -1,5 +1,5 @@
 .h5 {
-  color: $header-color;
+  color: var(--font-color);
 }
 
 h5 {
diff --git a/src/newsreader/scss/elements/input/_input.scss b/src/newsreader/scss/elements/input/_input.scss
index 16e6fad..84c2470 100644
--- a/src/newsreader/scss/elements/input/_input.scss
+++ b/src/newsreader/scss/elements/input/_input.scss
@@ -1,10 +1,12 @@
 .input {
   @include text-padding;
 
-  border: 1px $gray solid;
+  color: var(--font-color);
+  background-color: var(--accent-color);
+  border: 1px var(--lighter-accent-color) solid;
 
   &:focus {
-    border: 1px $focus-blue solid;
+    border: 1px var(--lightest-accent-color) solid;
   }
 
   &[type="file"] {
diff --git a/src/newsreader/scss/elements/link/_link.scss b/src/newsreader/scss/elements/link/_link.scss
index b485cb3..dc4ac42 100644
--- a/src/newsreader/scss/elements/link/_link.scss
+++ b/src/newsreader/scss/elements/link/_link.scss
@@ -1,5 +1,5 @@
 .link {
-  color: darken($azureish-white, 30%);
+  color: var(--link-color);
   text-decoration: none;
 
   &:hover {
diff --git a/src/newsreader/scss/elements/small/_small.scss b/src/newsreader/scss/elements/small/_small.scss
index c95bfab..9b28e4e 100644
--- a/src/newsreader/scss/elements/small/_small.scss
+++ b/src/newsreader/scss/elements/small/_small.scss
@@ -1,5 +1,5 @@
 .small {
-  color: $nickel;
+  color: var(--font-color);
   font-size: small;
 }
 
diff --git a/src/newsreader/scss/lib/_css.gg.scss b/src/newsreader/scss/lib/_css.gg.scss
index a1b1338..945717f 100644
--- a/src/newsreader/scss/lib/_css.gg.scss
+++ b/src/newsreader/scss/lib/_css.gg.scss
@@ -1,10 +1,10 @@
 @import '~css.gg/icons-scss/icons';
 
 .gg-link {
-  color: initial;
+  color: var(--font-color);
 }
 
 .gg-pen {
+  color: var(--font-color);
   transform: rotate(-45deg) scale(var(--ggs, 0.8));
-  color: initial;
 }
diff --git a/src/newsreader/scss/partials/_colors.scss b/src/newsreader/scss/partials/_colors.scss
index 87f6e49..21aa571 100644
--- a/src/newsreader/scss/partials/_colors.scss
+++ b/src/newsreader/scss/partials/_colors.scss
@@ -8,9 +8,6 @@ $white: rgba(255, 255, 255, 1);
 $black: rgba(0, 0, 0, 1);
 $dark: rgba(0, 0, 0, 0.4);
 
-$font-color: rgba(48, 51, 53, 1);
-$header-color: rgba(100, 101, 102, 1);
-
 $reddit-orange: rgba(255, 69, 0, 1);
 $twitter-blue: rgba(29, 155, 240, 1);
 
@@ -26,3 +23,25 @@ $lavendal-pink: rgba(162, 155, 254, 1);
 
 $focus-blue: darken($azureish-white, +10%);
 $checkbox-blue: rgba(34, 170, 253, 1);
+
+// White theme
+$background-color: $white;
+
+$font-color: rgba(48, 51, 53, 1);
+$link-color: darken($azureish-white, 30%);
+$read-color: darken($gainsboro, 10%);
+
+$accent-color: $gainsboro;
+$lighter-accent-color: $gainsboro;
+$lightest-accent-color: $orange;
+
+// Dark theme
+$dark-background-color: rgba(29, 45, 80, 1);
+
+$dark-font-color: darken($gray, 10%);
+$dark-link-color: $link-color;
+$dark-read-color: darken($dark-font-color, 20%);
+
+$dark-accent-color: rgba(19, 59, 92, 1);
+$dark-lighter-accent-color: rgba(30, 95, 116, 1);
+$dark-lightest-accent-color: rgba(252, 218, 183, 1);
diff --git a/src/newsreader/scss/partials/_root.scss b/src/newsreader/scss/partials/_root.scss
new file mode 100644
index 0000000..c6de25c
--- /dev/null
+++ b/src/newsreader/scss/partials/_root.scss
@@ -0,0 +1,26 @@
+:root {
+  --background-color: #{$background-color};
+
+  --font-color: #{$font-color};
+  --link-color: #{$link-color};
+  --read-color: #{$read-color};
+
+  --accent-color: #{$accent-color};
+  --lighter-accent-color: #{$lighter-accent-color};
+  --lightest-accent-color: #{$lightest-accent-color};
+
+  &.dark-theme {
+    --background-color: #{$dark-background-color};
+
+    --font-color: #{$dark-font-color};
+    --link-color: #{$dark-link-color};
+    --read-color: #{$dark-read-color};
+
+    --accent-color: #{$dark-accent-color};
+    --lighter-accent-color: #{$dark-lighter-accent-color};
+    --lightest-accent-color: #{$dark-lightest-accent-color};
+  }
+
+  color: var(--font-color);
+  background-color: var(--background-color);
+}
diff --git a/src/newsreader/scss/partials/index.scss b/src/newsreader/scss/partials/index.scss
index ff28d1b..2f97f18 100644
--- a/src/newsreader/scss/partials/index.scss
+++ b/src/newsreader/scss/partials/index.scss
@@ -1,2 +1,3 @@
 @import './colors';
 @import './fonts';
+@import './root';
diff --git a/src/newsreader/templates/base.html b/src/newsreader/templates/base.html
index 57da011..792997f 100644
--- a/src/newsreader/templates/base.html
+++ b/src/newsreader/templates/base.html
@@ -27,6 +27,8 @@
           <li class="nav__item"><a href="{% url 'accounts:register' %}">Register</a></li>
         {% endif %}
       </ol>
+
+      <i class="theme-switcher gg-dark-mode"></i>
     </nav>
 
     {% if messages %}