diff --git a/.gitignore b/.gitignore
index c6adddb..7a3bfac 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,5 @@ site
 janet_modules
 build
 /jpm/
+
+.vscode
\ No newline at end of file
diff --git a/static/css/docpage.css b/static/css/docpage.css
index 6c38019..98c2355 100644
--- a/static/css/docpage.css
+++ b/static/css/docpage.css
@@ -49,7 +49,6 @@
         padding: 5px;
         background: gray;
     }
-
 }
 
 /*
@@ -76,11 +75,11 @@
 }
 
 .toc span.selected {
-  background: #0765911a;
+    background: #0765911a;
 }
-  
+
 .toc span:hover {
-  background: #0765911a;
+    background: #0765911a;
 }
 
 .toc ul {
@@ -111,6 +110,12 @@
     color: #888;
 }
 
+@media (prefers-color-scheme: dark) {
+    .binding-type {
+        color: #ccc;
+    }
+}
+
 .binding-sym {
     font-family: serif;
     font-weight: 600;
@@ -119,13 +124,25 @@
 .binding-text {
     color: #444;
     margin-top: 14px;
-    font-family: 'Dosis','Helvetica', sans-serif;
+    font-family: 'Dosis', 'Helvetica', sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+    .binding-text {
+        color: unset;
+    }
 }
 
 .example-title {
     margin-top: 28px;
     color: #888;
-    font-family: 'Dosis','Helvetica', sans-serif;
+    font-family: 'Dosis', 'Helvetica', sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+    .example-title {
+        color: #ccc;
+    }
 }
 
 /* Toc Toggle */
@@ -144,7 +161,7 @@
     height: 4px;
     width: 28px;
     border-radius: 2px;
-    background: #CCC;
+    background: #ccc;
 }
 
 #toc-toggle.open .topbar {
@@ -171,7 +188,7 @@
 }
 
 .prev .prevnext-text::before {
-    content: "< ";
+    content: '< ';
 }
 
 .next {
@@ -180,5 +197,5 @@
 }
 
 .next .prevnext-text::after {
-    content: " >";
-}
+    content: ' >';
+}
\ No newline at end of file
diff --git a/static/css/landing.css b/static/css/landing.css
index f9d15ab..e5d90ff 100644
--- a/static/css/landing.css
+++ b/static/css/landing.css
@@ -62,9 +62,9 @@
 
 #replterm {
     border-radius: 2px 2px 0 0;
-    border-top: solid #CCC 1px;
-    border-left: solid #CCC 1px;
-    border-right: solid #CCC 1px;
+    border-top: solid #ccc 1px;
+    border-left: solid #ccc 1px;
+    border-right: solid #ccc 1px;
     font-family: 'Inconsolata', monospace;
     padding: 10px;
     height: 350px;
@@ -74,14 +74,30 @@
     overflow-y: auto;
 }
 
+@media (prefers-color-scheme: dark) {
+    #replterm {
+        border-color: #333;
+        background: #333;
+        color: #ccc;
+    }
+}
+
 #replinbar {
     border-radius: 0 0 2px 2px;
-    border: solid #CCC 1px;
+    border: solid #ccc 1px;
     font-family: 'Inconsolata', monospace;
     margin: 0 10px 10px 10px;
     color: black;
     display: flex;
-    background: #F8F8F8;
+    background: #f8f8f8;
+}
+
+@media (prefers-color-scheme: dark) {
+    #replinbar {
+        border-color: #333;
+        color: unset;
+        background: #1a1a1a;
+    }
 }
 
 #replprompt {
@@ -99,12 +115,18 @@
     margin: 0;
     width: 100%;
     transition: background 0.3s;
-    text-indent 2px;
+    text-indent: 2px;
 }
 
 #replin:focus {
     outline: none;
-    background: #F0F0F0;
+    background: #f0f0f0;
+}
+
+@media (prefers-color-scheme: dark) {
+    #replin:focus {
+        background: unset;
+    }
 }
 
 #replin br {
@@ -118,8 +140,8 @@
 
 /* Github Banner */
 
-.github-corner:hover .octo-arm{
-    animation:octocat-wave 560ms ease-in-out;
+.github-corner:hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
 }
 
 /* Donate button */
@@ -128,23 +150,23 @@
     margin: 0 15px;
 }
 
-@keyframes octocat-wave{
+@keyframes octocat-wave {
     0%, 100% {
-        transform:rotate(0);
+        transform: rotate(0);
     }
     20%, 60% {
-        transform:rotate(-25deg);
+        transform: rotate(-25deg);
     }
-    40%, 80%{
-        transform:rotate(10deg);
+    40%, 80% {
+        transform: rotate(10deg);
     }
 }
 
-@media (max-width:500px) {
+@media (max-width: 500px) {
     .github-corner:hover .octo-arm {
-        animation:none;
+        animation: none;
     }
     .github-corner .octo-arm {
-        animation:octocat-wave 560ms ease-in-out;
+        animation: octocat-wave 560ms ease-in-out;
     }
-}
+}
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index 8c92614..9e47a08 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -16,31 +16,36 @@ article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
 }
+
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
-	display: block;
+    display: block;
 }
+
 body {
-	line-height: 1;
+    line-height: 1;
 }
+
 blockquote, q {
-	quotes: none;
+    quotes: none;
 }
