diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
index e06bc49..b126ca6 100644
--- a/.github/workflows/firebase-hosting-merge.yml
+++ b/.github/workflows/firebase-hosting-merge.yml
@@ -26,7 +26,7 @@ jobs:
           extended: true # optional, default is false
 
       - name: Build
-        run: hugo --config exampleSite/config.toml --minify
+        run: hugo --config demoSite/config.toml --minify
 
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
index 687bfb6..1cded39 100644
--- a/.github/workflows/firebase-hosting-pull-request.yml
+++ b/.github/workflows/firebase-hosting-pull-request.yml
@@ -24,7 +24,7 @@ jobs:
           extended: true # optional, default is false
 
       - name: Build
-        run: hugo --config exampleSite/config.toml --minify
+        run: hugo --config demoSite/config.toml --minify
 
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
diff --git a/.gitignore b/.gitignore
index 6b800ba..99ec36f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,9 @@
 # firebase
 .firebase
 
+# mac
+**/.DS_Store
+
 ### Node ###
 # Logs
 logs
diff --git a/assets/css/banner.scss b/assets/css/banner.scss
index 6955b1e..97004e6 100644
--- a/assets/css/banner.scss
+++ b/assets/css/banner.scss
@@ -3,7 +3,7 @@
   height: 2rem;
   display: grid;
   grid-template-columns:  1fr auto;
-  background: $accent;
+  background: var(--accent);
 
   & span {
     display: flex;
@@ -12,7 +12,7 @@
   }
 
   & a {
-    color: #1d212c;
+    color: var(--accent-contrast-color);
     display: inline;
   }
 
