🔧 🚩 🚧 Finished the components variable replace content.

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'));
+    background: convert($reading_progress_color);
-    height: convert(hexo-config('reading_progress.height'));
+    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;

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)

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;
   }

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;
+  }
+}

assets/css/_common/components/third-party/gitter.styl

@@ -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;
-  }
-}

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;
   }

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;

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;

assets/css/_common/components/third-party/utterances.scss

@@ -1,4 +1,4 @@
-@if hexo-config('utterances.enable') {
+@if $utterances_enable {
   .utterances {
     max-width: unset;
   }

assets/css/_sitevars.scss

@@ -4,8 +4,8 @@
 // Base
 $scheme: {{ $P.scheme }};
 $darkmode: {{ $P.darkmode }};
-$theme_color_light: {{ $P.themeColor.light }};
 $theme_color_dark: {{ $P.themeColor.dark }};
+$theme_color_light: {{ $P.themeColor.light }};
 
 // Font
 $font_enable: {{ $P.font.enable }};
@@ -15,15 +15,40 @@ $font_title_size: {{ default $P.font.title.size 1.375 }};
 
 // Code & Code blocks
 // TODO find the configure variable
-$highlight_light_background: #000;
-$highlight_light_foreground: #222;
 $highlight_dark_background: #000;
 $highlight_dark_foreground: #222;
+$highlight_light_background: #000;
+$highlight_light_foreground: #222;
 
 // Sidebar
-$sidebar_position: {{ $P.sidebar.position }};
-$sidebar_padding: {{ $P.sidebar.padding }};
 $sidebar_offset: {{ $P.sidebar.offset }};
+$sidebar_padding: {{ $P.sidebar.padding }};
+$sidebar_position: {{ $P.sidebar.position }};
+$sidebar_width: {{ $P.sidebar.width }};
 
 // Note
 $note_light_bg_offset: {{ $P.note.lightBgOffset }};
+
+// 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 }};
+
+// 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 }};

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;

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});
 

assets/css/main.scss

@@ -7,7 +7,8 @@
 // Variables Layer
 // --------------------------------------------------
 @import '_variables/base';
-//@import '"_variables/" + theme.scheme';
+// TODO think how dynamic import the scheme variables
+@import '_variables/Gemini';
 //@import 'theme.injects.variable';
 
 // Mixins Layer
@@ -29,7 +30,7 @@
 // @import '_common/outline';
 
 // Components
-// @import '_common/components';
+@import '_common/components';
 
 
 // Schemes Layer

exampleSite/config.yaml

@@ -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.
@@ -292,7 +292,7 @@ params:
 
   # 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
@@ -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
@@ -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.