diff --git a/themes/modify_slick.sh b/themes/modify_slick.sh
index f0b67e1..afa01ee 100755
--- a/themes/modify_slick.sh
+++ b/themes/modify_slick.sh
@@ -13,6 +13,28 @@ for file in style.css style-compat.css; do
     # Remove fonts, save >400KiB (~92,5%)
     sed -Ei 's/@font-face\{[^\}]+\}//g' tastytea/static/assets/${file}
 
+
+    sed -i 's/#1d1f21/var(--bg-code)/g' tastytea/static/assets/${file}  # Code Background
+    sed -i 's/#ffffff/var(--bg)/g' tastytea/static/assets/${file}       # Background
+    sed -i 's/#fff/var(--bg)/g'    tastytea/static/assets/${file}       # Background
+    sed -i 's/#efefef/var(--hover)/g' tastytea/static/assets/${file}    # Current Line
+    sed -i 's/#eee/var(--hover)/g'    tastytea/static/assets/${file}    # Current Line
+    sed -i 's/#d6d6d6/var(--sel)/g' tastytea/static/assets/${file}      # Selection
+    sed -i 's/#4d4d4c/var(--fg)/g' tastytea/static/assets/${file}       # Foreground
+    sed -i 's/#8e908c/var(--comment)/g' tastytea/static/assets/${file}  # Comment
+    sed -i 's/#c82829/var(--red)/g' tastytea/static/assets/${file}      # Red
+    sed -i 's/#f5871f/var(--orange)/g' tastytea/static/assets/${file}   # Orange
+    sed -i 's/#eab700/var(--yellow)/g' tastytea/static/assets/${file}   # Yellow
+    sed -i 's/#718c00/var(--green)/g' tastytea/static/assets/${file}    # Green
+    sed -i 's/#3e999f/var(--aqua)/g' tastytea/static/assets/${file}     # Aqua
+    sed -i 's/#4271ae/var(--blue)/g' tastytea/static/assets/${file}     # Blue
+    sed -i 's/#8959a8/var(--purple)/g' tastytea/static/assets/${file}   # Purple
+
+    sed -i 's/#000/#e2e0de/g' tastytea/static/assets/${file}            # Menu links
+
+    # Set variables
+    sed -s -i 's/^/:root{--bg:#1d1f21;--bg-code:#101112;--bg-code-trans:#10111280;--hover:#282a2e;--sel:#373b41;--fg:#c5c8c6;--comment:#969896;--red:#CC6666;--orange:#de935f;--yellow:#f0c674;--green:#b5bd68;--aqua:#8abeb7;--blue:#81a2be;--purple:#b294bb;--note:#1d1d1d}/' tastytea/static/assets/${file}
+
     # Increase font-size
     sed -i 's/font-size:16px/font-size:18px/g' tastytea/static/assets/${file}
 
@@ -20,7 +42,7 @@ for file in style.css style-compat.css; do
     sed -i 's/body{margin:0}/body{max-width:100ch;margin:auto}/' tastytea/static/assets/${file}
 
     # Add dark background to <code>
-    sed -i 's/$/p>code,td>code{background-color:#10111280}/' tastytea/static/assets/${file}
+    sed -i 's/$/p>code,td>code{background-color:var(--bg-code-trans)}/' tastytea/static/assets/${file}
 
     # Reduce margin above listing blocks
     sed -i 's/$/div.listingblock pre{margin-top:0.1em}/' tastytea/static/assets/${file}
@@ -30,26 +52,10 @@ for file in style.css style-compat.css; do
 
     # Style NOTE: (AsciiDoc)
     sed -i 's/$/div.note>table,div.note td{border:0}/' tastytea/static/assets/${file}
