diff --git a/assets/scss/tale/_base.scss b/assets/scss/tale/_base.scss
index 6c2471b8..b2d82dd5 100644
--- a/assets/scss/tale/_base.scss
+++ b/assets/scss/tale/_base.scss
@@ -6,7 +6,7 @@
 html,
 body {
   color: $default-color;
-  background-color: #fff;
+  background-color: $white;
   margin: 0;
   padding: 0;
 }
diff --git a/assets/scss/tale/_variables.scss b/assets/scss/tale/_variables.scss
index 8a064f32..d1a0b25b 100644
--- a/assets/scss/tale/_variables.scss
+++ b/assets/scss/tale/_variables.scss
@@ -1,13 +1,26 @@
 // Colors
-$default-color: #555;
-$default-shade: #353535;
-$default-tint: #aaa;
-$grey-1: #979797;
-$grey-2: #e5e5e5;
+//light
+//$default-color: #555;
+//$default-shade: #353535;
+//$default-tint: #aaa;
+//$grey-1: #979797;
+//$grey-2: #e5e5e5;
+//$grey-3: #f9f9f9;
+//$white: #fff;
+//$blue: #4a9ae1;
+//$shadow-color: rgba(0, 0, 0, .2);
+//$code-color: #bf616a;
+
+//dark
+$default-shade: #c4c9d2;
+$default-color: #abb2bf;
+$grey-1: #777c85;
+$default-tint: #666a72;
+$grey-2: #333539;
 $grey-3: #f9f9f9;
-$white: #fff;
-$blue: #4a9ae1;
-$shadow-color: rgba(0, 0, 0, .2);
+$white: #282c34;
+$blue: #61afef;
+$shadow-color: rgba(0, 0, 0, .4);
 $code-color: #bf616a;
 
 // Fonts