diff --git a/assets/css/_core/_common.scss b/assets/css/_core/_common.scss
index 38404b5c..c2d8d869 100644
--- a/assets/css/_core/_common.scss
+++ b/assets/css/_core/_common.scss
@@ -44,6 +44,10 @@
 @each $color, $value in $theme-colors {
   .text-#{$color} {
     color: #{$value} !important;
+
+    [data-theme='dark'] & {
+      color: #{darken($value, 5%)} !important;
+    }
   }
 }
 
diff --git a/assets/css/_core/_root.scss b/assets/css/_core/_root.scss
index 6a7dbd33..fa85c2d0 100644
--- a/assets/css/_core/_root.scss
+++ b/assets/css/_core/_root.scss
@@ -3,9 +3,9 @@
 
   // Theme colors varibles
   @each $color, $value in $theme-colors {
-    --#{$prefix}-#{$color}: #{$value};
+    --#{$prefix}#{$color}: #{$value};
   }
   @each $color, $value in $theme-colors {
-    --#{$prefix}-#{$color}-dark: #{darken($value, 5%)};
+    --#{$prefix}#{$color}-dark: #{darken($value, 5%)};
   }
 }
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
index 0cfbcc73..f829f0ec 100644
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -10,13 +10,13 @@
     line-height: 140%;
   
     .icon-repost {
-      color: var(--fi-success);
+      color: var(--#{$prefix}success);
       display: inline-block;
       width: max-content;
       margin-right: 0.25rem;
 
       [data-theme='dark'] & {
-        color: var(--fi-success-dark);
+        color: var(--#{$prefix}success-dark);
       }
     }
   }
diff --git a/assets/css/_partials/_widgets/_noscript-warning.scss b/assets/css/_partials/_widgets/_noscript-warning.scss
index d226f2f8..c8f6687b 100644
--- a/assets/css/_partials/_widgets/_noscript-warning.scss
+++ b/assets/css/_partials/_widgets/_noscript-warning.scss
@@ -1,5 +1,5 @@
 .noscript-warning {
-  background-color: var(--fi-danger);
+  background-color: var(--#{$prefix}danger);
   color: white;
   font-size: 1rem;
   font-weight: bold;
@@ -11,6 +11,6 @@
   z-index: 150;
 
   [data-theme='dark'] & {
-    background-color: var(--fi-danger-dark);
+    background-color: var(--#{$prefix}danger-dark);
   }
 }
diff --git a/assets/css/_partials/_widgets/_reading-progress.scss b/assets/css/_partials/_widgets/_reading-progress.scss
index 76546c38..487c42de 100644
--- a/assets/css/_partials/_widgets/_reading-progress.scss
+++ b/assets/css/_partials/_widgets/_reading-progress.scss
@@ -2,11 +2,11 @@
   --progress: 0;
   height: var(--progress-h, 2px);
   width: var(--progress);
-  background-color: var(--bg-progress, var(--fi-info));
+  background-color: var(--bg-progress, var(--#{$prefix}info));
   z-index: 150;
   position: fixed;
   
   [data-theme="dark"] & {
-    background-color: var(--bg-progress-dark, var(--fi-info-dark));
+    background-color: var(--bg-progress-dark, var(--#{$prefix}info-dark));
   }
 }
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index eff38abd..fb783810 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -4,7 +4,7 @@
 
 // ========== Global ========== //
 // Prefix for :root CSS variables.
-$prefix: fi !default;
+$prefix: fi- !default;
 
 // Font and Line Height
 $global-font-family: system-ui, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei UI, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif !default;