diff --git a/backend/src/main/java/io/metersphere/controller/SystemParameterController.java b/backend/src/main/java/io/metersphere/controller/SystemParameterController.java
index 8fd47d8dc0..bcc25df6f9 100644
--- a/backend/src/main/java/io/metersphere/controller/SystemParameterController.java
+++ b/backend/src/main/java/io/metersphere/controller/SystemParameterController.java
@@ -39,6 +39,11 @@ public class SystemParameterController {
         return SystemParameterService.getVersion();
     }
 
+    @GetMapping("/theme")
+    public String getTheme() {
+        return SystemParameterService.getValue("ui.theme");
+    }
+
     @GetMapping("/mail/info")
     @RequiresRoles(value = {RoleConstants.ADMIN})
     public MailInfo mailInfo() {
diff --git a/frontend/src/business/App.vue b/frontend/src/business/App.vue
index d547ff19dd..76368547c8 100644
--- a/frontend/src/business/App.vue
+++ b/frontend/src/business/App.vue
@@ -8,18 +8,20 @@
     <el-row id="header-top" type="flex" justify="space-between" align="middle">
       <el-col :span="12">
         <img :src="'/display/file/logo'" class="logo" alt="">
-        <ms-top-menus/>
+        <ms-top-menus :color="color"/>
       </el-col>
 
       <el-col :span="12" class="align-right">
         <!-- float right -->
         <ms-user/>
-        <ms-language-switch/>
-        <ms-header-org-ws/>
+        <ms-language-switch :color="color"/>
+        <ms-header-org-ws :color="color"/>
       </el-col>
     </el-row>
 
     <ms-view/>
+
+    <theme/>
   </el-col>
 </template>
 
@@ -29,12 +31,14 @@ import MsView from "./components/common/router/View";
 import MsUser from "./components/common/head/HeaderUser";
 import MsHeaderOrgWs from "./components/common/head/HeaderOrgWs";
 import MsLanguageSwitch from "./components/common/head/LanguageSwitch";
-import {saveLocalStorage} from "@/common/js/utils";
+import {hasLicense, saveLocalStorage, setColor, setOriginColor} from "@/common/js/utils";
 import {registerRequestHeaders} from "@/common/js/ajax";
+import {ORIGIN_COLOR} from "@/common/js/constants";
 
 const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
 const header = requireComponent.keys().length > 0 ? requireComponent("./license/LicenseMessage.vue") : {};
 const display = requireComponent.keys().length > 0 ? requireComponent("./display/Display.vue") : {};
+const theme = requireComponent.keys().length > 0 ? requireComponent("./display/Theme.vue") : {};
 
 export default {
   name: 'app',
@@ -45,16 +49,27 @@ export default {
       auth: false,
       header: {},
       logoId: '_blank',
+      color: ''
     }
   },
   created() {
+    registerRequestHeaders();
+    if (!hasLicense()) {
+      setOriginColor()
+      this.color = ORIGIN_COLOR;
+    } else {
+      //
+      this.$get('/system/theme', res => {
+        this.color = res.data ? res.data : ORIGIN_COLOR;
+        setColor(this.color, this.color, this.color, this.color);
+      })
+    }
     if (localStorage.getItem("store")) {
       this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem("store"))))
     }
     window.addEventListener("beforeunload", () => {
       localStorage.setItem("store", JSON.stringify(this.$store.state))
     })
