diff --git a/src/components/SettingDrawer/ThemeColor.js b/src/components/SettingDrawer/ThemeColor.js
index f70bd4f8..bf5bb709 100644
--- a/src/components/SettingDrawer/ThemeColor.js
+++ b/src/components/SettingDrawer/ThemeColor.js
@@ -30,7 +30,7 @@ const ThemeColor = ({ colors, title, value, onChange }) => {
     ];
   }
   return (
-    <div className={styles.themeColor}>
+    <div className={styles.primaryColor}>
       <h3 className={styles.title}>{title}</h3>
       <div className={styles.content}>
         {colorList.map(color => {
diff --git a/src/components/SettingDrawer/ThemeColor.less b/src/components/SettingDrawer/ThemeColor.less
index 4983eb9c..89e893fe 100644
--- a/src/components/SettingDrawer/ThemeColor.less
+++ b/src/components/SettingDrawer/ThemeColor.less
@@ -1,4 +1,4 @@
-.themeColor {
+.primaryColor {
   overflow: hidden;
   margin-top: 24px;
   .title {
diff --git a/src/components/SettingDrawer/index.js b/src/components/SettingDrawer/index.js
index 4c81b420..f29d8752 100644
--- a/src/components/SettingDrawer/index.js
+++ b/src/components/SettingDrawer/index.js
@@ -113,7 +113,7 @@ class SettingDarwer extends PureComponent {
 
   render() {
     const { setting } = this.props;
-    const { collapse, silderTheme, themeColor, layout, colorWeak } = setting;
+    const { collapse, silderTheme, primaryColor, layout, colorWeak } = setting;
     return (
       <Drawer
         visible={collapse}
@@ -166,8 +166,8 @@ class SettingDarwer extends PureComponent {
 
           <ThemeColor
             title={formatMessage({ id: 'app.setting.themecolor' })}
-            value={themeColor}
-            onChange={color => this.changeSetting('themeColor', color)}
+            value={primaryColor}
+            onChange={color => this.changeSetting('primaryColor', color)}
           />
 
           <Divider />
diff --git a/src/defaultSetting.js b/src/defaultSetting.js
index 93509816..8d7aefd6 100644
--- a/src/defaultSetting.js
+++ b/src/defaultSetting.js
@@ -1,7 +1,7 @@
 export default {
   collapse: false,
   silderTheme: 'dark',
-  themeColor: '#1890FF',
+  primaryColor: '#1890FF',
   layout: 'sidemenu',
   grid: 'Fluid',
   fixedHeader: false,
diff --git a/src/models/setting.js b/src/models/setting.js
index 0426604d..6f65cc03 100644
--- a/src/models/setting.js
+++ b/src/models/setting.js
@@ -2,9 +2,9 @@ import { message } from 'antd';
 import defaultSetting from '../defaultSetting';
 
 let lessNodesAppended;
-const updateTheme = themeColor => {
+const updateTheme = primaryColor => {
   // Determine if the component is remounted
-  if (!themeColor) {
+  if (!primaryColor) {
     return;
   }
   const hideMessage = message.loading('正在编译主题！', 0);
@@ -40,7 +40,7 @@ const updateTheme = themeColor => {
     setTimeout(() => {
       window.less
         .modifyVars({
-          '@primary-color': themeColor,
+          '@primary-color': primaryColor,
         })
         .then(() => {
           hideMessage();
@@ -70,9 +70,9 @@ export default {
           setting[key] = value === '1' ? true : value;
         }
       });
-      const { themeColor, colorWeak } = setting;
-      if (state.themeColor !== themeColor) {
-        updateTheme(themeColor);
+      const { primaryColor, colorWeak } = setting;
+      if (state.primaryColor !== primaryColor) {
+        updateTheme(primaryColor);
       }
       updateColorWeak(colorWeak);
       return {
@@ -99,9 +99,9 @@ export default {
           urlParams.searchParams.set(key, value);
         }
       });
-      const { themeColor, colorWeak } = payload;
-      if (state.themeColor !== themeColor) {
-        updateTheme(themeColor);
+      const { primaryColor, colorWeak } = payload;
+      if (state.primaryColor !== primaryColor) {
+        updateTheme(primaryColor);
       }
       updateColorWeak(colorWeak);
       window.history.replaceState(null, 'setting', urlParams.href);