diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss
index 55dce5c..747d3d2 100644
--- a/assets/css/color/blue.scss
+++ b/assets/css/color/blue.scss
@@ -1,3 +1,3 @@
-:root {
-  --accent: #23B0FF;
+html:root {
+  --accent: #23b0ff;
 }
\ No newline at end of file
diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss
index ca21aaf..8193ab3 100644
--- a/assets/css/color/green.scss
+++ b/assets/css/color/green.scss
@@ -1,3 +1,3 @@
-:root {
-  --accent: #78E2A0;
+html:root {
+  --accent: #78e2a0;
 }
\ No newline at end of file
diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss
index 93e3a72..0cc71b1 100644
--- a/assets/css/color/orange.scss
+++ b/assets/css/color/orange.scss
@@ -1,3 +1,3 @@
-:root {
-  --accent: #FFA86A;
+html:root {
+  --accent: #ffa86a;
 }
\ No newline at end of file
diff --git a/assets/css/color/paper.scss b/assets/css/color/paper.scss
new file mode 100644
index 0000000..1ae8f3b
--- /dev/null
+++ b/assets/css/color/paper.scss
@@ -0,0 +1,3 @@
+html:root {
+  --accent: #1d1e28;
+}
\ No newline at end of file
diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss
index c2a8b1c..373b4c9 100644
--- a/assets/css/color/pink.scss
+++ b/assets/css/color/pink.scss
@@ -1,3 +1,3 @@
-:root {
-  --accent: #EE72F1;
+html:root {
+  --accent: #ee72f1;
 }
\ No newline at end of file
diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss
index f5b2016..ba1ea95 100644
--- a/assets/css/color/red.scss
+++ b/assets/css/color/red.scss
@@ -1,3 +1,3 @@
-:root {
-  --accent: #FF6266;
+html:root {
+  --accent: #ff6266;
 }
\ No newline at end of file
diff --git a/assets/css/menu.scss b/assets/css/menu.scss
index 5038dd2..3252f91 100644
--- a/assets/css/menu.scss
+++ b/assets/css/menu.scss
@@ -2,11 +2,12 @@
   --shadow-color: color-mix(in srgb, var(--background), transparent 20%);
   display: none;
   flex-direction: column;
-  --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
+  --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color),
+    10px 10px var(--shadow-color);
   position: absolute;
   background: var(--background);
   box-shadow: var(--shadow);
-  color: white;
+  color: var(--menu-color);
   border: 2px solid;
   margin: 0;
   padding: 10px;
@@ -45,7 +46,7 @@
     margin: 0;
     padding: 0;
 
-    > li {
+    >li {
       flex: 0 0 auto;
       margin-bottom: 10px;
       white-space: nowrap;
@@ -91,6 +92,7 @@
     &--title {
       padding: 5px;
     }
+
     &--list {
       list-style-type: unset;
     }
@@ -103,7 +105,7 @@
       display: flex;
     }
 
-    > li {
+    >li {
       flex: 0 0 auto;
 
       &:not(:last-of-type) {
@@ -119,7 +121,7 @@
 
   &--desktop {
     @media (max-width: $phone) {
-      display: none
+      display: none;
     }
   }
 
@@ -163,4 +165,4 @@
       right: 0;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 173b292..9779cca 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,6 +1,10 @@
 $centerTheme: {{ if $.Site.Params.CenterTheme }}center{{ else }}flex-start{{ end }};
 
+{{ if in (slice "paper") $.Site.Params.ThemeColor }}
+@import "variables-light";
+{{ else }}
 @import "variables";
+{{ end }}
 
 @import "font";
 @import "buttons";
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
index 0018971..830cd14 100644
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@@ -41,27 +41,26 @@ code.language-scss,
 .token.function,
 .token.function-name,
 .token.deleted,
-code.language-javascript,
-code.language-html,
-.command-line-prompt > span:before {
+code[class*="language-"],
+.command-line-prompt>span:before {
   color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important;
 }
 
 .token.selector,
 .token.tag,
 .token.punctuation {
-  color: white;
+  color: var(--syntax-punctuation-color);
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: rgba(255, 255, 255, .3) !important;
+  color: var(--syntax-comment-color) !important;
 }
 
 .token.namespace {
-  opacity: .7 !important;
+  opacity: 0.7 !important;
 }
 
 pre[data-line] {
@@ -75,13 +74,12 @@ pre[class*="language-"] {
 }
 
 .line-highlight {
-  --line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
   position: absolute;
   left: 0;
   right: 0;
   padding: 0;
   margin: 0;
-  background: color-mix(in srgb, var(--line-highlight-mix), transparent 92%);
+  background: color-mix(in srgb, var(--syntax-line-highlight-mix), transparent 92%);
   pointer-events: none;
   line-height: inherit;
   white-space: pre;
@@ -91,24 +89,23 @@ pre[class*="language-"] {
 .line-highlight[data-end]:after {
   content: attr(data-start);
   position: absolute;
-  /* top: .4em; */
-  left: .6em;
+  left: 0.6em;
   min-width: 1em;
-  padding: 0 .5em;
-  background-color: hsla(24, 20%, 50%, .4);
-  color: hsl(24, 20%, 95%);
+  padding: 0 0.5em;
+  background-color: var(--syntax-line-highlight-background-color);
+  color: var(--syntax-line-highlight-color);
   font: bold 65%/1.5 sans-serif;
   text-align: center;
-  vertical-align: .3em;
+  vertical-align: 0.3em;
   border-radius: 999px;
   text-shadow: none;
-  box-shadow: 0 1px white;
+  box-shadow: 0 1px var(--syntax-line-highlight-box-shadow);
 }
 
 .line-highlight[data-end]:after {
   content: attr(data-end);
   top: auto;
-  bottom: .4em;
+  bottom: 0.4em;
 }
 
 .line-numbers .line-highlight:before,
@@ -118,37 +115,38 @@ pre[class*="language-"] {
 
 .code-toolbar {
   --code-margin: 40px;
-	position: relative;
-	margin: var(--code-margin) 0;
-	padding: 20px;
-	border: 1px solid rgba(255, 255, 255, .1);
+  position: relative;
+  margin: var(--code-margin) 0;
+  padding: 20px;
+  border: 1px solid var(--syntax-code-border-color);
 
-	+ .code-toolbar,
-	+ .highlight,
-	+ .highlight .code-toolbar {
-		border-top: 0;
-		margin-top: calc(-1 * var(--code-margin));
-	}
+  +.code-toolbar,
+  +.highlight,
+  +.highlight .code-toolbar {
+    border-top: 0;
+    margin-top: calc(-1 * var(--code-margin));
+  }
 
-	pre, code {
-		border: none;
-	}
+  pre,
+  code {
+    border: none;
+  }
 
-	code {
-		display: block;
-		color: inherit;
-	}
+  code {
+    display: block;
+    color: inherit;
+  }
 
-  > .toolbar {
+  >.toolbar {
     button {
-      font-size: .8em !important;
-      background: hsla(0,0%,87.8%,.2) !important;
-      color: #bbb !important;
-      box-shadow: 0 2px 0 0 rgba(0,0,0,.2) !important;
+      font-size: 0.8em !important;
+      background: var(--syntax-code-copy-button-background) !important;
+      color: var(--syntax-code-copy-button-color) !important;
+      box-shadow: 0 2px 0 0 var(--syntax-code-copy-button-box-shadow-color) !important;
       border-radius: 0 !important;
       margin: 6px !important;
       padding: 10px !important;
-      user-select:none
+      user-select: none;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/assets/css/terms.scss b/assets/css/terms.scss
index d2525c2..67f3755 100644
--- a/assets/css/terms.scss
+++ b/assets/css/terms.scss
@@ -19,4 +19,4 @@
       color: var(--accent);
     }
   }
-}
+}
\ No newline at end of file
diff --git a/assets/css/variables-light.scss b/assets/css/variables-light.scss
new file mode 100644
index 0000000..8d71369
--- /dev/null
+++ b/assets/css/variables-light.scss
@@ -0,0 +1,29 @@
+:root {
+  --accent-contrast-color: white;
+  --article-link-color: var(inherit);
+  --background: color-mix(in srgb, var(--accent) 2%, #fefcfa 98%);
+  --border-color: rgba(0, 0, 0, 0.1);
+  --color: black;
+  --menu-color: black;
+
+  // Use in code syntax highlighting
+  --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #000 30%);
+  --syntax-var-color: color-mix(in srgb, var(--accent) 90%, #000);
+  --syntax-value-color: color-mix(in srgb, var(--accent), black);
+  --syntax-punctuation-color: black;
+  --syntax-comment-color: rgba(0, 0, 0, 0.3);
+  --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #000 10%);
+  --syntax-line-highlight-background-color: hsla(336, 20%, 50%, 0.4);
+  --syntax-line-highlight-color: hsl(336, 20%, 95%);
+  --syntax-line-highlight-box-shadow: black;
+  --syntax-code-border-color: rgba(0, 0, 0, 0.1);
+  --syntax-code-copy-button-background: hsla(360, 0%, 87.8%, 0.2);
+  --syntax-code-copy-button-color: #444;
+  --syntax-code-copy-button-box-shadow-color: rgba(255, 255, 255, 0.2);
+}
+
+// Native CSS Variable aren't supported in a combination with MEDIA QUERIES. Wait for a new standard https://drafts.csswg.org/css-env-1/
+// --phone: "max-width: 684px";
+// --tablet: "max-width: 900px";
+$phone: 684px;
+$tablet: 900px;
\ No newline at end of file
diff --git a/assets/css/variables.scss b/assets/css/variables.scss
index 9764e04..d178b22 100644
--- a/assets/css/variables.scss
+++ b/assets/css/variables.scss
@@ -1,15 +1,29 @@
 :root {
-  /* COLOR VARIABLES */
-  --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%);
   --accent-contrast-color: black;
-  --color: white;
-  --border-color: rgba(255, 255, 255, .1);
   --article-link-color: var(inherit);
+  --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
+  --border-color: rgba(255, 255, 255, 0.1);
+  --color: white;
+  --menu-color: white;
+
+  // Use in code syntax highlighting
+  --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
+  --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
+  --syntax-punctuation-color: white;
+  --syntax-value-color: color-mix(in srgb, var(--accent), white);
+  --syntax-comment-color: rgba(255, 255, 255, 0.3);
+  --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
+  --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
+  --syntax-line-highlight-color: hsl(24, 20%, 95%);
+  --syntax-line-highlight-box-shadow: white;
+  --syntax-code-border-color: rgba(255, 255, 255, 0.1);
+  --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2);
+  --syntax-code-copy-button-color: #bbb;
+  --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2);
 }
 
-// Native CSS Variable aren't supported in a combination with MEDIA QUERIES. Wait for a new standard https://drafts.csswg.org/css-env-1/ 
+// Native CSS Variable aren't supported in a combination with MEDIA QUERIES. Wait for a new standard https://drafts.csswg.org/css-env-1/
 // --phone: "max-width: 684px";
 // --tablet: "max-width: 900px";
-
 $phone: 684px;
 $tablet: 900px;
\ No newline at end of file
diff --git a/static/img/theme-colors/paper.png b/static/img/theme-colors/paper.png
new file mode 100644
index 0000000..974d719
Binary files /dev/null and b/static/img/theme-colors/paper.png differ