diff --git a/CHANGELOG.md b/CHANGELOG.md
index ba332842..a69dce59 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ All notable changes to this project will be documented in this file.
 - :bug: Fix: Giscus comments invalid config `inputPosition`
 - :bug: Fix: busuanzi logic error
 - :bug: Fix: close comment system logic error when the article was expired
+- :art: Style: add theme colors variables and add common color styles
 - :art: Style: add scroll bar for auto toc ([#136](https://github.com/Lruihao/FixIt/issues/136))
 - :wrench: Feat(cdn): add unpkg cdn support
 - :arrow_up: Chore(libs): update some third-party libraries
diff --git a/assets/css/_common.scss b/assets/css/_common.scss
index 0a744d27..12da77fb 100644
--- a/assets/css/_common.scss
+++ b/assets/css/_common.scss
@@ -39,4 +39,10 @@
 }
 .pe-1 {
   padding-right: 0.25rem !important;
+}
+
+@each $color, $value in $theme-colors {
+  .text-#{$color} {
+    color: #{$value} !important;
+  }
 }
\ No newline at end of file
diff --git a/assets/css/_root.scss b/assets/css/_root.scss
new file mode 100644
index 00000000..dba4d100
--- /dev/null
+++ b/assets/css/_root.scss
@@ -0,0 +1,7 @@
+:root {
+  // Note: Custom variable values only support SassScript inside `#{}`.
+
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+}
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index 4eec738a..88b5cdd5 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -3,6 +3,9 @@
 // ==============================
 
 // ========== Global ========== //
+// Prefix for :root CSS variables.
+$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;
 $global-font-size: 16px;
@@ -35,6 +38,24 @@ $global-link-hover-color-dark: #fff !default;
 // Color of the border
 $global-border-color: #f0f0f0 !default;
 $global-border-color-dark: #363636 !default;
+
+// Theme colors
+$primary: #1772ee !default;
+$secondary: #919191 !default;
+$success: #13ce66 !default;
+$info: #0dcaf0 !default;
+$warning: #ffba00 !default;
+$danger: #ff4949 !default;
+
+// Theme colors map
+$theme-colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'danger': $danger
+) !default;
 // ========== Global ========== //
 
 // ========== Scrollbar ========== //
@@ -94,7 +115,7 @@ $table-thead-color: #ededed !default;
 $table-thead-color-dark: #20252b !default;
 
 // Color of the blockquote
-$blockquote-color: #697681 !default; 
+$blockquote-color: #697681 !default;
 $blockquote-color-dark: #9ba3aa !default;
 // ========== Single Content ========== //
 
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 25e70eba..80ca600b 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -5,6 +5,7 @@
 
 @import "_mixin/index";
 
+@import "_root";
 @import "_core/base";
 @import "_core/layout";