-    sed -i 's/$/div.note td.icon{background-color:#282a2e;color:#b5bd68;border-radius:20%}/' tastytea/static/assets/${file}
-
-    sed -i 's/#1d1f21/#101112/g' tastytea/static/assets/${file} # Code Background
-
-    sed -i 's/#ffffff/#1d1f21/g' tastytea/static/assets/${file} # Background
-    sed -i 's/#fff/#1d1f21/g'    tastytea/static/assets/${file} # Background
-    sed -i 's/#efefef/#282a2e/g' tastytea/static/assets/${file} # Current Line
-    sed -i 's/#eee/#282a2e/g'    tastytea/static/assets/${file} # Current Line
-    sed -i 's/#d6d6d6/#373b41/g' tastytea/static/assets/${file} # Selection
-    sed -i 's/#4d4d4c/#c5c8c6/g' tastytea/static/assets/${file} # Foreground
-    sed -i 's/#8e908c/#969896/g' tastytea/static/assets/${file} # Comment
-    sed -i 's/#c82829/#cc6666/g' tastytea/static/assets/${file} # Red
-    sed -i 's/#f5871f/#de935f/g' tastytea/static/assets/${file} # Orange
-    sed -i 's/#eab700/#f0c674/g' tastytea/static/assets/${file} # Yellow
-    sed -i 's/#718c00/#b5bd68/g' tastytea/static/assets/${file} # Green
-    sed -i 's/#3e999f/#8abeb7/g' tastytea/static/assets/${file} # Aqua
-    sed -i 's/#4271ae/#81a2be/g' tastytea/static/assets/${file} # Blue
-    sed -i 's/#8959a8/#b294bb/g' tastytea/static/assets/${file} # Purple
-
-    sed -i 's/#000/#e2e0de/g' tastytea/static/assets/${file}    # Some links
+    sed -i 's/$/div.note td.icon{color:var(--green);font-size:120%;border-right: 0.2em solid var(--hover)}/' tastytea/static/assets/${file}
+    sed -i 's/$/div.note table{background-color:var(--note)}/' tastytea/static/assets/${file}
+    sed -i 's/$/div.note td.icon div.title::after{content:":"}/' tastytea/static/assets/${file}
+    sed -i 's/$/div.note{margin-bottom:1em;margin-left: 1em}/' tastytea/static/assets/${file}
 
     # Make CSS more readable
     sed -i 's/}/}\n/g' tastytea/static/assets/${file}