-    registerRequestHeaders();
   },
   beforeCreate() {
     this.$get("/isLogin").then(response => {
@@ -83,7 +98,8 @@ export default {
     MsView,
     MsTopMenus,
     MsHeaderOrgWs,
-    "LicenseMessage": header.default
+    "LicenseMessage": header.default,
+    "Theme": theme.default
   }
 }
 </script>
@@ -93,7 +109,7 @@ export default {
 #header-top {
   width: 100%;
   padding: 0 10px;
-  background-color: rgb(44, 42, 72);
+  background-color: var(--color);
   color: rgb(245, 245, 245);
   font-size: 14px;
   height: 40px;
diff --git a/frontend/src/business/components/api/definition/components/list/ApiListContainerWithDoc.vue b/frontend/src/business/components/api/definition/components/list/ApiListContainerWithDoc.vue
index 53dcb75a05..f3544bbe7c 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiListContainerWithDoc.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiListContainerWithDoc.vue
@@ -74,16 +74,16 @@ export default {
 
 .active {
   border: solid 1px #6d317c;
-  background-color: #7C3985;
+  background-color: var(--color);
   color: #FFFFFF;
 }
 
 .case-button {
-  border-left: solid 1px #6d317c;
+  border-left: solid 1px var(--color);
 }
 
 .item{
-  border: solid 1px #6d317c;
+  border: solid 1px var(--color);
 }
 
 </style>
diff --git a/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue b/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
index 5785c09907..a1988d2a19 100644
--- a/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
@@ -147,7 +147,7 @@ export default {
 .count-number{
   font-family:'ArialMT', 'Arial', sans-serif;
   font-size:33px;
-  color: #6C317C;
+  color: var(--count_number);
 }
 
 .main-number-show {
@@ -155,7 +155,7 @@ export default {
   height: 100px;
   border-style: solid;
   border-width: 7px;
-  border-color: #CDB9D2;
+  border-color: var(--count_number_shallow);
   border-radius:50%;
 
 }
diff --git a/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue b/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
index 0f5a5db41f..e048e5c050 100644
--- a/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
@@ -137,7 +137,7 @@ export default {
 .count-number{
   font-family:'ArialMT', 'Arial', sans-serif;
   font-size:33px;
-  color: #6C317C;
+  color: var(--count_number);
   margin:20px auto;
 }
 
@@ -146,7 +146,7 @@ export default {
   height: 100px;
   border-style: solid;
   border-width: 7px;
-  border-color: #CDB9D2;
+  border-color: var(--count_number_shallow);
   border-radius:50%;
 }
 
diff --git a/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue b/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
index 6f9d952ab6..158d819c6b 100644
--- a/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
@@ -124,7 +124,7 @@ export default {
 .count-number{
   font-family:'ArialMT', 'Arial', sans-serif;
   font-size:33px;
-  color: #6C317C;
+  color: var(--count_number);
 }
 
 .main-number-show {
@@ -132,7 +132,7 @@ export default {
   height: 100px;
   border-style: solid;
   border-width: 7px;
-  border-color: #CDB9D2;
+  border-color: var(--count_number_shallow);
   border-radius:50%;
 
 }
diff --git a/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue b/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
index 51c80c0f69..7e61bfbde7 100644
--- a/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
@@ -173,7 +173,7 @@ export default {
 .count-number{
   font-family:'ArialMT', 'Arial', sans-serif;
   font-size:33px;
-  color: #6C317C;
+  color: var(--count_number);
 }
 
 .main-number-show {
@@ -181,7 +181,7 @@ export default {
   height: 100px;
   border-style: solid;
   border-width: 7px;
-  border-color: #CDB9D2;
+  border-color: var(--count_number_shallow);
   border-radius:50%;
 
 }
diff --git a/frontend/src/business/components/common/head/HeaderOrgWs.vue b/frontend/src/business/components/common/head/HeaderOrgWs.vue
index 7a88e5947c..afb0f29954 100644
--- a/frontend/src/business/components/common/head/HeaderOrgWs.vue
+++ b/frontend/src/business/components/common/head/HeaderOrgWs.vue
@@ -1,7 +1,7 @@
 <template>
   <el-menu :unique-opened="true" mode="horizontal" router
            class="header-user-menu align-right"
-           background-color="#2c2a48"
+           :background-color="color"
            active-text-color="#fff"
            default-active="1"
            text-color="#fff">
@@ -80,7 +80,10 @@ export default {
   computed: {
     currentUser: () => {
       return getCurrentUser();
-    }
+    },
+  },
+  props: {
+    color: String
   },
   watch: {
     searchOrg(val) {
@@ -189,7 +192,7 @@ export default {
 
 ::-webkit-scrollbar-thumb {
   border-radius: 1em;
-  background-color: #595591;
+  background-color: var(--color_shallow);
   position: fixed;
 }
 
@@ -207,12 +210,12 @@ export default {
 .search-input {
   padding: 0;
   margin-top: -4px;
-  background-color: #595591;
+  background-color: var(--color_shallow);
 }
 
 .search-input >>> .el-input__inner {
   border-radius: 0;
-  background-color: #2d2a49;
+  background-color: var(--color);
   color: #d2ced8;
   border-color: #b4aebe;
 }
diff --git a/frontend/src/business/components/common/head/HeaderTopMenus.vue b/frontend/src/business/components/common/head/HeaderTopMenus.vue
index 6eb32cd171..9302489710 100644
--- a/frontend/src/business/components/common/head/HeaderTopMenus.vue
+++ b/frontend/src/business/components/common/head/HeaderTopMenus.vue
@@ -1,6 +1,6 @@
 <template>
   <el-menu mode="horizontal" menu-trigger="click"
-           background-color="#2c2a48"
+           :background-color="color"
            class="header-top-menus"
            text-color="#F2F2F2"
            active-text-color="#fff"
@@ -40,6 +40,9 @@
         isReport: isReport
       }
     },
+    props: {
+      color: String
+    },
     watch: {
       '$route'(to) {
         if (to.matched.length > 0) {
diff --git a/frontend/src/business/components/common/head/LanguageSwitch.vue b/frontend/src/business/components/common/head/LanguageSwitch.vue
index b10e8bf854..abf9dea6cc 100644
--- a/frontend/src/business/components/common/head/LanguageSwitch.vue
+++ b/frontend/src/business/components/common/head/LanguageSwitch.vue
@@ -1,7 +1,7 @@
 <template>
   <el-menu :unique-opened="true" class="header-user-menu align-right"
            mode="horizontal"
-           background-color="#2c2a48"
+           :background-color="color"
            text-color="#fff"
            active-text-color="#fff"
   >
@@ -18,8 +18,8 @@
 </template>
 
 <script>
-  import {DEFAULT_LANGUAGE, EN_US, TokenKey, ZH_CN, ZH_TW} from '../../../../common/js/constants';
-  import {getCurrentUser} from "../../../../common/js/utils";
+import {DEFAULT_LANGUAGE, EN_US, TokenKey, ZH_CN, ZH_TW} from '../../../../common/js/constants';
+import {getCurrentUser} from "../../../../common/js/utils";
 
   export default {
     name: "MsLanguageSwitch",
@@ -34,6 +34,9 @@
         }
       };
     },
+    props: {
+      color: String
+    },
     created() {
       let lang = this.currentUser().language;
       this.currentUserInfo = this.currentUser();
diff --git a/frontend/src/business/components/xpack b/frontend/src/business/components/xpack
index c950d9dcff..5330c06878 160000
--- a/frontend/src/business/components/xpack
+++ b/frontend/src/business/components/xpack
@@ -1 +1 @@
-Subproject commit c950d9dcffa06b1239bd36c7d24d3d28e95cfe83
+Subproject commit 5330c068787fc227b17fb6720f48329b81c3c7d8
diff --git a/frontend/src/common/css/main.css b/frontend/src/common/css/main.css
index 6cffe9887d..34a336f689 100644
--- a/frontend/src/common/css/main.css
+++ b/frontend/src/common/css/main.css
@@ -14,6 +14,12 @@ body {
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
   font-size: 14px;
   margin: 0;
+  /*--color: #2c2a48;*/
+  /*--color_shallow: #595591;*/
+  --color: '';
+  --color_shallow: '';
+  --count_number: '';
+  --count_number_shallow: '';
 }
 
 /* 解决 document.body.clientHeight 为0 */
diff --git a/frontend/src/common/css/menu-header.css b/frontend/src/common/css/menu-header.css
index 7277b56b88..41fde8c0aa 100644
--- a/frontend/src/common/css/menu-header.css
+++ b/frontend/src/common/css/menu-header.css
@@ -16,7 +16,6 @@
   color: inherit;
 }
 
-
 .header-top-menus.el-menu--horizontal > li {
   height: 40px;
   line-height: 40px;
@@ -30,7 +29,7 @@
 }
 
 .header-top-menus.el-menu--horizontal > li.is-active {
-  background: #595591 !important;
+  background: var(--color_shallow) !important;
 }
 
 .el-menu.el-menu--horizontal {
diff --git a/frontend/src/common/js/constants.js b/frontend/src/common/js/constants.js
index ef3c5f4610..cbaf36f974 100644
--- a/frontend/src/common/js/constants.js
+++ b/frontend/src/common/js/constants.js
@@ -168,3 +168,8 @@ export const JMETER_FUNC = [
   {type: "String", name: "${__escapeHtml}", description: "Encode strings using HTML encoding"},
   {type: "String", name: "${__TestPlanName}", description: "Return name of current test plan"},
 ]
+
+export const ORIGIN_COLOR = '#2c2a48';
+export const ORIGIN_COLOR_SHALLOW = '#595591';
+export const COUNT_NUMBER = '#6C317C';
+export const COUNT_NUMBER_SHALLOW = '#CDB9D2';
diff --git a/frontend/src/common/js/utils.js b/frontend/src/common/js/utils.js
index 88a898781b..525d38a442 100644
--- a/frontend/src/common/js/utils.js
+++ b/frontend/src/common/js/utils.js
@@ -1,5 +1,6 @@
 import {
-  LicenseKey,
+  COUNT_NUMBER, COUNT_NUMBER_SHALLOW,
+  LicenseKey, ORIGIN_COLOR, ORIGIN_COLOR_SHALLOW,
   PROJECT_ID,
   REFRESH_SESSION_USER_URL,
   ROLE_ADMIN,
@@ -348,3 +349,18 @@ export function objToStrMap(obj) {
   }
   return strMap;
 }
+
+export function getColor() {
+  return localStorage.getItem('color');
+}
+
+export function setColor(a, b, c, d) {
+  document.body.style.setProperty('--color', a);
+  document.body.style.setProperty('--color_shallow', b);
+  document.body.style.setProperty('--count_number', c);
+  document.body.style.setProperty('--count_number_shallow', d);
+}
+
+export function setOriginColor() {
+  setColor(ORIGIN_COLOR, ORIGIN_COLOR_SHALLOW, COUNT_NUMBER, COUNT_NUMBER_SHALLOW);
+}