diff --git a/home.scss b/home.scss
index 58dd14e..0cf2147 100644
--- a/home.scss
+++ b/home.scss
@@ -11,10 +11,14 @@
 
 body {
     background: white;
-    color: $text_color;
+    color: var(--text-color);
     font-size: $font_size;
     margin: 0;
     font-family: Lato, sans-serif;
+
+    @media (prefers-color-scheme: dark) {
+        background: #111;
+    }
 }
 
 h1 {
@@ -22,7 +26,7 @@ h1 {
 }
 
 a {
-    color: $link_color;
+    color: var(--link-color);
     &:hover {
         opacity: 0.8;
     }
@@ -55,6 +59,11 @@ a {
     backdrop-filter: saturate(180%) blur(20px);
     top: 0;
 
+    @media (prefers-color-scheme: dark) {
+        box-shadow: 0 0 0 1px #383838;
+        background: rgba(#111, 0.8);
+    }
+
     .lang_toggle {
         @include transition(all 0.2s ease);
         @include unselectable;
@@ -96,6 +105,10 @@ a {
 
         &:first-child {
             border-right: 1px solid #dadada;
+
+            @media (prefers-color-scheme: dark) {
+                border-right: 1px solid #383838;
+            }
         }
     }
 }
@@ -105,7 +118,7 @@ code, pre {
 }
 
 .sub_header {
-    background: $background_sub;
+    background: var(--background-sub);
     padding: 10px 20px;
 
     .inner {
@@ -362,6 +375,10 @@ code, pre {
             @include mobile_width {
                 font-size: 14px;
             }
+            
+            @media (prefers-color-scheme: dark) {
+                background: #252525;
+            }
         }
     }
 
diff --git a/reference.scss b/reference.scss
index 9d14e47..6258126 100644
--- a/reference.scss
+++ b/reference.scss
@@ -2,13 +2,23 @@
 @import "search";
 @import "syntaxhighlight";
 
-$nav_bg: mix(white, $grad_left, 95%);
 $header_height: 50px;
 
 $main_width: 900px;
 $nav_width: 300px;
 $mobile_width: 600px;
 
+$nav_bg: mix(white, $grad_left, 95%);
+$nav_bg_dark: mix(#18191A, $grad_left, 95%);
+
+:root {
+    --nav-bg: #{$nav_bg};
+
+    @media (prefers-color-scheme: dark) {
+        --nav-bg: #{$nav_bg_dark};
+    }
+}
+
 @mixin mobile_width  {
     @media (max-width: $mobile_width) {
         @content;
@@ -24,8 +34,13 @@ $mobile_width: 600px;
 
 body {
     background: white;
+
+    @media (prefers-color-scheme: dark) {
+        background: #111;
+    }
+
     font-size: $font_size;
-    color: $text_color;
+    color: var(--text-color);
     margin: 0;
     font-family: Lato, sans-serif;
 
@@ -170,10 +185,14 @@ code, pre {
 }
 
 a {
-    color: $link_color;
+    color: var(--link-color);
 
     &:hover {
         color: lighten($link_color, 10%);
+
+        @media (prefers-color-scheme: dark) {
+            color: lighten($link_color_dark, 10%);
+        }
     }
 }
 
@@ -194,12 +213,16 @@ a {
         cursor: pointer;
         vertical-align: middle;
         text-align: center;
-        background: $nav_bg;
+        background: var(--nav-bg);
 
         border: 2px solid $grad_right;
         border-radius: 4px;
         color: mix($text_color, $nav_bg, 70%);
 
+        @media (prefers-color-scheme: dark) {
+            color: mix($text_color_dark, $nav_bg_dark, 70%);
+        }
+
         margin: 0 5px;
 
         &:first-child {
@@ -218,6 +241,10 @@ a {
 
         &:active {
             background: darken($grad_left, 20%);
+
+            @media (prefers-color-scheme: dark) {
+                color: #{$grad_left};
+            }
         }
     }
 }
@@ -271,6 +298,10 @@ a {
         border-bottom: 2px solid $grad_right;
         padding-bottom: 10px;
         color: darken($grad_left, 20%);
+
+        @media (prefers-color-scheme: dark) {
+            color: #{$grad_left};
+        }
     }
 
     .scrolling_inner {
@@ -280,7 +311,7 @@ a {
         top: 0;
         bottom: 0;
         overflow-y: auto;
-        background: $nav_bg;
+        background: var(--nav-bg);
         border-right: 2px solid $grad_right;
 
         @include mobile_width {
@@ -306,6 +337,11 @@ a {
         padding: 4px 8px;
         color: rgba($text_color, 0.8);
 
+        @media (prefers-color-scheme: dark) {
+            color: rgba($text_color_dark, 0.8);
+        }
+
+
         text-decoration: none;
 
         &:hover {
@@ -428,6 +464,10 @@ a {
         code {
             background: rgba(0,0,0, 0.1);
             padding: 2px 10px;
+
+            @media (prefers-color-scheme: dark) {
+                background: #252525;
+            }
         }
 
     }
@@ -461,6 +501,10 @@ a {
             @include mobile_width {
                 font-size: 14px;
             }
+
+            @media (prefers-color-scheme: dark) {
+                background: #3C3C3C;
+            }
         }
     }
 
@@ -483,12 +527,17 @@ a {
     }
 
     blockquote, details.aside {
-        $color: #eee;
+        --color: #eee;
+
+        @media (prefers-color-scheme: dark) {
+            --color: #222;
+        }
+
         margin: 25px 0;
         padding: 10px;
 
-        background: $color;
-        border: 1px solid darken($color, 10%);
+        background: --color;
+        border: 1px solid darken(#eee, 10%);
         border-radius: 3px;
         box-shadow: 0px 1px 3px rgba(0,0,0, 0.1), inset 0px 0px 0px 1px rgba(255,255,255,0.3);
     }
@@ -508,7 +557,11 @@ a {
                     content: "Note:";
                     margin-right: 10px;
                     font-weight: bold;
-                    color: #444;
+                    color: rgb(156, 156, 156);
+
+                    @media (prefers-color-scheme: dark) {
+                        --color: rgb(54, 54, 54);
+                    }
                 }
             }
         }
@@ -602,12 +655,16 @@ pre {
     }
 
     thead {
-        background: $background_sub;
+        background: var(--background-sub);
         font-weight: bold;
 
         td {
             font-size: 14px;
             color: rgba($text_color, 0.8);
+
+            @media (prefers-color-scheme: dark) {
+                background-color: rgba($text_color_dark, 0.8);
+            }
         }
     }
 
diff --git a/scss/common.scss b/scss/common.scss
index 9bc6736..aff4760 100644
--- a/scss/common.scss
+++ b/scss/common.scss
@@ -2,17 +2,32 @@
 $font_size: 18px;
 
 $background_sub: #e8d7ed;
+$background_sub_dark: #2a272b;
 
 $site_width: 800px;
 
 $link_color: #a55f64;
+$link_color_dark: #b96a70;
 $text_color: #333334;
+$text_color_dark: #dadada;
 
 $grad_left: #7079bd;
 $grad_right: #70b6bd;
 
 $border_color: $grad_right;
 
+:root {
+    --text-color: #{$text_color};
+    --background-sub: #{$background_sub};
+    --link-color: #{$link_color};
+
+    @media (prefers-color-scheme: dark) {
+        --text-color: #{$text_color_dark};
+        --background-sub: #{$background_sub_dark};
+        --link-color: #{$link_color_dark};
+    }
+}
+
 @mixin single_line {
     white-space: nowrap;
     overflow: hidden;
diff --git a/scss/search.scss b/scss/search.scss
index 4481523..573c704 100644
--- a/scss/search.scss
+++ b/scss/search.scss
@@ -26,6 +26,10 @@ $mobile_width: 600px;
         border-radius: 3px;
         overflow: hidden;
 
+        @media (prefers-color-scheme: dark) {
+            background: var(--background-sub);
+        }
+
         @include mobile_width {
             left: 10px;
             right: 10px;
@@ -41,6 +45,10 @@ $mobile_width: 600px;
             line-height: 20px;
             color: rgba($text_color, 0.6);
 
+            @media (prefers-color-scheme: dark) {
+                color: rgba($text_color_dark, 0.6);
+            }
+
             .result_sub {
                 margin-left: 10px;
                 font-size: 14px;
@@ -48,6 +56,10 @@ $mobile_width: 600px;
 
             &.selected {
                 background-color: rgba($background_sub, 0.4);
+
+                @media (prefers-color-scheme: dark) {
+                    background-color: rgba($background_sub_dark, 0.4);
+                }
             }
         }
     }
@@ -61,11 +73,16 @@ $mobile_width: 600px;
         width: 100%;
         box-sizing: border-box;
 
+        @media (prefers-color-scheme: dark) {
+            background: var(--background-sub);
+        }
+
         &:focus {
             outline: none;
             box-shadow: 0 0 0 1px $border_color;
         }
 
+        color: var(--text-color);
     }
 
 }