diff --git a/assets/css/buttons.scss b/assets/css/buttons.scss
index d0b988d..877433b 100644
--- a/assets/css/buttons.scss
+++ b/assets/css/buttons.scss
@@ -16,9 +16,9 @@ a.button {
   text-decoration: none;
   text-align: center;
   border-radius: 8;
-  border: 1px solid $accent;
-  background: $accent;
-  color: $background;
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  color: var(--accent-contrast-color);
   font: inherit;
   font-weight: bold;
   appearance: none;
@@ -26,7 +26,7 @@ a.button {
   outline: none;
 
   &:hover {
-    background: transparentize($accent, .1);
+    background: color-mix(in srgb, var(--accent), transparent 10%);
   }
 
   /* variants */
@@ -64,7 +64,7 @@ a.read-more:hover,
 a.read-more:active {
   display: inline-flex;
   border: none;
-  color: $accent;
+  color: var(--accent);
   background: none;
   box-shadow: none;
   padding: 0;
diff --git a/assets/css/code.scss b/assets/css/code.scss
index 9ac2f6b..2414173 100644
--- a/assets/css/code.scss
+++ b/assets/css/code.scss
@@ -1,5 +1,5 @@
 .collapsable-code {
-  $border-color: mix($accent, #999, 90%);
+  --border-color: color-mix(in srgb, var(--accent) 90%, #999 10%);
 
   position: relative;
   width: 100%;
@@ -39,13 +39,13 @@
     min-width: 30px;
     min-height: 30px;
     margin: 0;
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid var(--border-color);
     cursor: pointer;
   }
 
   &__title {
     flex: 1;
-    color: $accent;
+    color: var(--accent);
     padding: 3px 10px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -53,15 +53,15 @@
   }
 
   &__language {
-    color: $accent;
-    border: 1px solid $border-color;
+    color: var(--accent);
+    border: 1px solid var(--border-color);
     border-bottom: none;
     text-transform: uppercase;
     padding: 3px 10px;
   }
 
   &__toggle {
-    color: $accent;
+    color: var(--accent);
     font-size: 16px;
     padding: 3px 10px;
 
diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss
index 5a3b455..55dce5c 100644
--- a/assets/css/color/blue.scss
+++ b/assets/css/color/blue.scss
@@ -1 +1,3 @@
-$accent: #23B0FF;
+:root {
+  --accent: #23B0FF;
+}
\ No newline at end of file
diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss
index efb853a..ca21aaf 100644
--- a/assets/css/color/green.scss
+++ b/assets/css/color/green.scss
@@ -1 +1,3 @@
-$accent: #78E2A0;
+:root {
+  --accent: #78E2A0;
+}
\ No newline at end of file
diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss
index 5a6ab3c..93e3a72 100644
--- a/assets/css/color/orange.scss
+++ b/assets/css/color/orange.scss
@@ -1 +1,3 @@
-$accent: #FFA86A;
+:root {
+  --accent: #FFA86A;
+}
\ No newline at end of file
diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss
index fce2e73..c2a8b1c 100644
--- a/assets/css/color/pink.scss
+++ b/assets/css/color/pink.scss
@@ -1 +1,3 @@
-$accent: #EE72F1;
+:root {
+  --accent: #EE72F1;
+}
\ No newline at end of file
diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss
index 1f9bd6e..f5b2016 100644
--- a/assets/css/color/red.scss
+++ b/assets/css/color/red.scss
@@ -1 +1,3 @@
-$accent: #FF6266;
+:root {
+  --accent: #FF6266;
+}
\ No newline at end of file
diff --git a/assets/css/footer.scss b/assets/css/footer.scss
index d7297b6..fa33790 100644
--- a/assets/css/footer.scss
+++ b/assets/css/footer.scss
@@ -11,7 +11,7 @@
     width: 760px;
     max-width: 100%;
 
-    @media ($tablet) {
+    @media (var(--tablet)) {
       flex-direction: column;
     }
   }
diff --git a/assets/css/form.scss b/assets/css/form.scss
index 78a1080..fb3bee8 100644
--- a/assets/css/form.scss
+++ b/assets/css/form.scss
@@ -1,7 +1,7 @@
 input, textarea, select {
   background: transparent;
-  color: $accent;
-  border: 1px solid $accent;
+  color: var(--accent);
+  border: 1px solid var(--accent);
   border-radius: 0;
   padding: 10px;
   margin: 5px 0;
@@ -9,8 +9,8 @@ input, textarea, select {
   appearance: none;
 
   &:focus, :active {
-    border-color: $color;
-    outline: 1px solid $color;
+    border-color: var(--color);
+    outline: 1px solid var(--color);
   }
 
   &:active {
@@ -19,25 +19,25 @@ input, textarea, select {
 }
 
 select {
-  background: $background;
+  background: var(--background);
 
   option {
-    background: $background;
+    background: var(--background);
   }
 }
 
 ::placeholder {
-  color: transparentize($accent, .5);
+  color: color-mix(in srgb, var(--accent), transparent 50%);
 }
 
 input {
   &[type="checkbox"] {
     vertical-align: middle;
     padding: 10px;
-    box-shadow: inset 0 0 0 3px $background;
+    box-shadow: inset 0 0 0 3px var(--background);
 
     &:checked {
-      background: $accent;
+      background: var(--accent);
     }
   }
 }
diff --git a/assets/css/header.scss b/assets/css/header.scss
index 61c45a8..e8c3d07 100644
--- a/assets/css/header.scss
+++ b/assets/css/header.scss
@@ -19,7 +19,7 @@
 
     &:after {
       content: '';
-      background: repeating-linear-gradient(90deg, $accent, $accent 2px, transparent 0, transparent 10px);
+      background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
       display: block;
       width: 100%;
       right: 10px;
diff --git a/assets/css/logo.scss b/assets/css/logo.scss
index 33c7fef..2969041 100644
--- a/assets/css/logo.scss
+++ b/assets/css/logo.scss
@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   text-decoration: none;
-  background: $accent;
-  color: black;
+  background: var(--accent);
+  color: color-mix(in srgb, var(--accent), var(--accent-contrast-color) 90%);;
   padding: 5px 10px;
 }
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 7585edd..99f2930 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -15,8 +15,8 @@ body {
   font-size: 1rem;
   line-height: 1.54;
   letter-spacing: -0.02em;
-  background-color: $background;
-  color: $color;
+  background-color: var(--background);
+  color: var(--color);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
@@ -24,7 +24,7 @@ body {
   -webkit-overflow-scrolling: touch;
   -webkit-text-size-adjust: 100%;
 
-  @media ($phone) {
+  @media (var(--phone)) {
     font-size: 1rem;
   }
 }
@@ -61,7 +61,7 @@ a {
 
   /* Waiting for a better times... */
   /* &:has(code) {
-    text-decoration-color: $accent;
+    text-decoration-color: var(--accent);
   } */
 }
 
@@ -109,8 +109,8 @@ figure {
     font-size: 14px;
     padding: 5px 10px;
     margin-top: 5px;
-    background: $accent;
-    color: $background;
+    background: var(--accent);
+    color: var(--accent-contrast-color);
     /* opacity: .8; */
 
     &.left {
@@ -130,8 +130,8 @@ figure {
 code, kbd {
   font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
   font-feature-settings: normal;
-  background: transparentize($accent, .8);
-  color: $accent;
+  background: color-mix(in srgb, var(--accent), transparent 80%);
+  color: var(--accent);
   padding: 1px 6px;
   margin: 0 2px;
   font-size: .95rem;
@@ -157,7 +157,7 @@ pre {
     margin-top: -40px;
   }
 
-  @media ($phone) {
+  @media (var(--phone)) {
     white-space: pre-wrap;
     word-wrap: break-word;
   }
@@ -172,12 +172,12 @@ pre {
 }
 
 blockquote {
-  border-top: 1px solid $accent;
-  border-bottom: 1px solid $accent;
+  border-top: 1px solid var(--accent);
+  border-bottom: 1px solid var(--accent);
   margin: 40px 0;
   padding: 25px;
 
-  @media ($phone) {
+  @media (var(--phone)) {
     padding-right: 0;
   }
 
@@ -198,15 +198,15 @@ blockquote {
     display: block;
     position: absolute;
     left: -25px;
-    color: $accent;
+    color: var(--accent);
   }
 
   &.twitter-tweet {
     position: relative;
-    background: transparentize($accent, .9);
+    background: color-mix(in srgb, var(--accent), transparent 90%);;
     font: inherit;
     color: inherit;
-    border: 1px solid $accent;
+    border: 1px solid var(--accent);
     padding-top: 60px;
 
     p:before {
@@ -217,12 +217,12 @@ blockquote {
       content: '> From Twitter:';
       position: absolute;
       top: 20px;
-      color: $accent;
+      color: var(--accent);
       font-weight: bold;
     }
 
     a {
-      color: $accent;
+      color: var(--accent);
     }
   }
 }
@@ -237,12 +237,12 @@ table {
 table,
 th,
 td {
-  border: 1px dashed $accent;
+  border: 1px dashed var(--accent);
   padding: 10px;
 }
 
 th {
-  color: $accent;
+  color: var(--accent);
 }
 
 ul,
@@ -254,7 +254,7 @@ ol {
     position: relative;
   }
 
-  @media ($phone) {
+  @media (var(--phone)) {
     margin-left: 20px;
   }
 }
@@ -270,7 +270,7 @@ ol {
       content: counter(li);
       position: absolute;
       right: calc(100% + 10px);
-      color: $accent;
+      color: var(--accent);
       display: inline-block;
       text-align: right;
     }
@@ -290,8 +290,8 @@ ol {
 }
 
 mark {
-  background: $accent;
-  color: $background;
+  background: var(--accent);
+  color: var(--accent-contrast-color);
 }
 
 .container {
@@ -312,7 +312,7 @@ mark {
     max-width: 100%;
   }
 
-  @media ($phone) {
+  @media (var(--phone)) {
     padding: 20px;
   }
 
@@ -333,7 +333,7 @@ mark {
 hr {
   width: 100%;
   border: none;
-  background: $border-color;
+  background: var(--border-color);
   height: 1px;
 }
 
diff --git a/assets/css/menu.scss b/assets/css/menu.scss
index fdd3075..7d5ec5c 100644
--- a/assets/css/menu.scss
+++ b/assets/css/menu.scss
@@ -1,11 +1,11 @@
 @mixin menu {
+  --shadow-color: color-mix(in srgb, var(--background), transparent 20%);;
   display: none;
   flex-direction: column;
-  $shadow-color: transparentize($background, .2);
-  $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
+  --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
   position: absolute;
-  background: $background;
-  box-shadow: $shadow;
+  background: var(--background);
+  box-shadow: var(--shadow);
   color: white;
   border: 2px solid;
   margin: 0;
@@ -17,7 +17,7 @@
 }
 
 @mixin header-menu-trigger {
-  color: $accent;
+  color: var(--accent);
   border: 2px solid;
   margin-left: 10px;
   height: 100%;
@@ -33,7 +33,7 @@
   justify-content: space-between;
   margin: 20px 1px;
 
-  @media ($phone) {
+  @media (var(--phone)) {
     margin: 0;
   }
 
@@ -55,7 +55,7 @@
       }
     }
 
-    @media ($phone) {
+    @media (var(--phone)) {
       flex-direction: column;
       align-items: flex-start;
       padding: 0;
@@ -82,7 +82,7 @@
 
   &__trigger {
     margin-right: 0 !important;
-    color: $accent;
+    color: var(--accent);
     user-select: none;
     cursor: pointer;
   }
@@ -109,7 +109,7 @@
   }
 
   &--desktop {
-    @media ($phone) {
+    @media (var(--phone)) {
       display: none
     }
   }
@@ -119,13 +119,13 @@
       @include header-menu-trigger;
       display: none;
 
-      @media ($phone) {
+      @media (var(--phone)) {
         display: block;
       }
     }
 
     .menu__dropdown {
-      @media ($phone) {
+      @media (var(--phone)) {
         left: auto;
         right: 0;
       }
@@ -144,7 +144,7 @@
     .menu__trigger {
       @include header-menu-trigger;
 
-      @media ($phone) {
+      @media (var(--phone)) {
         display: none;
       }
     }
diff --git a/assets/css/pagination.scss b/assets/css/pagination.scss
index c65efcb..bf49038 100644
--- a/assets/css/pagination.scss
+++ b/assets/css/pagination.scss
@@ -15,8 +15,8 @@
       text-align: center;
       margin: 0 auto;
       padding: 5px 10px;
-      background: $background;
-      color: transparentize($color, .7);
+      background: var(--background);
+      color: color-mix(in srgb, var(--accent), transparent 70%);;
       font-size: .8rem;
       text-transform: uppercase;
       text-decoration: none;
@@ -56,7 +56,7 @@
   padding: 0;
   appearance: none;
 
-  @media($phone) {
+  @media(var(--phone)) {
     flex: 1;
   }
 
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 0457ef7..594e02e 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -3,7 +3,7 @@
 }
 
 .framed {
-  border: 1px solid $accent;
+  border: 1px solid var(--accent);
   padding: 20px;
 
   *:first-child {
@@ -26,13 +26,13 @@
   padding: 20px 0;
 
   &:not(:last-of-type) {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid var(--border-color);
   }
 
   &-meta {
     font-size: 1rem;
     margin-bottom: 10px;
-    color: transparentize($accent, .3);
+    color: color-mix(in srgb, var(--accent), transparent 30%);;
 
     & > *:not(:first-child) {
       &::before {
@@ -44,12 +44,12 @@
   }
 
   &-title {
-    $border: 3px dotted $accent;
+    --border: 3px dotted var(--accent);
     position: relative;
-    color: $accent;
+    color: var(--accent);
     margin: 0 0 15px;
     padding-bottom: 15px;
-    border-bottom: $border;
+    border-bottom: var(--border);
 
     &:after {
       content: '';
@@ -57,7 +57,7 @@
       bottom: 2px;
       display: block;
       width: 100%;
-      border-bottom: $border;
+      border-bottom: var(--border);
     }
 
     a {
@@ -81,12 +81,12 @@
   }
 
   &-cover {
-    border: 20px solid $accent;
+    border: 20px solid var(--accent);
     background: transparent;
     margin: 40px 0;
     padding: 20px;
 
-    @media ($phone) {
+    @media (var(--phone)) {
       padding: 10px;
       border-width: 10px;
     }
@@ -99,7 +99,7 @@
       content: '-';
       position: absolute;
       left: -20px;
-      color: $accent;
+      color: var(--accent);
     }
   }
 }
@@ -121,7 +121,7 @@
 }
 
 .hanchor {
-  color: transparentize($accent, .1);
+  color: color-mix(in srgb, var(--accent), transparent 10%);
   text-decoration: none;
   margin-left: 10px;
   visibility: hidden;
@@ -132,5 +132,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
 }
 
 .footnotes {
-  color: transparentize($color, .5);
+  color: color-mix(in srgb, var(--accent), transparent 50%);
 }
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
index 27aecc7..0018971 100644
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@@ -17,7 +17,7 @@ code.language-scss,
 .token.number,
 .token.inserted,
 .token.important {
-  color: $accent !important;
+  color: var(--syntax-value-color, color-mix(in srgb, var(--accent), white)) !important;
 }
 
 .token.tag-id,
@@ -34,7 +34,7 @@ code.language-scss,
 .token.class-name,
 .token.constant,
 .token.symbol {
-  color: transparentize($accent, .3) !important;
+  color: var(--syntax-var-color, color-mix(in srgb, var(--accent) 90%, transparent)) !important;
 }
 
 .token.property,
@@ -44,7 +44,7 @@ code.language-scss,
 code.language-javascript,
 code.language-html,
 .command-line-prompt > span:before {
-  color: mix($accent, #999, .9) !important;
+  color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important;
 }
 
 .token.selector,
@@ -75,12 +75,13 @@ 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: transparentize(mix($accent, #999, 90%), .92);
+  background: color-mix(in srgb, var(--line-highlight-mix), transparent 92%);
   pointer-events: none;
   line-height: inherit;
   white-space: pre;
@@ -116,9 +117,9 @@ pre[class*="language-"] {
 }
 
 .code-toolbar {
-  $code-margin: 40px;
+  --code-margin: 40px;
 	position: relative;
-	margin: $code-margin 0;
+	margin: var(--code-margin) 0;
 	padding: 20px;
 	border: 1px solid rgba(255, 255, 255, .1);
 
@@ -126,7 +127,7 @@ pre[class*="language-"] {
 	+ .highlight,
 	+ .highlight .code-toolbar {
 		border-top: 0;
-		margin-top: calc(-1 * $code-margin);
+		margin-top: calc(-1 * var(--code-margin));
 	}
 
 	pre, code {
diff --git a/assets/css/terms.scss b/assets/css/terms.scss
index e2fcec9..d2525c2 100644
--- a/assets/css/terms.scss
+++ b/assets/css/terms.scss
@@ -8,7 +8,7 @@
 
     li {
       a {
-        color: $accent;
+        color: var(--accent);
       }
     }
 
@@ -16,7 +16,7 @@
       content: '-';
       position: absolute;
       left: -20px;
-      color: $accent;
+      color: var(--accent);
     }
   }
 }
diff --git a/assets/css/variables.scss b/assets/css/variables.scss
index 459cdad..70e44ad 100644
--- a/assets/css/variables.scss
+++ b/assets/css/variables.scss
@@ -1,8 +1,11 @@
-/* COLOR VARIABLES */
-$background: mix($accent, #1D1E28, 2%);
-$color: white;
-$border-color: rgba(255, 255, 255, .1);
+: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);
 
-/* MEDIA QUERIES */
-$phone: "max-width: 684px";
-$tablet: "max-width: 900px";
+  /* MEDIA QUERIES */
+  --phone: "max-width: 684px";
+  --tablet: "max-width: 900px";
+}
\ No newline at end of file
diff --git a/exampleSite/config.toml b/demoSite/config.toml
similarity index 76%
rename from exampleSite/config.toml
rename to demoSite/config.toml
index 30f695c..96efe12 100644
--- a/exampleSite/config.toml
+++ b/demoSite/config.toml
@@ -3,15 +3,6 @@ languageCode = "en-us"
 # theme = "hugo-theme-re-terminal"
 paginate = 5
 
-# Only for demo deploy perpous
-[module]
-[[module.mounts]]
-source = 'exampleSite/content'
-target = 'content'
-[[module.mounts]]
-source = 'exampleSite/static'
-target = 'static'
-
 [params]
 contentTypeName = "posts"
 themeColor = "blue"
@@ -46,3 +37,25 @@ url = "/about"
 identifier = "showcase"
 name = "Showcase"
 url = "/showcase"
+
+
+# Only for demo deploy perpous
+[module]
+[[module.mounts]]
+source = 'demoSite/content'
+target = 'content'
+[[module.mounts]]
+source = 'demoSite/static'
+target = 'static'
+[[module.mounts]]
+source = 'static'
+target = 'static'
+[[module.mounts]]
+source = 'demoSite/layouts'
+target = 'layouts'
+[[module.mounts]]
+source = 'layouts'
+target = 'layouts'
+[[module.mounts]]
+source = 'archetypes'
+target = 'archetypes'
diff --git a/exampleSite/content/about.md b/demoSite/content/about.md
similarity index 100%
rename from exampleSite/content/about.md
rename to demoSite/content/about.md
diff --git a/demoSite/content/posts/css-vars.md b/demoSite/content/posts/css-vars.md
new file mode 100644
index 0000000..6beba0d
--- /dev/null
+++ b/demoSite/content/posts/css-vars.md
@@ -0,0 +1,62 @@
++++
+title = "CSS Variables update"
+date = "2024-07-30"
+author = "Mirus"
+cover = "img/css-variables-update.webp"
+description = "A small demo of native CSS Variables. You can create your very own re-Terminal today!"
+layout = "css-vars-showcase"
+Toc=true
++++
+
+## What is going on?
+
+Hello. This is a first step toward color schema flexibility. 
+
+You still can use existing predefined `accent` colors from the list:
+- blue
+- green
+- orange
+- pink
+- red
+
+but if you need to pick another accent colors you can do it with the help of native CSS Variables.
+
+Just create, if you haven't any yet, `static/style.css`
+
+and redefine two CSS variables, like this 
+
+```css
+:root {
+  --accent: blue;
+  --accent-contrast-color: yellow;
+}
+```
+
+### Any other CSS Variable I should know? 
+
+You can find all of them in the browser's page inspector, but here is the list with default values anyway:
+
+```css
+  :root {
+    --accent: #23B0FF; /* 1 of 5 basic colors */
+    --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); /* background color; inherit shades of the accent */
+    --accent-contrast-color: black; /* mainly uses for text on the accent backgrounds but not limited */
+    --color: white; /* text color, also some other text use the variable in color mixing */
+    --border-color: rgba(255, 255, 255, .1); /* border color */
+    --phone: "max-width: 684px"; /* phone breakpoint */
+    --tablet: "max-width: 900px"; /* tablet breakpoint */
+
+    /* code syntax */
+    /* take a look at themes/re-terminal/assets/css/syntax.scss to understand in detail which color stands for */
+    --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); 
+    --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
+    --syntax-value-color: color-mix(in srgb, var(--accent), white);
+  }
+```
+
+
+### Future plans
+Already right now you can play with CSS Variables and achieve decent results, but I hope will work on some light-ish presets and maybe on exposing event more tokens to the users.
+
+
+## The interactive demo
\ No newline at end of file
diff --git a/exampleSite/content/posts/hello.md b/demoSite/content/posts/hello.md
similarity index 100%
rename from exampleSite/content/posts/hello.md
rename to demoSite/content/posts/hello.md
diff --git a/exampleSite/content/showcase.md b/demoSite/content/showcase.md
similarity index 97%
rename from exampleSite/content/showcase.md
rename to demoSite/content/showcase.md
index 1ffc150..08a22f3 100644
--- a/exampleSite/content/showcase.md
+++ b/demoSite/content/showcase.md
@@ -4,6 +4,9 @@ date: "2018-07-18"
 author: "Hello Robot"
 ---
 
+# Features in updates
+- [native CSS variables showcase](/posts/css-vars/)
+
 ## Header 2
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.
diff --git a/demoSite/layouts/posts/css-vars-showcase.html b/demoSite/layouts/posts/css-vars-showcase.html
new file mode 100644
index 0000000..2635b57
--- /dev/null
+++ b/demoSite/layouts/posts/css-vars-showcase.html
@@ -0,0 +1,51 @@
+{{ define "head" }}
+<style>
+  .color-container {
+    background-color: var(--accent);
+    padding: 10px;
+    color: var(--accent-contrast-color)
+  }
+</style>
+{{ end }}{{ define "main" }}
+<div class="post">
+  <!-- Common header, cover, etc. -->
+  {{ partial "single_basic.html" . }}
+
+  <form oninput="accentColor.value=accentColorPicker.value">
+    <output class="color-container" name="accentColor" for="accentColorPicker">#------</output>
+    <label>
+      Pick accent color
+      <input id="accentColorPicker" name="accentColorPicker" type="color" />
+    </label>
+  </form>
+  <form oninput="accentContrastColor.value=accentContrastColorPicker.value;">
+    <output class="color-container" name="accentContrastColor" for="accentContrastColorPicker">#------</output>
+    <label>
+      Pick accent contrast color
+      <input id="accentContrastColorPicker" name="accentContrastColorPicker" type="color" />
+    </label>
+  </form>
+
+  <script defer>
+    const root = document.querySelector(':root');
+
+    const accentPicker = document.getElementById("accentColorPicker");
+    const accentListener = accentPicker.addEventListener("input", () => {
+      if (accentPicker.value) {
+        root.style.setProperty('--accent', accentPicker.value);
+      }
+    })
+
+    const accentContrastPicker = document.getElementById("accentContrastColorPicker");
+    const accentContrastListener = accentContrastPicker.addEventListener("input", () => {
+      if (accentContrastPicker.value) {
+        root.style.setProperty('--accent-contrast-color', accentContrastPicker.value);
+      }
+    }) 
+  </script>
+
+  {{ if eq .Type $.Site.Params.contentTypeName }} {{ partial
+  "posts_pagination.html" . }} {{ end }} {{ if not (.Params.hideComments |
+  default false) }} {{ partial "comments.html" . }} {{ end }}
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/demoSite/static/img/css-variables-update.webp b/demoSite/static/img/css-variables-update.webp
new file mode 100644
index 0000000..057cce7
Binary files /dev/null and b/demoSite/static/img/css-variables-update.webp differ
diff --git a/exampleSite/static/img/hello.jpg b/demoSite/static/img/hello.jpg
similarity index 100%
rename from exampleSite/static/img/hello.jpg
rename to demoSite/static/img/hello.jpg
diff --git a/images/screenshot.png b/images/screenshot.png
index c5ae803..16a8a7b 100644
Binary files a/images/screenshot.png and b/images/screenshot.png differ
diff --git a/images/tn.png b/images/tn.png
index e6f363d..d6f0a90 100644
Binary files a/images/tn.png and b/images/tn.png differ