diff --git a/scss/clear-typography.scss b/scss/clear-typography.scss
index 81729ef..285c034 100644
--- a/scss/clear-typography.scss
+++ b/scss/clear-typography.scss
@@ -1,6 +1,20 @@
 :root {
   --font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Cantarell, Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
+  --text-color: #212529;
+  --border-color: rgba(0,0,0,0.2);
+  --background-color: #f8f9fa;
+  --well-color: #e9ecef;
+  --accent-color: #1864ab;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-color: #f1f3f5;
+    --background-color: #212529;
+    --well-color: #343a40;
+    --accent-color: #d0ebff;
+  }
 }
 
 // Change these two variables for styling
@@ -20,21 +34,19 @@ html {
 	font-family: var(--font-family);
 	text-align: left;
 	font-size: 17px;
+  background-color: var(--background-color);
+  accent-color: var(--accent-color);
 }
 
 body {
 	line-height: $lineheight;
-	color: #444;
+	color: var(--text-color);
 	font-weight: 400;
   max-width: 800px;
   padding:1rem;
   margin: auto;
 }
 
-.night-mode {
-  color:#BBB;
-}
-
 strong {
 	font-weight: 600;
 }
@@ -44,7 +56,7 @@ em {
 }
 
 a {
-  color:#2484c1;
+  color: var(--accent-color);
   text-decoration:none;
 }
 
@@ -85,8 +97,7 @@ sub {
 }
 
 
-::selection { background: #2484c1; color: #fff; }
-::-moz-selection { background: #2484c1; color: #fff; }
+::selection, ::-moz-selection { background: var(--accent-color); color: var(--background-color); }
 
 /* ------------------ TITLES ------------------- */
 
@@ -135,7 +146,7 @@ hr {
   border-left: 0px;
   border-right: 0px;
   border-bottom: 1px;
-  border-color: rgba(1,1,1,0.15);
+  border-color: var(--border-color);
   border-style: solid;
   padding:0;
   margin:0;
@@ -159,24 +170,21 @@ hr {
 
 blockquote {
   @include well();
-	border-color: rgba(1, 1, 1, 0.15);
-	
-	.night-mode & {
-    border-color: rgba(255, 255, 255, 0.15)
-  }
+	border-color: var(--accent-color);
+	background-color:var(--well-color);
 }
 
 pre {
   @include well();
-	border-color: rgba(1,1,1,0.20);
-	background-color:#EEE;
-	
-	.night-mode & {
-    background-color:#222;
-    border-color:rgba(255,255,255,0.20);
-  }
+	border-color: var(--accent-color);
+	background-color:var(--well-color);
 }
 
+code {
+	background-color:var(--well-color);
+  padding: 5px;
+  border-radius: 3px;
+}
 
 
 /* ------------------ SPECIAL STYLING ------------------- */
@@ -189,10 +197,6 @@ mark {
   color: inherit;
 }
 
-.night-mode mark {
-  background-color:rgba(128,128,0,0.66);
-}
-
 /* ------------------ SPECIAL STYLING ------------------- */
 
 .time {