diff --git a/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java b/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java
index 05b437a764..824180e3f3 100644
--- a/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java
+++ b/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java
@@ -42,6 +42,10 @@ public class ShiroServiceImpl implements ShiroService {
         filterChainDefinitionMap.put("/index.html", ANON);
         filterChainDefinitionMap.put("/link.html", ANON);
 
+        //获取主题信息
+        filterChainDefinitionMap.put("/plugin/theme/themes", ANON);
+        filterChainDefinitionMap.put("/plugin/theme/items/**", ANON);
+
         //验证链接
         filterChainDefinitionMap.put("/api/link/validate**", ANON);
         filterChainDefinitionMap.put("/api/map/areaEntitys/**", ANON);
diff --git a/backend/src/main/java/io/dataease/plugins/server/ThemeServer.java b/backend/src/main/java/io/dataease/plugins/server/ThemeServer.java
new file mode 100644
index 0000000000..08e2d10374
--- /dev/null
+++ b/backend/src/main/java/io/dataease/plugins/server/ThemeServer.java
@@ -0,0 +1,50 @@
+package io.dataease.plugins.server;
+
+import java.util.List;
+
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestPart;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.multipart.MultipartFile;
+
+import io.dataease.plugins.config.SpringContextUtil;
+import io.dataease.plugins.xpack.theme.dto.ThemeDto;
+import io.dataease.plugins.xpack.theme.dto.ThemeItem;
+import io.dataease.plugins.xpack.theme.dto.ThemeRequest;
+import io.dataease.plugins.xpack.theme.service.ThemeXpackService;
+
+@RequestMapping("/plugin/theme")
+@RestController
+public class ThemeServer {
+
+    
+
+    @PostMapping("/themes")
+    public List<ThemeDto> themes(){
+
+        ThemeXpackService themeXpackService = SpringContextUtil.getBean(ThemeXpackService.class);
+        return themeXpackService.themes();
+    }
+
+    @PostMapping("/items/{themeId}")
+    public List<ThemeItem> themeItems(@PathVariable("themeId") int themeId) {
+        ThemeXpackService themeXpackService = SpringContextUtil.getBean(ThemeXpackService.class);
+        return themeXpackService.queryItems(themeId);
+    }
+
+    @PostMapping("/save")
+    public void save(@RequestPart("request") ThemeRequest request, @RequestPart(value = "file", required = false) MultipartFile bodyFile) {
+        ThemeXpackService themeXpackService = SpringContextUtil.getBean(ThemeXpackService.class);
+        themeXpackService.save(request, bodyFile);
+    }
+
+    @PostMapping("/delete/{themeId}")
+    public void save(@PathVariable("themeId") int themeId) {
+        ThemeXpackService themeXpackService = SpringContextUtil.getBean(ThemeXpackService.class);
+        themeXpackService.deleteTheme(themeId);
+    }
+    
+}
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 66a91a15c0..27046fe564 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,14 +1,16 @@
 <template>
   <div id="app">
     <router-view />
+    <plugin-com v-show="false" ref="de-theme" component-name="ThemeSetting" />
   </div>
 </template>
 
 <script>
+import PluginCom from '@/views/system/plugin/PluginCom'
 
 export default {
   name: 'App',
-
+  components: { PluginCom },
   beforeCreate() {
 
   }
diff --git a/frontend/src/assets/fill_radio.png b/frontend/src/assets/fill_radio.png
new file mode 100644
index 0000000000..c5636c91d9
Binary files /dev/null and b/frontend/src/assets/fill_radio.png differ
diff --git a/frontend/src/assets/theme-custom.png b/frontend/src/assets/theme-custom.png
new file mode 100644
index 0000000000..a14881663b
Binary files /dev/null and b/frontend/src/assets/theme-custom.png differ
diff --git a/frontend/src/assets/theme-dark.png b/frontend/src/assets/theme-dark.png
new file mode 100644
index 0000000000..696d23ffa2
Binary files /dev/null and b/frontend/src/assets/theme-dark.png differ
diff --git a/frontend/src/assets/theme-default.png b/frontend/src/assets/theme-default.png
new file mode 100644
index 0000000000..61e524503f
Binary files /dev/null and b/frontend/src/assets/theme-default.png differ
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index e25fb2d08f..bc9344e182 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -435,7 +435,7 @@ export default {
   },
   settings: {
     title: '系统布局配置',
-    theme: '主题色',
+    theme: '主题',
     tagsView: '开启 Tags-View',
     fixedHeader: '固定 Header',
     sidebarLogo: '侧边栏 Logo'
diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index e3af872ac7..df3cc88933 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -62,7 +62,6 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
-    <theme-picker v-show="false" ref="de-theme" />
   </div>
 
 </template>
@@ -76,20 +75,22 @@ import Notification from '@/components/Notification'
 import bus from '@/utils/bus'
 import LangSelect from '@/components/LangSelect'
 import { getSysUI } from '@/utils/auth'
-import ThemePicker from '@/components/ThemePicker'
+import { pluginLoaded } from '@/api/user'
+import { initTheme } from '@/utils/ThemeUtil'
 export default {
   name: 'Topbar',
   components: {
     AppLink,
     Notification,
-    LangSelect,
-    ThemePicker
+    LangSelect
+
   },
   data() {
     return {
       uiInfo: null,
       logoUrl: null,
-      axiosFinished: false
+      axiosFinished: false,
+      isPluginLoaded: false
     }
   },
 
@@ -147,7 +148,6 @@ export default {
 
   mounted() {
     this.initCurrentRoutes()
-    bus.$on('set-theme-info', this.setThemeInfo)
     bus.$on('set-top-menu-info', this.setTopMenuInfo)
     bus.$on('set-top-menu-active-info', this.setTopMenuActiveInfo)
     bus.$on('set-top-text-info', this.setTopTextInfo)
@@ -156,6 +156,12 @@ export default {
   created() {
     this.loadUiInfo()
   },
+  beforeCreate() {
+    pluginLoaded().then(res => {
+      this.isPluginLoaded = res.success && res.data
+      if (this.isPluginLoaded) { initTheme() }
+    })
+  },
   methods: {
     // 通过当前路径找到二级菜单对应项，存到store，用来渲染左侧菜单
     initCurrentRoutes() {
@@ -259,20 +265,17 @@ export default {
           })
         }
 
-        if (this.uiInfo['ui.themeStr'] && this.uiInfo['ui.themeStr'].paramValue) {
+        /* if (this.uiInfo['ui.themeStr'] && this.uiInfo['ui.themeStr'].paramValue) {
           if (this.uiInfo['ui.themeStr'].paramValue === 'dark') {
             document.body.className = 'blackTheme'
           } else if (this.uiInfo['ui.themeStr'].paramValue === 'light') {
             document.body.className = ''
           }
-        }
+        } */
         this.axiosFinished = true
       })
     },
-    setThemeInfo(val) {
-      // console.log('切换的主题颜色是：' + val)
-      this.$refs['de-theme'] && this.$refs['de-theme'].switch && this.$refs['de-theme'].switch(val)
-    },
+
     setTopMenuInfo(val) {
       this.loadUiInfo()
     },
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 79cb557e96..a553754bca 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -80,7 +80,7 @@ export default {
     position: relative;
     height: 100%;
     // height: $contentHeight;
-    background-color: var(--MainContentBG);
+    background-color: var(--ContentBG);
     width: 100%;
     &.mobile.openSidebar{
       position: fixed;
diff --git a/frontend/src/permission.js b/frontend/src/permission.js
index b02aaf2e5f..f49c414902 100644
--- a/frontend/src/permission.js
+++ b/frontend/src/permission.js
@@ -22,7 +22,6 @@ router.beforeEach(async(to, from, next) => {
 
   // determine whether the user has logged in
   const hasToken = getToken()
-  //   bus.$emit('set-theme-info', store.state.settings.theme)
   if (hasToken) {
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 04e9b1cc5a..b58c0c5049 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1,14 +1,11 @@
 
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
+/* $--font-path: '~element-ui/lib/theme-chalk/fonts'; */
 
-/* .defaultTheme {
-  @import './theme/default.scss';
-  @import "~element-ui/packages/theme-chalk/src/index";
-} */
-.blackTheme {
+
+/* .blackTheme {
   @import './theme/dark.scss';
   @import "~element-ui/packages/theme-chalk/src/index";
-}
+} */
 
 
 
@@ -460,7 +457,7 @@ div:focus {
     color: var(--TableColor) !important;  
 }
 .blackTheme .el-tag.el-tag--info {
-    background-color: var(--MainContentBG);
+    background-color: var(--ContentBG);
     border-color: var(--TableBorderColor);
     color: var(--TableColor) !important;  ;
 }
@@ -575,7 +572,7 @@ div:focus {
     color: var(--TextPrimary) ;
 }
 .blackTheme .el-drawer__body {
-    background-color: var(--MainContentBG);
+    background-color: var(--ContentBG);
 }
 
 .blackTheme .el-select-dropdown__item.hover {
diff --git a/frontend/src/styles/theme/dark.scss b/frontend/src/styles/theme/dark.scss
index 1ca486bd9e..9f81402905 100644
--- a/frontend/src/styles/theme/dark.scss
+++ b/frontend/src/styles/theme/dark.scss
@@ -26,15 +26,11 @@ $--background-color-base: #171b22;
 // 与CSS原生变量映射
 #app {
   --Main:#2681ff;
-  --test:#FF9227;
-  --color-primary: #000;
   --MainBG: #171b22;
   --ContentBG: #1b2a32;
-  --MainBorderColor: #2681ff;
   --TextActive: #FFFFFF;
   --TextPrimary: #F2F6FC;
   --border-color-input: #303640;
-  --border-color-input-hovor: #303640;
 
   --TopBG: #00364d;
 
@@ -47,11 +43,10 @@ $--background-color-base: #171b22;
   --SiderBG: #17242b;
   --SiderTextColor: #acbac3;
 
-  --MainContentBG: #1b2a32;
 
   --TableBG: #21333b;
   --TableColor: #acbac3;
-  --TableBorder: .05rem solid #495865;
+//   --TableBorder: .05rem solid #495865;
   --TableBorderColor: #495865;
 
   --background-color-base: #171b22;
diff --git a/frontend/src/utils/ThemeUtil.js b/frontend/src/utils/ThemeUtil.js
new file mode 100644
index 0000000000..e13fa296da
--- /dev/null
+++ b/frontend/src/utils/ThemeUtil.js
@@ -0,0 +1,27 @@
+const styleId = 'dataease-wggznb'
+
+export function initTheme() {
+  const json = localStorage.getItem('theme-css-text')
+  if (!json) return
+  const { cssText, themeId } = JSON.parse(json)
+  if (!themeId) return
+
+  let style = document.getElementById(styleId)
+  if (themeId === 1) {
+    document.body.className = ''
+    style && document.getElementById(styleId).parentNode.removeChild(document.getElementById(styleId))
+    return
+  }
+
+  document.body.className = 'blackTheme'
+
+  if (style) {
+    style.innerText = cssText
+  } else {
+    style = document.createElement('style')
+    style.id = styleId
+    style.innerText = cssText
+    document.head.appendChild(style)
+  }
+}
+
diff --git a/frontend/src/views/dataset/add/AddExcel.vue b/frontend/src/views/dataset/add/AddExcel.vue
index 79133cbc06..340821ebb3 100644
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/frontend/src/views/dataset/add/AddExcel.vue
@@ -436,7 +436,7 @@ export default {
   }
 
   .el-header {
-    background-color: var(--MainContentBG, rgb(241, 243, 248));
+    background-color: var(--ContentBG, rgb(241, 243, 248));
     color: var(--TextActive, #333);
     line-height: 30px;
   }
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index 688cd763c7..1e6e571ab5 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login-background">
+  <div class="login-background" :v-show="themeLoaded">
     <div class="login-container">
       <el-row v-loading="loading" type="flex">
         <el-col :span="12">
@@ -57,6 +57,7 @@
       </el-row>
     </div>
     <plugin-com v-if="loginTypes.includes(2) && loginForm.loginType === 2" ref="SSOComponent" component-name="SSOComponent" />
+
   </div>
 </template>
 
@@ -65,6 +66,7 @@
 import { encrypt } from '@/utils/rsaEncrypt'
 import { ldapStatus, oidcStatus } from '@/api/user'
 import { getSysUI } from '@/utils/auth'
+import { initTheme } from '@/utils/ThemeUtil'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import Cookies from 'js-cookie'
 export default {
@@ -88,7 +90,8 @@ export default {
       loginImageUrl: null,
       loginLogoUrl: null,
       axiosFinished: false,
-      loginTypes: [0]
+      loginTypes: [0],
+      themeLoaded: false
     }
   },
   computed: {
@@ -105,6 +108,8 @@ export default {
     }
   },
   beforeCreate() {
+    initTheme()
+    this.themeLoaded = true
     ldapStatus().then(res => {
       if (res.success && res.data) {
         this.loginTypes.push(1)
@@ -117,6 +122,11 @@ export default {
       }
     })
   },
+
+  mounted() {
+    // this.loading = false
+  },
+
   created() {
     this.$store.dispatch('user/getUI').then(() => {
       // const uiLists = this.$store.state.user.uiInfo
@@ -133,6 +143,7 @@ export default {
     }
     this.clearOidcMsg()
   },
+
   methods: {
     clearOidcMsg() {
       Cookies.remove('OidcError')
@@ -146,14 +157,13 @@ export default {
       if (this.uiInfo['ui.loginLogo'] && this.uiInfo['ui.loginLogo'].paramValue) {
         this.loginLogoUrl = '/system/ui/image/' + this.uiInfo['ui.loginLogo'].paramValue
       }
-      if (this.uiInfo['ui.themeStr'] && this.uiInfo['ui.themeStr'].paramValue) {
-        // this.loginLogoUrl = '/system/ui/image/' + this.uiInfo['ui.loginLogo'].paramValue
+      /* if (this.uiInfo['ui.themeStr'] && this.uiInfo['ui.themeStr'].paramValue) {
         if (this.uiInfo['ui.themeStr'].paramValue === 'dark') {
           document.body.className = 'blackTheme'
         } else if (this.uiInfo['ui.themeStr'].paramValue === 'light') {
           document.body.className = ''
         }
-      }
+      } */
     },
 
     handleLogin() {
@@ -208,7 +218,7 @@ export default {
   min-width: 900px;
   width: 1280px;
   height: 520px;
-  background-color: var(--MainContentBG, #FFFFFF);
+  background-color: var(--ContentBG, #FFFFFF);
   @media only screen and (max-width: 1280px) {
     width: 900px;
     height: 380px;
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index f9d2768826..b35194ba90 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -921,7 +921,7 @@ export default {
   overflow-y: auto;
 }
 .button-show{
-    background-color: var(--MainContentBG, #ebf2fe)!important;
+    background-color: var(--ContentBG, #ebf2fe)!important;
 }
 
 .button-closed{
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 5f0535aa92..ec927cdc07 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -68,7 +68,7 @@
       </el-row>
     </el-col>
     <el-col v-if="panelInfo.name.length===0" style="height: 100%;">
-      <el-row style="height: 100%; background-color: var(--MainContentBG);" class="custom-position">
+      <el-row style="height: 100%; background-color: var(--ContentBG);" class="custom-position">
         {{ $t('panel.select_panel_from_left') }}
       </el-row>
     </el-col>
diff --git a/frontend/src/views/system/SysParam/index.vue b/frontend/src/views/system/SysParam/index.vue
index 737a170bad..9cc5fc669b 100644
--- a/frontend/src/views/system/SysParam/index.vue
+++ b/frontend/src/views/system/SysParam/index.vue
@@ -6,19 +6,23 @@
         <basic-setting />
       </el-tab-pane>
 
-      <el-tab-pane :lazy="true" :label="$t('system_parameter_setting.mailbox_service_settings')" name="first">
+      <!-- <el-tab-pane :lazy="true" :label="$t('system_parameter_setting.mailbox_service_settings')" name="first">
         <email-setting />
-      </el-tab-pane>
+      </el-tab-pane> -->
 
       <el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.display')" name="second">
         <plugin-com v-if="isPluginLoaded" ref="DisplaySetting" component-name="DisplaySetting" />
       </el-tab-pane>
 
-      <el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.ldap')" name="third">
+      <el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.theme')" name="third">
+        <plugin-com v-if="isPluginLoaded" ref="ThemeSetting" component-name="ThemeSetting" />
+      </el-tab-pane>
+
+      <el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.ldap')" name="fourth">
         <plugin-com v-if="isPluginLoaded" ref="DisplaySetting" component-name="LdapSetting" />
       </el-tab-pane>
 
-      <el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.oidc')" name="fourth">
+      <el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.oidc')" name="five">
         <plugin-com v-if="isPluginLoaded" ref="DisplaySetting" component-name="SsoSetting" />
       </el-tab-pane>
 
diff --git a/frontend/static/img/theme-custom.946c21a.png b/frontend/static/img/theme-custom.946c21a.png
new file mode 100644
index 0000000000..a14881663b
Binary files /dev/null and b/frontend/static/img/theme-custom.946c21a.png differ
diff --git a/frontend/static/img/theme-dark.974c426.png b/frontend/static/img/theme-dark.974c426.png
new file mode 100644
index 0000000000..696d23ffa2
Binary files /dev/null and b/frontend/static/img/theme-dark.974c426.png differ
diff --git a/frontend/static/img/theme-default.ebe6160.png b/frontend/static/img/theme-default.ebe6160.png
new file mode 100644
index 0000000000..61e524503f
Binary files /dev/null and b/frontend/static/img/theme-default.ebe6160.png differ