+
 blockquote:before, blockquote:after,
 q:before, q:after {
-	content: '';
-	content: none;
+    content: '';
+    content: none;
 }
+
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
 }
 
 /* Now apply relevant style */
@@ -49,7 +54,14 @@ body {
     font-size: 1rem;
     font-family: sans-serif;
     line-height: 1.4;
-    color: #222
+    color: #222;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #222;
+        color: #eee;
+    }
 }
 
 .content-wrapper {
@@ -80,29 +92,44 @@ a {
     color: #2674d3;
 }
 
+@media (prefers-color-scheme: dark) {
+    a {
+        color: #09a5b8;
+    }
+}
+
 h1, h2, h3, h4 {
     margin-left: 15px;
     margin-right: 15px;
-    font-family: 'Dosis','Helvetica', sans-serif;
+    font-family: 'Dosis', 'Helvetica', sans-serif;
     color: #111;
 }
 
+@media (prefers-color-scheme: dark) {
+    h1, h2, h3, h4 {
+        color: #f8f8f2;
+    }
+}
+
 h1 {
     font-size: 3rem;
     padding-top: 3rem;
     padding-bottom: 2rem;
 }
+
 h2 {
     font-size: 2rem;
     padding-top: 32px;
     padding-bottom: 24px;
 }
+
 h3 {
     color: #333;
     font-size: 1.6rem;
     padding-top: 18px;
     padding-bottom: 16px;
 }
+
 h4 {
     color: #888;
     font-size: 1rem;
@@ -110,17 +137,29 @@ h4 {
     padding-bottom: 10px;
 }
 
+@media (prefers-color-scheme: dark) {
+    h3 {
+        color: #e3e0e0;
+    }
+
+    h4 {
+        color: #cccccc;
+    }
+}
+
 @media (max-width: 700px) {
     h1 {
         font-size: 2.5rem;
         padding-top: 2.5rem;
         padding-bottom: 1.5rem;
     }
+
     h2 {
         font-size: 1.8rem;
         padding-top: 28px;
         padding-bottom: 20px;
     }
+
     h3 {
         font-size: 1.5rem;
         padding-top: 16px;
@@ -134,11 +173,13 @@ h4 {
         padding-top: 2rem;
         padding-bottom: 1rem;
     }
+
     h2 {
         font-size: 1.6rem;
         padding-top: 24px;
         padding-bottom: 18px;
     }
+
     h3 {
         font-size: 1.4rem;
         padding-top: 14px;
@@ -254,10 +295,16 @@ code {
 
 .mendoza-code {
     padding: 0 5px;
-    background: #EEE;
+    background: #eee;
     white-space: nowrap;
 }
 
+@media (prefers-color-scheme: dark) {
+    .mendoza-code {
+        background: #333;
+    }
+}
+
 .mendoza-codeblock {
     color: white;
     padding: 14px;
@@ -269,22 +316,65 @@ code {
 
 /* Based on Sublime Text's Monokai theme */
 
-.mdzsyn-comment {color: #B5B19e;}
-.mdzsyn-operator {color: #ae81ff;}
-.mdzsyn-number {color: #ae81ff;}
-.mdzsyn-keyword {color: #ff97bc;}
-.mdzsyn-string {color: #e6db74;}
-.mdzsyn-identifier {color: #a6e22e;}
-.mdzsyn-symbol {color: #afffff;}
-.mdzsyn-coresym {color: #ffbc6d;}
-
-.cm-s-monokai span.cm-bracket {color: #f8f8f2;}
-.cm-s-monokai span.cm-tag {color: #f92672;}
-.cm-s-monokai span.cm-link {color: #ae81ff;}
-.cm-s-monokai span.cm-error {background: #f92672; color: #f8f8f0;}
-.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {color: #a6e22e;}
-.cm-s-monokai .CodeMirror-activeline-background {background: #373831 !important;}
-.cm-s-monokai .CodeMirror-matchingbracket {
-  text-decoration: underline;
-  color: white !important;
+.mdzsyn-comment {
+    color: #b5b19e;
+}
+
+.mdzsyn-operator {
+    color: #ae81ff;
+}
+
+.mdzsyn-number {
+    color: #ae81ff;
+}
+
+.mdzsyn-keyword {
+    color: #ff97bc;
+}
+
+.mdzsyn-string {
+    color: #e6db74;
+}
+
+.mdzsyn-identifier {
+    color: #a6e22e;
+}
+
+.mdzsyn-symbol {
+    color: #afffff;
+}
+
+.mdzsyn-coresym {
+    color: #ffbc6d;
+}
+
+.cm-s-monokai span.cm-bracket {
+    color: #f8f8f2;
+}
+
+.cm-s-monokai span.cm-tag {
+    color: #f92672;
+}
+
+.cm-s-monokai span.cm-link {
+    color: #ae81ff;
 }
+
+.cm-s-monokai span.cm-error {
+    background: #f92672;
+    color: #f8f8f0;
+}
+
+.cm-s-monokai span.cm-property,
+.cm-s-monokai span.cm-attribute {
+    color: #a6e22e;
+}
+
+.cm-s-monokai .CodeMirror-activeline-background {
+    background: #373831 !important;
+}
+
+.cm-s-monokai .CodeMirror-matchingbracket {
+    text-decoration: underline;
+    color: white !important;
+}
\ No newline at end of file