diff --git a/themes/tastytea/static/assets/style-compat.css b/themes/tastytea/static/assets/style-compat.css
index 946830d..07cf7b1 100644
--- a/themes/tastytea/static/assets/style-compat.css
+++ b/themes/tastytea/static/assets/style-compat.css
@@ -1,3 +1,4 @@
+:root {--bg:#1d1f21; --bg-code:#101112; --bg-code-trans:#10111280; --hover:#282a2e; --sel:#373b41; --fg:#c5c8c6; --comment:#969896; --red:#CC6666; --orange:#de935f; --yellow:#f0c674; --green:#b5bd68; --aqua:#8abeb7; --blue:#81a2be; --purple:#b294bb; --note:#1d1d1d}
 html {font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%}
 body {max-width:100ch; margin:auto}
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display:block}
@@ -176,11 +177,11 @@ td, th {padding:0}
 .pure-menu-horizontal .pure-menu-children .pure-menu-separator {display:block; width:auto}
 .pure-menu-heading {text-transform:uppercase; color:#565d64}
 .pure-menu-link {color:#777}
-.pure-menu-children {background-color:#1d1f21}
+.pure-menu-children {background-color:var(--bg)}
 .pure-menu-disabled, .pure-menu-heading, .pure-menu-link {padding:.5em 1em}
 .pure-menu-disabled {opacity:.5}
 .pure-menu-disabled .pure-menu-link:hover {background-color:transparent}
-.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {background-color:#282a2e}
+.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {background-color:var(--hover)}
 .pure-menu-selected .pure-menu-link, .pure-menu-selected .pure-menu-link:visited {color:#e2e0de}
 .pure-table {border-collapse:collapse; border-spacing:0; empty-cells:show; border:1px solid #cbcbcb}
 .pure-table caption {color:#e2e0de; font:italic 85%/1 arial, sans-serif; padding:1em 0; text-align:center}
@@ -194,7 +195,7 @@ td, th {padding:0}
 .pure-table-horizontal td, .pure-table-horizontal th {border-width:0 0 1px; border-bottom:1px solid #cbcbcb}
 .pure-table-horizontal tbody>tr:last-child>td {border-bottom-width:0}
 .highlight .hll {background-color:#373b41}
-.highlight {background:#101112; color:#c5c8c6}
+.highlight {background:var(--bg-code); color:#c5c8c6}
 .highlight .c {color:#969896}
 .highlight .err {color:#c66}
 .highlight .k {color:#b294bb}
@@ -245,32 +246,32 @@ td, th {padding:0}
 .highlight .bp {color:#c5c8c6}
 .highlight .vc, .highlight .vg, .highlight .vi {color:#c66}
 .highlight .il {color:#de935f}
-body {background-color:#1d1f21; color:#c5c8c6; font-display:swap; font-family:Source Sans Pro, sans-serif; font-size:18px; font-style:normal; font-weight:400}
+body {background-color:var(--bg); color:var(--fg); font-display:swap; font-family:Source Sans Pro, sans-serif; font-size:18px; font-style:normal; font-weight:400}
 abbr, cite, q {font-family:Source Serif Pro, serif}
 cite, em, q {font-style:italic}
 b, bold, dt, strong {font-weight:700}
 code, kbd, pre, samp {font-family:Source Code Pro, monospace}
-kbd, samp {background-color:#282a2e}
+kbd, samp {background-color:var(--hover)}
 .highlight, code, kbd, pre, samp {border:0; border-radius:.25em; padding:0 .125em}
-mark {background-color:#f0c674}
-blockquote {border-left:.5em solid #969896; border-radius:.25em; margin-left:0; padding-left:2em}
-a {color:#81a2be}
-a:hover, a:hover:visited {color:#8abeb7}
-a:visited {color:#b294bb}
-hr {border:0; border-top:1px dashed #c5c8c6}
-::-moz-selection {background-color:#373b41}
-::selection {background-color:#373b41}
-.pure-g [class*=pure-u], button, html, input, select, textarea {color:#c5c8c6; font-family:Source Sans Pro, sans-serif; font-weight:400}
-.pure-table {border:1px solid #969896; color:#c5c8c6; background-color:#1d1f21}
-.pure-table td, .pure-table th {border-left:1px solid #969896}
-.pure-table thead {color:#c5c8c6; background-color:#282a2e}
-.pure-menu a, .pure-menu a:hover, .pure-menu a:hover:visited, .pure-menu a:visited {color:#c5c8c6}
-.pure-menu-header:hover, .pure-menu-item:hover {background-color:#282a2e}
+mark {background-color:var(--yellow)}
+blockquote {border-left:.5em solid var(--comment); border-radius:.25em; margin-left:0; padding-left:2em}
+a {color:var(--blue)}
+a:hover, a:hover:visited {color:var(--aqua)}
+a:visited {color:var(--purple)}
+hr {border:0; border-top:1px dashed var(--fg)}
+::-moz-selection {background-color:var(--sel)}
+::selection {background-color:var(--sel)}
+.pure-g [class*=pure-u], button, html, input, select, textarea {color:var(--fg); font-family:Source Sans Pro, sans-serif; font-weight:400}
+.pure-table {border:1px solid var(--comment); color:var(--fg); background-color:var(--bg)}
+.pure-table td, .pure-table th {border-left:1px solid var(--comment)}
+.pure-table thead {color:var(--fg); background-color:var(--hover)}
+.pure-menu a, .pure-menu a:hover, .pure-menu a:hover:visited, .pure-menu a:visited {color:var(--fg)}
+.pure-menu-header:hover, .pure-menu-item:hover {background-color:var(--hover)}
 .pure-menu-disabled:hover {background-color:transparent}
-.footer-content {border-top:1px solid #c5c8c6}
-.navigation-content {border-bottom:1px solid #c5c8c6}
+.footer-content {border-top:1px solid var(--fg)}
+.navigation-content {border-bottom:1px solid var(--fg)}
 .navigation-header {font-size:1.25em}
-.navigation-header a {color:#c5c8c6}
+.navigation-header a {color:var(--fg)}
 .navigation-header-subtitle {font-family:Source Serif Pro, serif}
 .footer-content, .navigation-content, .pagination-content {display:table; margin:0 auto; text-align:center; width:100%}
 figure {text-align:center}
@@ -279,13 +280,16 @@ figure img {margin:0 auto}
 .post-meta {font-size:.9em; margin:0 0 .5em}
 .post-meta a {text-decoration:none}
 .post-meta a:hover {text-decoration:underline}
-.post-divider {border-top:1px solid #c5c8c6}
+.post-divider {border-top:1px solid var(--fg)}
 .pull-end {float:right}
 .pull-start, [dir=rtl] .pull-end {float:left}
 [dir=rtl] pull-start {float:right}
 .fixup {position:relative; top:-.05em}
-p>code, td>code {background-color:#10111280}
+p>code, td>code {background-color:var(--bg-code-trans)}
 div.listingblock pre {margin-top:0.1em}
 li>p {margin:0.1em; }
 div.note>table, div.note td {border:0}
-div.note td.icon {background-color:#282a2e; color:#b5bd68; border-radius:20%}
+div.note td.icon {color:var(--green); font-size:120%; border-right: 0.2em solid var(--hover)}
+div.note table {background-color:var(--note)}
+div.note td.icon div.title::after {content:":"}
+div.note {margin-bottom:1em; margin-left: 1em}
diff --git a/themes/tastytea/static/assets/style.css b/themes/tastytea/static/assets/style.css
index c2ade29..e149728 100644
--- a/themes/tastytea/static/assets/style.css
+++ b/themes/tastytea/static/assets/style.css
@@ -1,3 +1,4 @@
+:root {--bg:#1d1f21; --bg-code:#101112; --bg-code-trans:#10111280; --hover:#282a2e; --sel:#373b41; --fg:#c5c8c6; --comment:#969896; --red:#CC6666; --orange:#de935f; --yellow:#f0c674; --green:#b5bd68; --aqua:#8abeb7; --blue:#81a2be; --purple:#b294bb; --note:#1d1d1d}
 html {font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%}
 body {max-width:100ch; margin:auto}
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display:block}
@@ -209,11 +210,11 @@ td, th {padding:0}
 .pure-menu-horizontal .pure-menu-children .pure-menu-separator {display:block; width:auto}
 .pure-menu-heading {text-transform:uppercase; color:#565d64}
 .pure-menu-link {color:#777}
-.pure-menu-children {background-color:#1d1f21}
+.pure-menu-children {background-color:var(--bg)}
 .pure-menu-disabled, .pure-menu-heading, .pure-menu-link {padding:.5em 1em}
 .pure-menu-disabled {opacity:.5}
 .pure-menu-disabled .pure-menu-link:hover {background-color:transparent}
-.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {background-color:#282a2e}
+.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {background-color:var(--hover)}
 .pure-menu-selected .pure-menu-link, .pure-menu-selected .pure-menu-link:visited {color:#e2e0de}
 .pure-table {border-collapse:collapse; border-spacing:0; empty-cells:show; border:1px solid #cbcbcb}
 .pure-table caption {color:#e2e0de; font:italic 85%/1 arial, sans-serif; padding:1em 0; text-align:center}
@@ -227,7 +228,7 @@ td, th {padding:0}
 .pure-table-horizontal td, .pure-table-horizontal th {border-width:0 0 1px; border-bottom:1px solid #cbcbcb}
 .pure-table-horizontal tbody>tr:last-child>td {border-bottom-width:0}
 .highlight .hll {background-color:#373b41}
-.highlight {background:#101112; color:#c5c8c6}
+.highlight {background:var(--bg-code); color:#c5c8c6}
 .highlight .c {color:#969896}
 .highlight .err {color:#c66}
 .highlight .k {color:#b294bb}
@@ -278,32 +279,32 @@ td, th {padding:0}
 .highlight .bp {color:#c5c8c6}
 .highlight .vc, .highlight .vg, .highlight .vi {color:#c66}
 .highlight .il {color:#de935f}
-body {background-color:#1d1f21; color:#c5c8c6; font-display:swap; font-family:Source Sans Pro, sans-serif; font-size:18px; font-style:normal; font-weight:400}
+body {background-color:var(--bg); color:var(--fg); font-display:swap; font-family:Source Sans Pro, sans-serif; font-size:18px; font-style:normal; font-weight:400}
 abbr, cite, q {font-family:Source Serif Pro, serif}
 cite, em, q {font-style:italic}
 b, bold, dt, strong {font-weight:700}
 code, kbd, pre, samp {font-family:Source Code Pro, monospace}
-kbd, samp {background-color:#282a2e}
+kbd, samp {background-color:var(--hover)}
 .highlight, code, kbd, pre, samp {border:0; border-radius:.25em; padding:0 .125em}
-mark {background-color:#f0c674}
-blockquote {border-left:.5em solid #969896; border-radius:.25em; margin-left:0; padding-left:2em}
-a {color:#81a2be}
-a:hover, a:hover:visited {color:#8abeb7}
-a:visited {color:#b294bb}
-hr {border:0; border-top:1px dashed #c5c8c6}
-::-moz-selection {background-color:#373b41}
-::selection {background-color:#373b41}
-.pure-g [class*=pure-u], button, html, input, select, textarea {color:#c5c8c6; font-family:Source Sans Pro, sans-serif; font-weight:400}
-.pure-table {border:1px solid #969896; color:#c5c8c6; background-color:#1d1f21}
-.pure-table td, .pure-table th {border-left:1px solid #969896}
-.pure-table thead {color:#c5c8c6; background-color:#282a2e}
-.pure-menu a, .pure-menu a:hover, .pure-menu a:hover:visited, .pure-menu a:visited {color:#c5c8c6}
-.pure-menu-header:hover, .pure-menu-item:hover {background-color:#282a2e}
+mark {background-color:var(--yellow)}
+blockquote {border-left:.5em solid var(--comment); border-radius:.25em; margin-left:0; padding-left:2em}
+a {color:var(--blue)}
+a:hover, a:hover:visited {color:var(--aqua)}
+a:visited {color:var(--purple)}
+hr {border:0; border-top:1px dashed var(--fg)}
+::-moz-selection {background-color:var(--sel)}
+::selection {background-color:var(--sel)}
+.pure-g [class*=pure-u], button, html, input, select, textarea {color:var(--fg); font-family:Source Sans Pro, sans-serif; font-weight:400}
+.pure-table {border:1px solid var(--comment); color:var(--fg); background-color:var(--bg)}
+.pure-table td, .pure-table th {border-left:1px solid var(--comment)}
+.pure-table thead {color:var(--fg); background-color:var(--hover)}
+.pure-menu a, .pure-menu a:hover, .pure-menu a:hover:visited, .pure-menu a:visited {color:var(--fg)}
+.pure-menu-header:hover, .pure-menu-item:hover {background-color:var(--hover)}
 .pure-menu-disabled:hover {background-color:transparent}
-.footer-content {border-top:1px solid #c5c8c6}
-.navigation-content {border-bottom:1px solid #c5c8c6}
+.footer-content {border-top:1px solid var(--fg)}
+.navigation-content {border-bottom:1px solid var(--fg)}
 .navigation-header {font-size:1.25em}
-.navigation-header a {color:#c5c8c6}
+.navigation-header a {color:var(--fg)}
 .navigation-header-subtitle {font-family:Source Serif Pro, serif}
 .footer-content, .navigation-content, .pagination-content {display:table; margin:0 auto; text-align:center; width:100%}
 figure {text-align:center}
@@ -312,13 +313,16 @@ figure img {margin:0 auto}
 .post-meta {font-size:.9em; margin:0 0 .5em}
 .post-meta a {text-decoration:none}
 .post-meta a:hover {text-decoration:underline}
-.post-divider {border-top:1px solid #c5c8c6}
+.post-divider {border-top:1px solid var(--fg)}
 .pull-end {float:right}
 .pull-start, [dir=rtl] .pull-end {float:left}
 [dir=rtl] pull-start {float:right}
 .fixup {position:relative; top:-.05em}
-p>code, td>code {background-color:#10111280}
+p>code, td>code {background-color:var(--bg-code-trans)}
 div.listingblock pre {margin-top:0.1em}
 li>p {margin:0.1em; }
 div.note>table, div.note td {border:0}
-div.note td.icon {background-color:#282a2e; color:#b5bd68; border-radius:20%}
+div.note td.icon {color:var(--green); font-size:120%; border-right: 0.2em solid var(--hover)}
+div.note table {background-color:var(--note)}
+div.note td.icon div.title::after {content:":"}
+div.note {margin-bottom:1em; margin-left: 1em}