diff --git a/assets/css/_colors.scss b/assets/css/_colors.scss
index 0f3ed70..391f348 100644
--- a/assets/css/_colors.scss
+++ b/assets/css/_colors.scss
@@ -29,7 +29,7 @@
   color-scheme: light;
 }
 
-@if hexo-config('darkmode') {
+@if $darkmode {
   @media (prefers-color-scheme: dark) {
     :root {
       --body-bg-color: #{$body-bg-color-dark};
diff --git a/assets/css/_common/components/back-to-top.scss b/assets/css/_common/components/back-to-top.scss
index 97316c8..e777bcf 100644
--- a/assets/css/_common/components/back-to-top.scss
+++ b/assets/css/_common/components/back-to-top.scss
@@ -1,14 +1,14 @@
-@if hexo-config('back2top.enable') {
+@if $back2top_enable {
   .back-to-top {
     font-size: $b2t-font-size;
 
-    @if not hexo-config('back2top.scrollpercent') {
+    @if not $back2top_scrollpercent {
       span {
         display: none;
       }
     }
 
-    @if hexo-config('back2top.sidebar') {
+    @if $back2top_sidebar {
       margin: 20px - $sidebar-offset -10px -20px;
       opacity: 0;
       transition: opacity $transition-ease;
@@ -29,7 +29,7 @@
       transition: bottom $transition-ease;
       @include sidebar-toggle();
 
-      @if not hexo-config('back2top.scrollpercent') {
+      @if not $back2top_scrollpercent {
         width: 24px;
       }
 
diff --git a/assets/css/_common/components/pages/tag-cloud.scss b/assets/css/_common/components/pages/tag-cloud.scss
index 7934c6a..011834b 100644
--- a/assets/css/_common/components/pages/tag-cloud.scss
+++ b/assets/css/_common/components/pages/tag-cloud.scss
@@ -15,7 +15,7 @@
   }
 }
 
-@if hexo-config('darkmode') {
+@if $darkmode {
   @media (prefers-color-scheme: dark) {
     @for $tag-cloud from 0 through 10 {
       $tag-cloud-color : mix($tag-cloud-end-dark, $tag-cloud-start-dark, $tag-cloud * 10);
diff --git a/assets/css/_common/components/post/index.scss b/assets/css/_common/components/post/index.scss
index a3bc4a2..34044f4 100644
--- a/assets/css/_common/components/post/index.scss
+++ b/assets/css/_common/components/post/index.scss
@@ -17,25 +17,25 @@
 }
 
 .use-motion {
-  @if hexo-config('motion.transition.post_block') {
+  @if $motion_trans_post_block {
     .post-block, .pagination, .comments {
       visibility: hidden;
     }
   }
 
-  @if hexo-config('motion.transition.post_header') {
+  @if $motion_trans_post_header {
     .post-header {
       visibility: hidden;
     }
   }
 
-  @if hexo-config('motion.transition.post_body') {
+  @if $motion_trans_post_body {
     .post-body {
       visibility: hidden;
     }
   }
 
-  @if hexo-config('motion.transition.coll_header') {
+  @if $motion_trans_coll_header {
     .collection-header {
       visibility: hidden;
     }
diff --git a/assets/css/_common/components/post/post-body.scss b/assets/css/_common/components/post/post-body.scss
index 0f96b5d..062d816 100644
--- a/assets/css/_common/components/post/post-body.scss
+++ b/assets/css/_common/components/post/post-body.scss
@@ -7,11 +7,11 @@
   }
 
   @include desktop() {
-    text-align: unquote(hexo-config('text_align.desktop'));
+    text-align: unquote($text_align_desktop);
   }
 
   @include tablet-mobile() {
-    text-align: unquote(hexo-config('text_align.mobile'));
+    text-align: unquote($text_align_mobile);
   }
 
   h1, h2, h3, h4, h5, h6 {
diff --git a/assets/css/_common/components/post/post-followme.scss b/assets/css/_common/components/post/post-followme.scss
index 7974b3f..34cfec9 100644
--- a/assets/css/_common/components/post/post-followme.scss
+++ b/assets/css/_common/components/post/post-followme.scss
@@ -1,4 +1,4 @@
-@if hexo-config('follow_me') {
+@if $follow_me {
   .followme {
     color: $grey;
     padding: 1em 1.5em;
diff --git a/assets/css/_common/components/post/post-footer.scss b/assets/css/_common/components/post/post-footer.scss
index 2726dab..fa231a5 100644
--- a/assets/css/_common/components/post/post-footer.scss
+++ b/assets/css/_common/components/post/post-footer.scss
@@ -18,7 +18,7 @@
   }
 }
 
-@if hexo-config('creative_commons.post') {
+@if $creative_commons_post {
   .post-copyright ul {
     list-style: none;
     padding: .5em 1em;
diff --git a/assets/css/_common/components/post/post-header.scss b/assets/css/_common/components/post/post-header.scss
index b3872d2..3c7eb44 100644
--- a/assets/css/_common/components/post/post-header.scss
+++ b/assets/css/_common/components/post/post-header.scss
@@ -10,7 +10,7 @@
   margin: initial;
   @include word-wrap();
 
-  @if hexo-config('post_edit.enable') {
+  @if $post_edit_enable {
     .post-edit-link {
       border-bottom: 0;
       color: $grey;
@@ -99,7 +99,7 @@
 }
 
 .post-meta-item-text {
-  @if not hexo-config('post_meta.item_text') {
+  @if not $post_meta_item_text {
     display: none;
   }
 
@@ -113,7 +113,7 @@
   height: 0;
 }
 
-@if hexo-config('busuanzi_count.enable') and hexo-config('busuanzi_count.post_views') {
+@if $busuanzi_enable and $busuanzi_post_views {
   #busuanzi_container_page_pv {
     display: none;
   }
diff --git a/assets/css/_common/components/post/post-reward.scss b/assets/css/_common/components/post/post-reward.scss
index 16fdc12..d96301e 100644
--- a/assets/css/_common/components/post/post-reward.scss
+++ b/assets/css/_common/components/post/post-reward.scss
@@ -28,7 +28,7 @@
       display: block;
     }
 
-    @if hexo-config('reward_settings.animation') {
+    @if $reward_settings_animation {
       &:hover span {
         animation: next-roll .1s infinite linear;
         // The animation may affect :hover of img in dark mode
diff --git a/assets/css/_common/components/reading-progress.scss b/assets/css/_common/components/reading-progress.scss
index a2bcb13..791dcc9 100644
--- a/assets/css/_common/components/reading-progress.scss
+++ b/assets/css/_common/components/reading-progress.scss
@@ -1,24 +1,24 @@
-@if hexo-config('reading_progress.enable') {
+@if $reading_progress_enable {
   .reading-progress-bar {
     --progress: 0;
-    background: convert(hexo-config('reading_progress.color'));
-    height: convert(hexo-config('reading_progress.height'));
+    background: convert($reading_progress_color);
+    height: convert($reading_progress_height);
     position: fixed;
     z-index: $zindex-5;
 
-    @if hexo-config('reading_progress.reversed') {
+    @if $reading_progress_reversed {
       width: calc(100% - var(--progress));
     } @else {
       width: var(--progress);
     }
 
-    @if hexo-config('reading_progress.start_at') == 'right' {
+    @if $reading_progress_start == 'right' {
       right: 0;
     } @else {
       left: 0;
     }
 
-    @if hexo-config('reading_progress.position') == 'bottom' {
+    @if $reading_progress_position == 'bottom' {
       bottom: 0;
     } @else {
       top: 0;
diff --git a/assets/css/_common/components/third-party/disqusjs.styl b/assets/css/_common/components/third-party/disqusjs.scss
similarity index 93%
rename from assets/css/_common/components/third-party/disqusjs.styl
rename to assets/css/_common/components/third-party/disqusjs.scss
index 1662456..2c38803 100644
--- a/assets/css/_common/components/third-party/disqusjs.styl
+++ b/assets/css/_common/components/third-party/disqusjs.scss
@@ -1,4 +1,4 @@
-if (hexo-config('disqusjs.enable') and hexo-config('darkmode')) {
+@if $disqusjs_enable and $darkmode {
   @media (prefers-color-scheme:dark) {
     html #dsqjs a {
       color: var(--link-color)
diff --git a/assets/css/_common/components/third-party/gitalk.scss b/assets/css/_common/components/third-party/gitalk.scss
index 52f7934..735c9d5 100644
--- a/assets/css/_common/components/third-party/gitalk.scss
+++ b/assets/css/_common/components/third-party/gitalk.scss
@@ -1,4 +1,4 @@
-@if hexo-config('gitalk.enable') {
+@if $gitalk_enable {
   .gt-header a, .gt-comments a, .gt-popup a {
     border-bottom: 0;
   }
diff --git a/assets/css/_common/components/third-party/gitter.scss b/assets/css/_common/components/third-party/gitter.scss
new file mode 100644
index 0000000..8a1986e
--- /dev/null
+++ b/assets/css/_common/components/third-party/gitter.scss
@@ -0,0 +1,7 @@
+@if $gitter_enable {
+  .gitter-open-chat-button {
+    $alignment : sidebar-toggle-alignment(false);
+    #{$alignment[0]}: auto !important;
+    #{$alignment[1]}: 10px !important;
+  }
+}
diff --git a/assets/css/_common/components/third-party/gitter.styl b/assets/css/_common/components/third-party/gitter.styl
deleted file mode 100644
index ced2490..0000000
--- a/assets/css/_common/components/third-party/gitter.styl
+++ /dev/null
@@ -1,7 +0,0 @@
-if (hexo-config('gitter.enable')) {
-  .gitter-open-chat-button {
-    $alignment = sidebar-toggle-alignment(false);
-    {$alignment[0]}: auto !important;
-    {$alignment[1]}: 10px !important;
-  }
-}
diff --git a/assets/css/_common/components/third-party/math.scss b/assets/css/_common/components/third-party/math.scss
index 87bb78b..46883b2 100644
--- a/assets/css/_common/components/third-party/math.scss
+++ b/assets/css/_common/components/third-party/math.scss
@@ -1,4 +1,4 @@
-@if hexo-config('math.mathjax.enable') {
+@if $math_mathjax_enable {
   mjx-container[jax='CHTML'][display='true'], .has-jax {
     overflow: auto hidden;
   }
diff --git a/assets/css/_common/components/third-party/related-posts.scss b/assets/css/_common/components/third-party/related-posts.scss
index 0c16dad..1ce37f1 100644
--- a/assets/css/_common/components/third-party/related-posts.scss
+++ b/assets/css/_common/components/third-party/related-posts.scss
@@ -1,4 +1,4 @@
-@if hexo-config('related_posts.enable') {
+@if $related_posts_enable {
   .popular-posts-header {
     border-bottom: 1px solid $gainsboro;
     font-size: $font-size-large;
diff --git a/assets/css/_common/components/third-party/search.scss b/assets/css/_common/components/third-party/search.scss
index 4748079..ca5e9a5 100644
--- a/assets/css/_common/components/third-party/search.scss
+++ b/assets/css/_common/components/third-party/search.scss
@@ -1,4 +1,4 @@
-@if hexo-config('local_search.enable') or hexo-config('algolia_search.enable') {
+@if $local_search_enable or $algolia_search_enable {
   .search-active {
     overflow: hidden;
   }
@@ -56,7 +56,7 @@
 
     .search-header {
       background: $gainsboro;
-      if (hexo-config('darkmode')) {
+      @if $darkmode {
         @media (prefers-color-scheme: dark) {
           background: $grey-dim;
         }
@@ -108,7 +108,7 @@
   }
 }
 
-@if hexo-config('algolia_search.enable') {
+@if $algolia_search_enable {
   .search-input-container {
     flex-grow: 1;
 
@@ -149,7 +149,7 @@
   }
 }
 
-@if hexo-config('local_search.enable') {
+@if $local_search_enable {
   .search-popup {
     .search-input-container {
       flex-grow: 1;
diff --git a/assets/css/_common/components/third-party/utterances.scss b/assets/css/_common/components/third-party/utterances.scss
index 7dd3c92..d324d55 100644
--- a/assets/css/_common/components/third-party/utterances.scss
+++ b/assets/css/_common/components/third-party/utterances.scss
@@ -1,4 +1,4 @@
-@if hexo-config('utterances.enable') {
+@if $utterances_enable {
   .utterances {
     max-width: unset;
   }
diff --git a/assets/css/_common/outline/footer/index.scss b/assets/css/_common/outline/footer/index.scss
index 4cba027..34b8f7b 100644
--- a/assets/css/_common/outline/footer/index.scss
+++ b/assets/css/_common/outline/footer/index.scss
@@ -66,16 +66,16 @@
 }
 
 .with-love {
-  color: hexo-config('footer.icon.color');
+  color: $footer_icon_color;
   display: inline-block;
   margin: 0 5px;
 
-  @if hexo-config('footer.icon.animated') {
+  @if $footer_icon_animated {
     animation: icon-animate 1.33s ease-in-out infinite;
   }
 }
 
-@if hexo-config('footer.beian.enable') and hexo-config('footer.beian.gongan_icon_url') {
+@if $footer_beian_enable {
   .beian img {
     display: inline-block;
     margin: 0 3px;
@@ -83,15 +83,14 @@
   }
 }
 
-@if hexo-config('busuanzi_count.enable') {
+@if $busuanzi_enable {
   .busuanzi-count {
-    @if hexo-config('busuanzi_count.total_visitors') {
+    @if $busuanzi_visitors {
       #busuanzi_container_site_uv {
         display: none;
       }
     }
-
-    @if hexo-config('busuanzi_count.total_views') {
+    @if $busuanzi_views {
       #busuanzi_container_site_pv {
         display: none;
       }
diff --git a/assets/css/_common/outline/header/bookmark.scss b/assets/css/_common/outline/header/bookmark.scss
index c7a7587..28876ce 100644
--- a/assets/css/_common/outline/header/bookmark.scss
+++ b/assets/css/_common/outline/header/bookmark.scss
@@ -1,4 +1,4 @@
-@if hexo-config('bookmark.enable') {
+@if $bookmark_enable {
   .book-mark-link {
     border-bottom: 0;
     position: fixed;
@@ -11,7 +11,7 @@
     }
 
     &::before {
-      color: convert(hexo-config('bookmark.color'));
+      color: convert($bookmark_color);
       font-size: 32px;
       line-height: 1;
       @include font-family-icons('\f02e');
diff --git a/assets/css/_common/outline/header/github-banner.scss b/assets/css/_common/outline/header/github-banner.scss
index 82c5203..918384b 100644
--- a/assets/css/_common/outline/header/github-banner.scss
+++ b/assets/css/_common/outline/header/github-banner.scss
@@ -1,4 +1,4 @@
-@if hexo-config('github_banner.enable') {
+@if $github_banner_enable {
   @keyframes octocat-wave {
     0%, 100% {
       transform: rotate(0);
@@ -28,7 +28,7 @@
     }
 
     @include tablet-mobile() {
-      @if hexo-config('local_search.enable') or hexo-config('algolia_search.enable') {
+      @if $local_search_enable or $algolia_search_enable {
         display: none;
       }
 
diff --git a/assets/css/_common/outline/mobile.scss b/assets/css/_common/outline/mobile.scss
index 71502c9..8282056 100644
--- a/assets/css/_common/outline/mobile.scss
+++ b/assets/css/_common/outline/mobile.scss
@@ -5,7 +5,7 @@
 }
 */
 
-@if hexo-config('mobile_layout_economy') {
+@if $mobile_layout_economy {
   @include mobile-small() {
     // For Pisces & Gemini schemes only wider width (remove main blocks in Gemini).
     .main-inner {
@@ -56,7 +56,7 @@
         margin-bottom: 10px !important;
         padding: 10px !important;
 
-        @if hexo-config('note.icons') {
+        @if $note_icons {
           &:not(.no-icon) {
             padding-left: 35px !important;
           }
diff --git a/assets/css/_common/outline/sidebar/sidebar-author-links.scss b/assets/css/_common/outline/sidebar/sidebar-author-links.scss
index 0ad756e..3479984 100644
--- a/assets/css/_common/outline/sidebar/sidebar-author-links.scss
+++ b/assets/css/_common/outline/sidebar/sidebar-author-links.scss
@@ -3,7 +3,7 @@
     font-size: $font-size-smaller;
   }
 
-  @if not hexo-config('social_icons.icons_only') {
+  @if not $social_icons_only {
     .fa, .fab, .far, .fas {
       margin-right: 2px;
     }
diff --git a/assets/css/_common/outline/sidebar/sidebar-author.scss b/assets/css/_common/outline/sidebar/sidebar-author.scss
index 7eb67ec..b903716 100644
--- a/assets/css/_common/outline/sidebar/sidebar-author.scss
+++ b/assets/css/_common/outline/sidebar/sidebar-author.scss
@@ -3,11 +3,11 @@
   max-width: $site-author-image-width;
   padding: 2px;
 
-  @if hexo-config('avatar.rounded') {
+  @if $avatar_rounded {
     border-radius: 50%;
   }
 
-  @if hexo-config('avatar.rotated') {
+  @if $avatar_rotated {
     transition: transform 1s ease-out;
 
     &:hover {
diff --git a/assets/css/_common/outline/sidebar/sidebar-toc.scss b/assets/css/_common/outline/sidebar/sidebar-toc.scss
index 86b0eb8..d378d7c 100644
--- a/assets/css/_common/outline/sidebar/sidebar-toc.scss
+++ b/assets/css/_common/outline/sidebar/sidebar-toc.scss
@@ -1,4 +1,4 @@
-@if hexo-config('toc.enable') {
+@if $toc_enable {
   .post-toc {
     font-size: $font-size-small;
 
@@ -22,14 +22,14 @@
       overflow: hidden;
       text-overflow: ellipsis;
 
-      @if not hexo-config('toc.wrap') {
+      @if not $toc_wrap {
         white-space: nowrap;
       }
     }
 
     .nav {
       .nav-child {
-        display: if(hexo-config('toc.expand_all'), block, none);
+        display: if($toc_expand_all, block, none);
       }
 
       .active > .nav-child {
diff --git a/assets/css/_common/outline/sidebar/sidebar-toggle.scss b/assets/css/_common/outline/sidebar/sidebar-toggle.scss
index 0fafdea..4347f6e 100644
--- a/assets/css/_common/outline/sidebar/sidebar-toggle.scss
+++ b/assets/css/_common/outline/sidebar/sidebar-toggle.scss
@@ -12,10 +12,10 @@
 
 @media (any-hover: hover) {
   body:not(.sidebar-active) .sidebar-toggle:hover {
-    @include toggle-arrow(hexo-config('sidebar.position'));
+    @include toggle-arrow($sidebar_position);
   }
 }
 
 .sidebar-active .sidebar-toggle {
-  @include toggle-close(hexo-config('sidebar.position'));
+  @include toggle-close($sidebar_position);
 }
diff --git a/assets/css/_common/outline/sidebar/site-state.scss b/assets/css/_common/outline/sidebar/site-state.scss
index 123b049..08068e8 100644
--- a/assets/css/_common/outline/sidebar/site-state.scss
+++ b/assets/css/_common/outline/sidebar/site-state.scss
@@ -1,4 +1,4 @@
-@if hexo-config('site_state') {
+@if $site_state {
   .site-state {
     @include flex-wrap();
     line-height: 1.4;
diff --git a/assets/css/_common/scaffolding/base.scss b/assets/css/_common/scaffolding/base.scss
index 610ead2..3f3e049 100644
--- a/assets/css/_common/scaffolding/base.scss
+++ b/assets/css/_common/scaffolding/base.scss
@@ -18,7 +18,7 @@ body {
   position: relative;
   transition: padding $transition-ease;
 
-  @if hexo-config('body_scrollbar.overlay') {
+  @if $body_scrollbar_overlay {
     overflow-x: hidden;
     @supports (overflow-x: clip) {
       overflow-x: clip;
@@ -26,7 +26,7 @@ body {
     width: 100vw;
   }
 
-  @if hexo-config('body_scrollbar.stable') {
+  @if $body_scrollbar_stable {
     overflow-y: scroll;
   }
 }
diff --git a/assets/css/_common/scaffolding/highlight/copy-code.scss b/assets/css/_common/scaffolding/highlight/copy-code.scss
index b350a2c..0b28ff4 100644
--- a/assets/css/_common/scaffolding/highlight/copy-code.scss
+++ b/assets/css/_common/scaffolding/highlight/copy-code.scss
@@ -11,13 +11,13 @@
   position: absolute;
   transition: opacity $transition-ease;
 
-  @if hexo-config('codeblock.copy_button.style') == 'flat' {
+  @if $codeblock_copy_btn_style == 'flat' {
     background: white;
     border: 0;
     font-size: $font-size-smaller;
     right: 0;
     top: 0;
-  } @else if hexo-config('codeblock.copy_button.style') == 'mac' {
+  } @else if $codeblock_copy_btn_style == 'mac' {
     color: var(--highlight-foreground);
     font-size: 14px;
     right: 0;
@@ -33,7 +33,7 @@
   }
 }
 
-@if hexo-config('codeblock.copy_button.style') == 'mac' {
+@if $codeblock_copy_btn_style == 'mac' {
   figure.highlight {
     border-radius: 5px;
     box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
diff --git a/assets/css/_common/scaffolding/highlight/index.scss b/assets/css/_common/scaffolding/highlight/index.scss
index 106e21e..caad07d 100644
--- a/assets/css/_common/scaffolding/highlight/index.scss
+++ b/assets/css/_common/scaffolding/highlight/index.scss
@@ -1,14 +1,15 @@
 // Use `@use` to fix issue #67
-@import '(theme.highlight.enable && theme.highlight.light.file) ? theme.highlight.light.file : null';
-@import '(theme.prism.enable && theme.prism.light) ? theme.prism.light : null';
-@import '(theme.prism.enable && theme.prism.number) ? theme.prism.number : null';
+// TODO find way to import file by dynmatic
+// @import '(theme.highlight.enable && theme.highlight.light.file) ? theme.highlight.light.file : null';
+// @import '(theme.prism.enable && theme.prism.light) ? theme.prism.light : null';
+// @import '(theme.prism.enable && theme.prism.number) ? theme.prism.number : null';
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   @import '(theme.darkmode && theme.highlight.enable && theme.highlight.dark.file) ? theme.highlight.dark.file : null';
   @import '(theme.darkmode && theme.prism.enable && theme.prism.dark) ? theme.prism.dark : null';
-}
+} */
 
-@import 'theme.codeblock.copy_button.enable ? "copy-code" : null';
+// @import 'theme.codeblock.copy_button.enable ? "copy-code" : null';
 
 // Placeholder: %code-inline %code-block
 %code-inline {
diff --git a/assets/css/_common/scaffolding/tags/label.scss b/assets/css/_common/scaffolding/tags/label.scss
index e4c953c..44d464b 100644
--- a/assets/css/_common/scaffolding/tags/label.scss
+++ b/assets/css/_common/scaffolding/tags/label.scss
@@ -1,4 +1,4 @@
-@use 'sass:map';
+//@use 'sass:map';
 
 .post-body .label {
   color: $text-color;
@@ -6,7 +6,7 @@
 
   @each $type in $note-types {
     &.#{$type} {
-      background: map.get($label, $type);
+      background: map-get($label, $type);
     }
   }
 }
diff --git a/assets/css/_common/scaffolding/tags/mermaid.scss b/assets/css/_common/scaffolding/tags/mermaid.scss
index 22ff864..ab8b522 100644
--- a/assets/css/_common/scaffolding/tags/mermaid.scss
+++ b/assets/css/_common/scaffolding/tags/mermaid.scss
@@ -1,4 +1,4 @@
-@if hexo-config('mermaid.enable') {
+@if $mermaid_enable {
   .mermaid {
     margin-bottom: 20px;
     text-align: center;
diff --git a/assets/css/_common/scaffolding/tags/note.scss b/assets/css/_common/scaffolding/tags/note.scss
index d95d39a..877e097 100644
--- a/assets/css/_common/scaffolding/tags/note.scss
+++ b/assets/css/_common/scaffolding/tags/note.scss
@@ -1,9 +1,9 @@
-@use 'sass:map';
+//@use 'sass:map';
 
-@if hexo-config('note.style') != 'disabled' {
+@if $note_style != 'disabled' {
   .post-body .note {
-    $note-icons : hexo-config('note.icons');
-    $note-style : hexo-config('note.style');
+    $note-icons : $note_icons;
+    $note-style : $note_style;
 
     border-radius: $note-border-radius;
     margin-bottom: 20px;
@@ -67,44 +67,44 @@
     @each $type in $note-types {
       &.#{$type} {
         @if $note-style == 'flat' {
-          background: map.get($note-bg, $type);
-          @if hexo-config('darkmode') {
+          background: map-get($note-bg, $type);
+          @if $darkmode {
             @media (prefers-color-scheme: dark) {
-              background: mix(map.get($note-bg, $type), $body-bg-color-dark, 10%);
+              background: mix(map-get($note-bg, $type), $body-bg-color-dark, 10%);
             }
           }
         }
 
         @if $note-style == 'modern' {
-          background: map.get($note-modern-bg, $type);
-          border-color: map.get($note-modern-border, $type);
-          color: map.get($note-modern-text, $type);
+          background: map-get($note-modern-bg, $type);
+          border-color: map-get($note-modern-border, $type);
+          color: map-get($note-modern-text, $type);
 
           a:not(.btn) {
-            border-bottom-color: map.get($note-modern-text, $type);
-            color: map.get($note-modern-text, $type);
+            border-bottom-color: map-get($note-modern-text, $type);
+            color: map-get($note-modern-text, $type);
 
             &:hover {
-              border-bottom-color: map.get($note-modern-hover, $type);
-              color: map.get($note-modern-hover, $type);
+              border-bottom-color: map-get($note-modern-hover, $type);
+              color: map-get($note-modern-hover, $type);
             }
           }
         }
 
         @if $note-style != 'modern' {
-          border-left-color: map.get($note-border, $type);
+          border-left-color: map-get($note-border, $type);
 
           h2, h3, h4, h5, h6 {
-            color: map.get($note-text, $type);
+            color: map-get($note-text, $type);
           }
         }
 
         @if $note-icons {
           &:not(.no-icon)::before {
-            @include font-family-icons(map.get($note-icon, $type));
+            @include font-family-icons(map-get($note-icon, $type));
 
             @if $note-style != 'modern' {
-              color: map.get($note-text, $type);
+              color: map-get($note-text, $type);
             }
           }
         }
diff --git a/assets/css/_common/scaffolding/tags/pdf.scss b/assets/css/_common/scaffolding/tags/pdf.scss
index a08d9cb..e61cad9 100644
--- a/assets/css/_common/scaffolding/tags/pdf.scss
+++ b/assets/css/_common/scaffolding/tags/pdf.scss
@@ -1,7 +1,7 @@
-@if hexo-config('pdf.enable') {
+@if $pdf_enable {
   .pdfobject-container {
     iframe, embed {
-      height: convert(hexo-config('pdf.height'));
+      height: convert($pdf_height);
       width: 100%;
     }
   }
diff --git a/assets/css/_common/scaffolding/tags/tabs.scss b/assets/css/_common/scaffolding/tags/tabs.scss
index 5ce758c..5c0217c 100644
--- a/assets/css/_common/scaffolding/tags/tabs.scss
+++ b/assets/css/_common/scaffolding/tags/tabs.scss
@@ -42,7 +42,7 @@
         border-radius: $tbr;
       }
 
-      @if hexo-config('tabs.transition.tabs') {
+      @if $tabs_transition_tabs {
         transition: all $transition-ease-out;
       }
 
@@ -57,7 +57,7 @@
           width: (18em / 14);
         }
 
-        @if hexo-config('tabs.transition.labels') {
+        @if $tabs_transition_labels {
           transition: all $transition-ease-out;
         }
       }
diff --git a/assets/css/_common/scaffolding/toggles.scss b/assets/css/_common/scaffolding/toggles.scss
index 54cd930..bbc3c0d 100644
--- a/assets/css/_common/scaffolding/toggles.scss
+++ b/assets/css/_common/scaffolding/toggles.scss
@@ -18,9 +18,9 @@
 }
 
 .toggle.toggle-arrow {
-  @include toggle-arrow(hexo-config('sidebar.position'));
+  @include toggle-arrow($sidebar_position);
 }
 
 .toggle.toggle-close {
-  @include toggle-close(hexo-config('sidebar.position'));
+  @include toggle-close($sidebar_position);
 }
diff --git a/assets/css/_mixins.scss b/assets/css/_mixins.scss
index 59cdf9c..7685639 100644
--- a/assets/css/_mixins.scss
+++ b/assets/css/_mixins.scss
@@ -117,7 +117,7 @@
 }
 
 @function sidebar-toggle-alignment($reverse) {
-  $condition : hexo-config('sidebar.position') == 'right';
+  $condition : $sidebar_position == 'right';
   @if ($scheme == 'Muse') or ($scheme == 'Mist') {
     $condition : $condition == $reverse;
   }
@@ -125,7 +125,9 @@
 }
 
 @mixin sidebar-toggle-position($reverse) {
-  $alignment : list.nth(sidebar-toggle-alignment($reverse), 0);
+  // TODO how use nth function.
+  //$alignment : list.nth(sidebar-toggle-alignment($reverse), 0);
+  $alignment : 0;
   #{$alignment}: $b2t-position-right;
   @include tablet-mobile() {
     #{$alignment}: $b2t-position-right-mobile;
diff --git a/assets/css/_schemes/Muse/_sidebar.scss b/assets/css/_schemes/Muse/_sidebar.scss
index d1651f5..27aff87 100644
--- a/assets/css/_schemes/Muse/_sidebar.scss
+++ b/assets/css/_schemes/Muse/_sidebar.scss
@@ -1,4 +1,4 @@
-@if hexo-config('sidebar.position') == 'right' {
+@if $sidebar_position == 'right' {
   .sidebar-active {
     @include desktop() {
       padding-right: $sidebar-desktop;
@@ -31,7 +31,7 @@
 .sidebar {
   background: $black-deep;
   bottom: 0;
-  @if not hexo-config('back2top.sidebar') {
+  @if not $back2top_sidebar {
     box-shadow: inset 0 2px 6px black;
   }
   position: fixed;
@@ -63,7 +63,7 @@
     margin-right: 10px;
     vertical-align: middle;
 
-    @if hexo-config('social_icons.transition') {
+    @if $social_icons_transition {
       transition: all $transition-ease;
     }
 
@@ -78,7 +78,7 @@
 }
 
 .links-of-blogroll-item {
-  @if hexo-config('links_settings.layout') == 'inline' {
+  @if $links_settings_layout == 'inline' {
     display: inline-block;
   }
   padding: 2px 10px;
diff --git a/assets/css/_schemes/Pisces/_layout.scss b/assets/css/_schemes/Pisces/_layout.scss
index aa4a732..621ee85 100644
--- a/assets/css/_schemes/Pisces/_layout.scss
+++ b/assets/css/_schemes/Pisces/_layout.scss
@@ -18,7 +18,7 @@
   justify-content: space-between;
   @include main-container();
 
-  @if hexo-config('sidebar.position') == 'right' {
+  @if $sidebar_position == 'right' {
     flex-direction: row-reverse;
   }
 
@@ -40,7 +40,7 @@
 }
 
 .footer-inner {
-  @if hexo-config('sidebar.position') == 'right' {
+  @if $sidebar_position == 'right' {
     padding-right: $sidebar-desktop + $sidebar-offset;
   } @else {
     padding-left: $sidebar-desktop + $sidebar-offset;
diff --git a/assets/css/_schemes/Pisces/_menu.scss b/assets/css/_schemes/Pisces/_menu.scss
index a3c396d..abacc7b 100644
--- a/assets/css/_schemes/Pisces/_menu.scss
+++ b/assets/css/_schemes/Pisces/_menu.scss
@@ -31,7 +31,7 @@
   }
 }
 
-@if not hexo-config('menu_settings.badges') {
+@if not $menu_settings_badges {
   .main-menu .menu-item-active::after {
     background: $grey;
     border-radius: 50%;
diff --git a/assets/css/_schemes/Pisces/_sidebar.scss b/assets/css/_schemes/Pisces/_sidebar.scss
index 775e9e0..be53aa0 100644
--- a/assets/css/_schemes/Pisces/_sidebar.scss
+++ b/assets/css/_schemes/Pisces/_sidebar.scss
@@ -10,7 +10,7 @@
     display: none;
   }
 
-  @if hexo-config('motion.enable') and hexo-config('motion.transition.sidebar') {
+  @if $motion_enable and $motion_transition_sidebar {
     visibility: hidden;
   }
 }
@@ -56,7 +56,7 @@
 .links-of-author-item {
   @include sidebar-inline-links-item();
 
-  @if not hexo-config('social_icons.icons_only') {
+  @if not $social_icons_only {
     width: 50%;
   }
 
@@ -72,14 +72,14 @@
 }
 
 .links-of-blogroll-item {
-  @if hexo-config('links_settings.layout') == 'inline' {
+  @if $links_settings_layout == 'inline' {
     display: inline-block;
     max-width: 100%;
     @include sidebar-inline-links-item();
   }
 }
 
-@if hexo-config('back2top.sidebar') {
+@if $back2top_sidebar {
   // Only when back2top.sidebar is true, apply the following styles
   .back-to-top {
     background: var(--body-bg-color);
diff --git a/assets/css/_sitevars.scss b/assets/css/_sitevars.scss
new file mode 100644
index 0000000..566fb43
--- /dev/null
+++ b/assets/css/_sitevars.scss
@@ -0,0 +1,119 @@
+// All variables from site's config content.
+{{- $P := .Site.Params -}}
+
+// Base
+$scheme: {{ $P.scheme }};
+$darkmode: {{ $P.darkmode }};
+
+$body_scrollbar_overlay: {{ $P.bodyScrollbar.overlay }};
+$body_scrollbar_stable: {{ $P.bodyScrollbar.stable }};
+$mermaid_enable: {{ $P.mermaid.enable }};
+$mobile_layout_economy: {{ $P.mobileLayoutEconomy }};
+$theme_color_dark: {{ $P.themeColor.dark }};
+$theme_color_light: {{ $P.themeColor.light }};
+
+// Header
+$bookmark_color: {{ $P.bookmark.color }};
+$bookmark_enable: {{ $P.bookmark.enable }};
+$github_banner_enable: {{ $P.githubBanner.enable }};
+$menu_settings_badges: {{ $P.menuSets.badges }};
+
+// Footer
+$footer_icon_color: {{ $P.footer.icon.color }};
+$footer_icon_animated: {{ $P.footer.icon.animated }};
+$footer_beian_enable: {{ $P.footer.beian.enable }};
+
+// Counter
+$busuanzi_enable: {{ $P.busuanzi.enable }};
+$busuanzi_visitors: {{ $P.busuanzi.visitors }};
+$busuanzi_views: {{ $P.busuanzi.views }};
+$busuanzi_post_views: {{ $P.busuanzi.postViews }};
+
+// Font
+$font_enable: {{ $P.font.enable }};
+$font_global_size: {{ default $P.font.global.size 1 }};
+$font_headings_size: {{ default $P.font.headings.size 1.625 }};
+$font_title_size: {{ default $P.font.title.size 1.375 }};
+
+// Code & Code blocks
+// TODO find the configure variable
+$highlight_dark_background: #000;
+$highlight_dark_foreground: #222;
+$highlight_light_background: #000;
+$highlight_light_foreground: #222;
+
+$codeblock_copy_btn_style: {{ $P.codeblock.copyBtn.style }};
+
+// Sidebar
+$sidebar_offset: {{ $P.sidebar.offset }};
+$sidebar_padding: {{ $P.sidebar.padding }};
+$sidebar_position: {{ $P.sidebar.position }};
+$sidebar_width: {{ $P.sidebar.width }};
+
+$motion_enable: {{ $P.motion.enable }};
+$motion_transition_sidebar: {{ $P.motion.transition.sidebar }};
+
+$back2top_enable: {{ $P.backTop.enable }};
+$back2top_scrollpercent: {{ $P.backTop.scrollpercent }};
+$back2top_sidebar: {{ $P.backTop.sidebar }};
+
+$avatar_rotated: {{ $P.avatar.rotated }};
+$avatar_rounded: {{ $P.avatar.rounded }};
+$avatar_rounded: {{ $P.avatar.rounded }};
+$site_state: {{ $P.siteState }};
+$social_icons_only: {{ $P.socialIcons.iconsOnly }};
+$social_icons_transition: {{ $P.socialIcons.transition }};
+$links_settings_layout: {{ $P.linksSets.layout }};
+$toc_enable: {{ $P.toc.enable }};
+$toc_expand_all: {{ $P.toc.expandAll }};
+$toc_wrap: {{ $P.toc.wrap }};
+
+// Posts
+$creative_commons_post: {{ $P.creativeCommons.post }};
+$follow_me: {{ isset $P "followMe" }};
+$motion_trans_coll_header: {{ $P.motion.transition.collHeader }};
+$motion_trans_post_block: {{ $P.motion.transition.postBlock }};
+$motion_trans_post_body: {{ $P.motion.transition.postBody }};
+$motion_trans_post_header: {{ $P.motion.transition.postHeader }};
+$post_edit_enable: {{ $P.postEdit.enable }};
+$post_meta_item_text: {{ $P.postMeta.itemText }};
+$reward_settings_animation: {{ $P.rewardSets.animation }};
+
+// TODO find the paramters
+$text_align_desktop: center;
+$text_align_mobile: center;
+
+// Note
+$note_icons: {{ $P.note.icons }};
+$note_light_bg_offset: {{ $P.note.lightBgOffset }};
+$note_style: {{ $P.note.style }};
+
+// Tabs
+$tabs_transition_labels: {{ $P.tabs.transition.labels }};
+$tabs_transition_tabs: {{ $P.tabs.transition.tabs }};
+
+// Reading progress bar
+$reading_progress_start: {{ $P.readingProgress.start }}; 
+$reading_progress_color: {{ $P.readingProgress.color }}; 
+$reading_progress_enable: {{ $P.readingProgress.enable }}; 
+$reading_progress_height: {{ $P.readingProgress.height }}; 
+$reading_progress_position: {{ $P.readingProgress.position }}; 
+$reading_progress_reversed: {{ $P.readingProgress.reversed }}; 
+
+// Thirdparty
+$math_mathjax_enable: {{ $P.math.mathjax.enable }};
+$related_posts_enable: {{ $P.relatedPosts.enable }};
+$pdf_enable: {{ $P.pdf.enable }};
+$pdf_height: {{ $P.pdf.height }};
+
+// Search engine
+$algolia_search_enable: {{ $P.algoliaSearch.enable }};
+$local_search_enable: {{ $P.localSearch.enable }};
+
+// Online IM
+$gitalk_enable: {{ $P.gitalk.enable }};
+$gitter_enable: {{ $P.gitter.enable }};
+
+// Comment
+$disqusjs_enable: {{ $P.disqusjs.enable }};
+$utterances_enable: {{ $P.utterances.enable }};
diff --git a/assets/css/_variables/Muse.scss b/assets/css/_variables/Muse.scss
index e5d17e9..b0000af 100644
--- a/assets/css/_variables/Muse.scss
+++ b/assets/css/_variables/Muse.scss
@@ -1,7 +1,7 @@
 // Variables of Muse scheme
 // ==================================================
 
-$sidebar-width           : if(type-of(hexo-config('sidebar.width')) == number, hexo-config('sidebar.width'), 320);
+$sidebar-width           : if(type-of($sidebar_width) == number, $sidebar_width, 320);
 $sidebar-desktop         : $sidebar-width * 1px;
 
 $content-padding-bottom     : 60px;
diff --git a/assets/css/_variables/Pisces.scss b/assets/css/_variables/Pisces.scss
index 4dd3672..83eecbc 100644
--- a/assets/css/_variables/Pisces.scss
+++ b/assets/css/_variables/Pisces.scss
@@ -5,7 +5,7 @@
 // --------------------------------------------------
 $body-bg-color                : #f5f7f9;
 
-$sidebar-width                : if(type-of(hexo-config('sidebar.width')) == number, hexo-config('sidebar.width'), 240);
+$sidebar-width                : if(type-of($sidebar_width) == number, $sidebar_width, 240);
 $sidebar-desktop              : $sidebar-width * 1px;
 $content-wrap                 : calc(100% - #{$sidebar-width + $sidebar-offset});
 
diff --git a/assets/css/_variables/base.scss b/assets/css/_variables/base.scss
index 635854a..0fcd2b7 100644
--- a/assets/css/_variables/base.scss
+++ b/assets/css/_variables/base.scss
@@ -1,4 +1,4 @@
-@use 'sass:map';
+//@use 'sass:map';
 
 //
 // Variables
@@ -68,14 +68,16 @@ $card-bg-color-dark           : $black-light;
 $menu-item-bg-color           : $whitesmoke;
 $menu-item-bg-color-dark      : $black-light;
 
-$theme-color                  = convert(hexo-config('theme_color.light'));
-$theme-color-dark             = convert(hexo-config('theme_color.dark'));
+$theme-color                  : convert($theme_color_light);
+$theme-color-dark             : convert($theme_color_dark);
 
 // Typography
 // Font, line-height, and elements colors.
 // --------------------------------------------------
 @function get-font-family($config) {
-  $custom-family : hexo-config('font.' + $config + '.family');
+  //TODO find the way daymatic variable
+  $custom-family: $config;
+  //$custom-family : hexo-config('font.' + $config + '.family');
   @return if(type-of($custom-family) == string, unquote($custom-family), null);
 }
 
@@ -109,7 +111,7 @@ $font-family-monospace    : consolas, Menlo, monospace, $font-family-chinese;
 
 
 // Font size
-$font-size-base           : if((hexo-config('font.enable') and type-of(hexo-config('font.global.size')) == number), hexo-config('font.global.size') * 1em, 1em);
+$font-size-base           : if($font_enable and (type-of($font_global_size) == number), $font_global_size * 1em, 1em);
 $font-size-smallest       : .75em;
 $font-size-smaller        : .8125em;
 $font-size-small          : .875em;
@@ -121,7 +123,7 @@ $font-size-largest        : 1.5em;
 
 // Headings font size
 $font-size-headings-step  : .125em;
-$font-size-headings-base  : if((hexo-config('font.enable') and type-of(hexo-config('font.headings.size')) == number), hexo-config('font.headings.size') * 1em, 1.625em);
+$font-size-headings-base  : if($font_enable and (type-of($font_headings_size) == number), $font_headings_size * 1em, 1.625em);
 
 
 // Global line height
@@ -155,13 +157,13 @@ $table-row-hover-bg-color-dark  : #363636;
 // --------------------------------------------------
 $code-font-family               : $font-family-monospace;
 
-$highlight-background        : hexo-config('highlight.light.background');
-$highlight-foreground        : hexo-config('highlight.light.foreground');
+$highlight-background        : $highlight_light_background;
+$highlight-foreground        : $highlight_light_foreground;
 $highlight-gutter-background : mix($highlight-background, $highlight-foreground, 90%);
 $highlight-gutter-foreground : mix($highlight-background, $highlight-foreground, 10%);
 
-$highlight-background-dark        : hexo-config('highlight.dark.background');
-$highlight-foreground-dark        : hexo-config('highlight.dark.foreground');
+$highlight-background-dark        : $highlight_dark_background;
+$highlight-foreground-dark        : $highlight_dark_foreground;
 $highlight-gutter-background-dark : mix($highlight-background-dark, $highlight-foreground-dark, 90%);
 $highlight-gutter-foreground-dark : mix($highlight-background-dark, $highlight-foreground-dark, 10%);
 
@@ -228,7 +230,7 @@ $brand-hover-color              : white;
 $brand-color-dark               : $grey-lighter;
 $brand-hover-color-dark         : $grey-lighter;
 
-$font-size-title                : if((hexo-config('font.enable') and type-of(hexo-config('font.title.size')) == number), hexo-config('font.title.size') * 1em, 1.375em);
+$font-size-title                : if($font_enable and (type-of($font_title_size) == number), $font_title_size * 1em, 1.375em);
 $font-size-subtitle             : $font-size-smaller;
 $subtitle-color                 : $grey-dark;
 $site-subtitle-color            : $grey-dark;
@@ -252,8 +254,8 @@ $tag-cloud-end-dark   : #eee;
 // Variables for sidebar section elements.
 // --------------------------------------------------
 
-$sidebar-padding                      : if(type-of(hexo-config('sidebar.padding')) == number, hexo-config('sidebar.padding') * 1px, 18px);
-$sidebar-offset                       : if(type-of(hexo-config('sidebar.offset')) == number, hexo-config('sidebar.offset') * 1px, 12px);
+$sidebar-padding                      : if(type-of($sidebar_padding) == number, $sidebar_padding * 1px, 18px);
+$sidebar-offset                       : if(type-of($sidebar_offset) == number, $sidebar_offset * 1px, 12px);
 $sidebar-nav-color                    : $grey-dim;
 $sidebar-nav-hover-color              : $whitesmoke;
 $sidebar-highlight                    : $blue-bright;
@@ -299,7 +301,7 @@ $post-card-margin             : 1em 0 0;
 // Note colors
 // --------------------------------------------------
 // Read note light_bg_offset from NexT config and set in '$lbg%' to use it as string variable.
-$lbg : if(type-of(hexo-config('note.light_bg_offset')) == number, hexo-config('note.light_bg_offset') * 1%, 0);
+$lbg : if(type-of($note_light_bg_offset) == number, $note_light_bg_offset * 1%, 0);
 $note-types : 'default' 'primary' 'info' 'success' 'warning' 'danger';
 
 $note-border-radius : 3px;
@@ -314,21 +316,21 @@ $note-border : (
 );
 
 $note-bg : (
-  'default' : lighten(adjust-hue(map.get($note-border, 'default'), 0), 94% + $lbg),
-  'primary' : lighten(adjust-hue(map.get($note-border, 'primary'), 10), 92% + $lbg),
-  'info'    : lighten(adjust-hue(map.get($note-border, 'info'), -10), 91% + $lbg),
-  'success' : lighten(adjust-hue(map.get($note-border, 'success'), 10), 90% + $lbg),
-  'warning' : lighten(adjust-hue(map.get($note-border, 'warning'), 10), 88% + $lbg),
-  'danger'  : lighten(adjust-hue(map.get($note-border, 'danger'), -10), 92% + $lbg)
+  'default' : lighten(adjust-hue(map-get($note-border, 'default'), 0), 94% + $lbg),
+  'primary' : lighten(adjust-hue(map-get($note-border, 'primary'), 10), 92% + $lbg),
+  'info'    : lighten(adjust-hue(map-get($note-border, 'info'), -10), 91% + $lbg),
+  'success' : lighten(adjust-hue(map-get($note-border, 'success'), 10), 90% + $lbg),
+  'warning' : lighten(adjust-hue(map-get($note-border, 'warning'), 10), 88% + $lbg),
+  'danger'  : lighten(adjust-hue(map-get($note-border, 'danger'), -10), 92% + $lbg)
 );
 
 $note-text : (
-  'default' : map.get($note-border, 'default'),
-  'primary' : map.get($note-border, 'primary'),
-  'info'    : map.get($note-border, 'info'),
-  'success' : map.get($note-border, 'success'),
-  'warning' : map.get($note-border, 'warning'),
-  'danger'  : map.get($note-border, 'danger')
+  'default' : map-get($note-border, 'default'),
+  'primary' : map-get($note-border, 'primary'),
+  'info'    : map-get($note-border, 'info'),
+  'success' : map-get($note-border, 'success'),
+  'warning' : map-get($note-border, 'warning'),
+  'danger'  : map-get($note-border, 'danger')
 );
 
 $note-icon : (
@@ -350,12 +352,12 @@ $note-modern-border : (
 );
 
 $note-modern-bg : (
-  'default' : lighten(adjust-hue(map.get($note-modern-border, 'default'), 10), 60% + ($lbg * 4)),
-  'primary' : lighten(adjust-hue(map.get($note-modern-border, 'primary'), 10), 40% + ($lbg * 4)),
-  'info'    : lighten(adjust-hue(map.get($note-modern-border, 'info'), 10), 50% + ($lbg * 4)),
-  'success' : lighten(adjust-hue(map.get($note-modern-border, 'success'), 10), 40% + ($lbg * 4)),
-  'warning' : lighten(adjust-hue(map.get($note-modern-border, 'warning'), 10), 43% + ($lbg * 4)),
-  'danger'  : lighten(adjust-hue(map.get($note-modern-border, 'danger'), 10), 35% + ($lbg * 4))
+  'default' : lighten(adjust-hue(map-get($note-modern-border, 'default'), 10), 60% + ($lbg * 4)),
+  'primary' : lighten(adjust-hue(map-get($note-modern-border, 'primary'), 10), 40% + ($lbg * 4)),
+  'info'    : lighten(adjust-hue(map-get($note-modern-border, 'info'), 10), 50% + ($lbg * 4)),
+  'success' : lighten(adjust-hue(map-get($note-modern-border, 'success'), 10), 40% + ($lbg * 4)),
+  'warning' : lighten(adjust-hue(map-get($note-modern-border, 'warning'), 10), 43% + ($lbg * 4)),
+  'danger'  : lighten(adjust-hue(map-get($note-modern-border, 'danger'), 10), 35% + ($lbg * 4))
 );
 
 $note-modern-text : (
@@ -368,12 +370,12 @@ $note-modern-text : (
 );
 
 $note-modern-hover : (
-  'default' : darken(adjust-hue(map.get($note-modern-text, 'default'), -10), 32%),
-  'primary' : darken(adjust-hue(map.get($note-modern-text, 'primary'), -10), 22%),
-  'info'    : darken(adjust-hue(map.get($note-modern-text, 'info'), -10), 32%),
-  'success' : darken(adjust-hue(map.get($note-modern-text, 'success'), -10), 27%),
-  'warning' : darken(adjust-hue(map.get($note-modern-text, 'warning'), -10), 18%),
-  'danger'  : darken(adjust-hue(map.get($note-modern-text, 'danger'), -10), 22%)
+  'default' : darken(adjust-hue(map-get($note-modern-text, 'default'), -10), 32%),
+  'primary' : darken(adjust-hue(map-get($note-modern-text, 'primary'), -10), 22%),
+  'info'    : darken(adjust-hue(map-get($note-modern-text, 'info'), -10), 32%),
+  'success' : darken(adjust-hue(map-get($note-modern-text, 'success'), -10), 27%),
+  'warning' : darken(adjust-hue(map-get($note-modern-text, 'warning'), -10), 18%),
+  'danger'  : darken(adjust-hue(map-get($note-modern-text, 'danger'), -10), 22%)
 );
 
 
@@ -385,10 +387,10 @@ $tbr                        : 0;
 // Label colors
 // --------------------------------------------------
 $label : (
-  'default' : lighten(adjust-hue(map.get($note-border, 'default'), 0), 89% + $lbg),
-  'primary' : lighten(adjust-hue(map.get($note-border, 'primary'), 10), 87% + $lbg),
-  'info'    : lighten(adjust-hue(map.get($note-border, 'info'), -10), 86% + $lbg),
-  'success' : lighten(adjust-hue(map.get($note-border, 'success'), 10), 85% + $lbg),
-  'warning' : lighten(adjust-hue(map.get($note-border, 'warning'), 10), 83% + $lbg),
-  'danger'  : lighten(adjust-hue(map.get($note-border, 'danger'), -10), 87% + $lbg)
+  'default' : lighten(adjust-hue(map-get($note-border, 'default'), 0), 89% + $lbg),
+  'primary' : lighten(adjust-hue(map-get($note-border, 'primary'), 10), 87% + $lbg),
+  'info'    : lighten(adjust-hue(map-get($note-border, 'info'), -10), 86% + $lbg),
+  'success' : lighten(adjust-hue(map-get($note-border, 'success'), 10), 85% + $lbg),
+  'warning' : lighten(adjust-hue(map-get($note-border, 'warning'), 10), 83% + $lbg),
+  'danger'  : lighten(adjust-hue(map-get($note-border, 'danger'), -10), 87% + $lbg)
 );
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 0d8e4df..9db36b8 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -7,13 +7,14 @@
 // Variables Layer
 // --------------------------------------------------
 @import '_variables/base';
-@import '"_variables/" + theme.scheme';
-@import 'theme.injects.variable';
+// TODO think how dynamic import the scheme variables
+@import '_variables/Gemini';
+//@import 'theme.injects.variable';
 
 // Mixins Layer
 // --------------------------------------------------
 @import '_mixins';
-@import 'theme.injects.mixin';
+//@import 'theme.injects.mixin';
 
 // Dark mode colors
 // --------------------------------------------------
@@ -34,9 +35,9 @@
 
 // Schemes Layer
 // --------------------------------------------------
-@import '"_schemes/" + theme.scheme';
+@import '_schemes/Gemini/';
 
 
 // Custom Layer
 // --------------------------------------------------
-@import 'theme.injects.style';
+// @import 'theme.injects.style';
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 6c64a95..f4e2bd1 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -41,10 +41,10 @@ params:
   # ---------------------------------------------------------------
 
   # Schemes
-  scheme: Muse
+  #scheme: Muse
   #scheme: Mist
   #scheme: Pisces
-  #scheme: Gemini
+  scheme: Gemini
 
   # Dark Mode
   darkmode: false
@@ -66,7 +66,7 @@ params:
 
   # Creative Commons 4.0 International License.
   # See: https://creativecommons.org/about/cclicenses/
-  creative_commons:
+  creativeCommons:
     # Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
     license: by-nc-sa
     # Available values: big | small
@@ -110,7 +110,7 @@ params:
     #commonweal: /404/ || fa fa-heartbeat
 
   # Enable / Disable menu icons / item badges.
-  menu_settings:
+  menuSets:
     icons: true
     badges: false
 
@@ -128,7 +128,7 @@ params:
     # Manual define the sidebar width. If commented, will be default for:
     # Muse | Mist: 320
     # Pisces | Gemini: 240
-    #width: 300
+    width: 300
 
     # Sidebar Display (only for Muse | Mist), available values:
     #  - post    expand on posts automatically. Default.
@@ -152,7 +152,7 @@ params:
     rotated: false
 
   # Posts / Categories / Tags in sidebar.
-  site_state: true
+  siteState: true
 
   # Social Links
   # Usage: `Key: permalink || icon`
@@ -170,13 +170,13 @@ params:
     #Instagram: https://instagram.com/yourname || fab fa-instagram
     #Skype: skype:yourname?call|chat || fab fa-skype
 
-  social_icons:
+  socialIcons:
     enable: true
-    icons_only: false
+    iconsOnly: false
     transition: false
 
   # Blog rolls
-  links_settings:
+  linksSets:
     icon: fa fa-globe
     title: Links
     # Available values: block | inline
@@ -194,9 +194,9 @@ params:
     # If true, all words will placed on next lines if header width longer then sidebar width.
     wrap: false
     # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
-    expand_all: false
+    expandAll: false
     # Maximum heading depth of generated toc.
-    max_depth: 6
+    maxDepth: 6
 
 
   # ---------------------------------------------------------------
@@ -251,12 +251,12 @@ params:
   read_more_btn: true
 
   # Post meta display settings
-  post_meta:
-    item_text: true
-    created_at: true
-    updated_at:
+  postMeta:
+    itemText: true
+    created: true
+    updated:
       enable: true
-      another_day: true
+      anotherDay: true
     categories: true
 
   # Post wordcount display settings
@@ -270,7 +270,7 @@ params:
 
   # Donate (Sponsor) settings
   # Front-matter variable (nonsupport animation).
-  reward_settings:
+  rewardSets:
     # If true, a donate button will be displayed in every article by default.
     enable: false
     animation: false
@@ -284,29 +284,29 @@ params:
 
   # Subscribe through Telegram Channel, Twitter, etc.
   # Usage: `Key: permalink || icon` (Font Awesome)
-  follow_me:
-    #Twitter: https://twitter.com/username || fab fa-twitter
+  followMe:
+    Twitter: https://twitter.com/username || fab fa-twitter
     #Telegram: https://t.me/channel_name || fab fa-telegram
     #WeChat: /images/wechat_channel.jpg || fab fa-weixin
     #RSS: /atom.xml || fa fa-rss
 
   # Related popular posts
   # Dependencies: https://github.com/sergeyzwezdin/hexo-related-posts
-  related_posts:
+  relatedPosts:
     enable: false
     title: # Custom header, leave empty to use the default one
     display_in_home: false
 
   # Post edit
   # Easily browse and edit blog source code online.
-  post_edit:
+  postEdit:
     enable: false
     url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name/ # Link for view source
     #url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/ # Link for fork & edit
 
   # Show previous post and next post in post footer if exists
   # Available values: left | right | false
-  post_navigation: left
+  postNavigation: left
 
 
   # ---------------------------------------------------------------
@@ -346,21 +346,21 @@ params:
   preconnect: false
 
   # Set the text alignment in posts / pages.
-  text_align:
+  textAlign:
     # Available values: start | end | left | right | center | justify | justify-all | match-parent
     desktop: justify
     mobile: justify
 
   # Reduce padding / margin indents on devices with narrow width.
-  mobile_layout_economy: false
+  mobileLayoutEconomy: false
 
   # Browser header panel color.
-  theme_color:
+  themeColor:
     light: "#222"
     dark: "#222"
 
   # Override browsers' default behavior.
-  body_scrollbar:
+  bodyScrollbar:
     # Place the scrollbar over the content.
     overlay: false
     # Present the scrollbar even if the content is not overflowing.
@@ -376,12 +376,12 @@ params:
       light: prism
       dark: prism-dark
     # Add copy button on codeblock
-    copy_button:
+    copyBtn:
       enable: false
       # Available values: default | flat | mac
-      style:
+      style: default
 
-  back2top:
+  backTop:
     enable: true
     # Back to top in sidebar.
     sidebar: false
@@ -389,10 +389,10 @@ params:
     scrollpercent: false
 
   # Reading progress bar
-  reading_progress:
+  readingProgress:
     enable: false
     # Available values: left | right
-    start_at: left
+    start: left
     # Available values: top | bottom
     position: top
     reversed: false
@@ -409,7 +409,7 @@ params:
     save: auto
 
   # `Follow me on GitHub` banner in the top-right corner.
-  github_banner:
+  githubBanner:
     enable: false
     permalink: https://github.com/yourname
     title: Follow me on GitHub
@@ -722,14 +722,14 @@ params:
 
   # Show Views / Visitors of the website / page with busuanzi.
   # For more information: http://ibruce.info/2015/04/04/busuanzi/
-  busuanzi_count:
+  busuanzi:
     enable: false
-    total_visitors: true
-    total_visitors_icon: fa fa-user
-    total_views: true
-    total_views_icon: fa fa-eye
-    post_views: true
-    post_views_icon: far fa-eye
+    visitors: true
+    visitorsIcon: fa fa-user
+    views: true
+    viewsIcon: fa fa-eye
+    postViews: true
+    postViewsIcon: far fa-eye
 
 
   # ---------------------------------------------------------------
@@ -739,14 +739,14 @@ params:
 
   # Algolia Search
   # For more information: https://www.algolia.com
-  algolia_search:
+  algoliaSearch:
     enable: false
     hits:
       per_page: 10
 
   # Local Search
   # Dependencies: https://github.com/next-theme/hexo-generator-searchdb
-  local_search:
+  localSearch:
     enable: false
     # If auto, trigger search by changing input.
     # If manual, trigger search by pressing enter key or search button.
@@ -810,7 +810,7 @@ params:
     icons: false
     # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
     # Offset also applied to label tag variables. This option can work with disabled note tag.
-    light_bg_offset: 0
+    lightBgOffset: 0
 
   # Tabs tag
   tabs:
@@ -849,10 +849,10 @@ params:
     async: false
     transition:
       # All available transition variants: https://theme-next.js.org/animate/
-      post_block: fadeIn
-      post_header: fadeInDown
-      post_body: fadeInDown
-      coll_header: fadeInLeft
+      postBlock: fadeIn
+      postHeader: fadeInDown
+      postBody: fadeInDown
+      collHeader: fadeInLeft
       # Only for Pisces | Gemini.
       sidebar: fadeInUp
 
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index e69de29..808ea3d 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -0,0 +1,6 @@
+{{- $scssVars := resources.Get "css/_sitevars.scss"}}
+{{- $scssVars = $scssVars | resources.ExecuteAsTemplate "sitevars.scss" . }}
+{{- $scssMain := resources.Get "css/main.scss" }}
+{{- $scss := slice $scssVars $scssMain | resources.Concat "css/main.scss" }}
+{{- $css := $scss | toCSS (dict "targetPath" "/css/main.css" "outputStyle" "expanded") }}
+<link rel="stylesheet" href="{{ $css.RelPermalink }}">
\ No newline at end of file