From 439b83dfe78984640dec8d3861cb759611f88770 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=89=AF?= <841369634@qq.com>
Date: Thu, 11 Apr 2024 23:38:31 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/config/index.js             |   1 +
 packages/gui/public/logo/logo-lang-light.svg  |  68 +++++++
 packages/gui/src/view/App.vue                 |  29 +--
 .../gui/src/view/components/container.vue     | 171 ++++++++++++++++++
 packages/gui/src/view/index.js                |   2 +-
 packages/gui/src/view/mixins/plugin.js        |   4 +-
 packages/gui/src/view/pages/server.vue        | 101 ++++++-----
 packages/gui/src/view/pages/setting.vue       |  22 ++-
 8 files changed, 333 insertions(+), 65 deletions(-)
 create mode 100644 packages/gui/public/logo/logo-lang-light.svg

diff --git a/packages/core/src/config/index.js b/packages/core/src/config/index.js
index e4853b5..d21a634 100644
--- a/packages/core/src/config/index.js
+++ b/packages/core/src/config/index.js
@@ -23,6 +23,7 @@ module.exports = {
       enabled: true,
       url: 'https://github.com/docmirror/dev-sidecar/raw/master/packages/core/src/config/remote_config.json5'
     },
+    theme: 'light', // 主题：light=亮色/白色, dark=暗色/黑色
     dock: {
       hideWhenWinClose: false
     },
diff --git a/packages/gui/public/logo/logo-lang-light.svg b/packages/gui/public/logo/logo-lang-light.svg
new file mode 100644
index 0000000..c8fa505
--- /dev/null
+++ b/packages/gui/public/logo/logo-lang-light.svg
@@ -0,0 +1,68 @@
+<svg id="svg_canvas" viewBox="0 0 460 150" width="460" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(0,6) scale(1)">
+		<g class="logo-entity" transform="translate(120,17) scale(-1,1)">
+			<circle fill="#1B7FCD" cx="45.9" cy="55.2" r="13.5"></circle>
+			<line fill="none" stroke="#1B7FCD" stroke-width="3" stroke-miterlimit="10" x1="37.9" y1="44.7" x2="26.2" y2="26.9"></line>
+			<circle cx="23.5" cy="21.7" r="7.6" fill="#1B7FCD"></circle>
+			<line fill="none" stroke="#1B7FCD" stroke-width="3" stroke-miterlimit="10" x1="48.1" y1="44.7" x2="51.3" y2="27.7"></line>
+			<circle cx="52.3" cy="23.9" r="4.9" fill="#1B7FCD"></circle>
+			<line fill="none" stroke="#1B7FCD" stroke-width="3" stroke-miterlimit="10" x1="57" y1="55.5" x2="77.8" y2="59.2"></line>
+			<circle stroke="#1B7FCD" stroke-miterlimit="10" cx="32.5" cy="89.7" r="7.6" fill="#1B7FCD"></circle>
+			<line fill="none" stroke="#1B7FCD" stroke-width="3" stroke-miterlimit="10" x1="40.1" y1="67.4" x2="34.9" y2="82.5"></line>
+			<circle fill="none" stroke="#1B7FCD" stroke-width="3" stroke-miterlimit="10" cx="87" cy="61.3" r="9.4"></circle>
+		</g>
+		<path transform="translate(0,0) scale(0.7)"	d="M153.15,169.55c-14.21,10.5-31.76,16.71-50.74,16.71c-47.19,0-85.59-38.4-85.59-85.59c0-47.19,38.4-85.59,85.59-85.59c38.04,0,70.37,24.95,81.47,59.35H188c-11.24-36.6-45.36-63.28-85.59-63.28c-49.36,0-89.52,40.16-89.52,89.52s40.16,89.52,89.52,89.52c21.69,0,41.6-7.76,57.1-20.64H153.15z" fill="#1B7FCD"></path>
+	</g>
+
+	<g transform="translate(104 58) scale(0.7)">
+		<path fill="#fff"
+			  d="M4.56 0L4.56-44.69L23.52-44.69Q30.62-44.69 34.51-43.28L34.51-43.28Q41.67-40.67 44.09-33.70L44.09-33.70Q45.90-28.34 45.90-22.24L45.90-22.24Q45.90-16.21 44.15-10.85L44.15-10.85Q42.41-5.36 38.39-2.75L38.39-2.75Q35.84-1.14 32.80-0.57Q29.75 0 23.52 0L23.52 0L4.56 0ZM23.52-36.72L14.07-36.72L14.07-7.97L23.52-7.97Q29.75-7.97 32.16-10.72L32.16-10.72Q33.63-12.46 34.54-15.61Q35.44-18.76 35.44-22.31L35.44-22.31Q35.44-26.26 34.37-29.55Q33.30-32.83 31.56-34.44L31.56-34.44Q29.01-36.72 23.52-36.72L23.52-36.72Z"
+			  transform="translate(5 57.55)"></path>
+		<path fill="#fff"
+			  d="M22.04-44.69L38.06-44.69L38.06-36.72L25.66-36.72Q20.84-36.72 18.63-36.05Q16.42-35.38 14.94-33.43L14.94-33.43Q13.94-32.09 13.57-30.75Q13.20-29.41 12.93-26.20L12.93-26.20L38.06-26.20L38.06-18.22L12.93-18.22Q13.47-12.46 16.35-10.22Q19.23-7.97 26.13-7.97L26.13-7.97L38.06-7.97L38.06 0L25.66 0Q20.64 0 16.82-0.60L16.82-0.60Q10.79-1.61 7.24-5.90L7.24-5.90Q2.14-12.06 2.14-22.58L2.14-22.58Q2.14-34.24 9.31-40.74L9.31-40.74Q11.79-42.95 14.57-43.82Q17.35-44.69 22.04-44.69L22.04-44.69Z"
+			  transform="translate(55.97 57.55)"></path>
+		<path fill="#fff"
+			  d="M37.25-44.69L47.97-44.69L28.41 0L18.89 0L0.07-44.69L10.79-44.69L23.92-11.06L37.25-44.69Z"
+			  transform="translate(99.97 57.55)"></path>
+		<path fill="#fff" d="M0-21.31L15.61-21.31L15.61-13.27L0-13.27L0-21.31Z"
+			  transform="translate(151.08 57.55)"></path>
+		<path fill="#fff"
+			  d="M26.80 0L4.36 0L4.36-7.97L24.79-7.97Q29.68-7.97 31.29-8.91L31.29-8.91Q33.63-10.32 33.63-13.13L33.63-13.13Q33.63-16.42 30.89-17.89L30.89-17.89Q29.35-18.76 25.93-18.76L25.93-18.76L17.62-18.76Q10.05-18.76 6.70-21.51L6.70-21.51Q4.62-23.25 3.45-25.86Q2.28-28.48 2.28-31.49L2.28-31.49Q2.28-36.18 5.03-40.07L5.03-40.07Q7.71-43.82 13.60-44.49L13.60-44.49Q15.61-44.69 19.56-44.69L19.56-44.69L41.74-44.69L41.74-36.72L21.71-36.72Q17.22-36.65 15.75-36.31L15.75-36.31Q12.73-35.58 12.73-31.76L12.73-31.76Q12.73-28.54 15.28-27.47L15.28-27.47Q16.95-26.67 20.90-26.67L20.90-26.67L28.07-26.67Q33.57-26.67 36.25-25.73L36.25-25.73Q41.00-24.12 42.81-20.10L42.81-20.10Q44.22-16.88 44.22-13.20L44.22-13.20Q44.22-9.11 42.34-5.90L42.34-5.90Q39.73-1.34 34.51-0.40L34.51-0.40Q31.96 0 26.80 0L26.80 0Z"
+			  transform="translate(169.69 57.55)"></path>
+		<path fill="#fff" d="M14.07 0L4.56 0L4.56-44.69L14.07-44.69L14.07 0Z"
+			  transform="translate(219.25 57.55)"></path>
+		<path fill="#fff"
+			  d="M4.56 0L4.56-44.69L23.52-44.69Q30.62-44.69 34.51-43.28L34.51-43.28Q41.67-40.67 44.09-33.70L44.09-33.70Q45.90-28.34 45.90-22.24L45.90-22.24Q45.90-16.21 44.15-10.85L44.15-10.85Q42.41-5.36 38.39-2.75L38.39-2.75Q35.84-1.14 32.80-0.57Q29.75 0 23.52 0L23.52 0L4.56 0ZM23.52-36.72L14.07-36.72L14.07-7.97L23.52-7.97Q29.75-7.97 32.16-10.72L32.16-10.72Q33.63-12.46 34.54-15.61Q35.44-18.76 35.44-22.31L35.44-22.31Q35.44-26.26 34.37-29.55Q33.30-32.83 31.56-34.44L31.56-34.44Q29.01-36.72 23.52-36.72L23.52-36.72Z"
+			  transform="translate(240.81 57.55)"></path>
+		<path fill="#fff"
+			  d="M22.04-44.69L38.06-44.69L38.06-36.72L25.66-36.72Q20.84-36.72 18.63-36.05Q16.42-35.38 14.94-33.43L14.94-33.43Q13.94-32.09 13.57-30.75Q13.20-29.41 12.93-26.20L12.93-26.20L38.06-26.20L38.06-18.22L12.93-18.22Q13.47-12.46 16.35-10.22Q19.23-7.97 26.13-7.97L26.13-7.97L38.06-7.97L38.06 0L25.66 0Q20.64 0 16.82-0.60L16.82-0.60Q10.79-1.61 7.24-5.90L7.24-5.90Q2.14-12.06 2.14-22.58L2.14-22.58Q2.14-34.24 9.31-40.74L9.31-40.74Q11.79-42.95 14.57-43.82Q17.35-44.69 22.04-44.69L22.04-44.69Z"
+			  transform="translate(291.78 57.55)"></path>
+		<path fill="#fff"
+			  d="M24.86-7.97L38.53-7.97L38.53 0L22.91 0Q18.49 0 16.15-0.47L16.15-0.47Q7.91-2.08 4.42-9.65L4.42-9.65Q2.14-14.74 2.14-22.24L2.14-22.24Q2.14-31.22 5.63-36.85L5.63-36.85Q8.17-40.94 12.43-42.81Q16.68-44.69 23.38-44.69L23.38-44.69L38.53-44.69L38.53-36.72L24.46-36.72Q18.09-36.72 15.14-33.30L15.14-33.30Q12.66-30.49 12.66-23.12L12.66-23.12Q12.66-13.20 16.48-10.12L16.48-10.12Q19.16-7.97 24.86-7.97L24.86-7.97Z"
+			  transform="translate(335.79 57.55)"></path>
+		<path fill="#fff"
+			  d="M11.32 0L0.20 0L18.69-44.69L29.61-44.69L48.11 0L36.98 0L32.63-10.32L15.68-10.32L11.32 0ZM30.55-18.29L24.19-33.90L17.82-18.29L30.55-18.29Z"
+			  transform="translate(379.39 57.55)"></path>
+		<path fill="#fff"
+			  d="M21.71-16.95L14.07-16.95L14.07 0L4.56 0L4.56-44.69L26.40-44.69Q35.78-44.69 39.46-42.28L39.46-42.28Q42.01-40.67 43.38-38.02Q44.76-35.38 44.76-32.23L44.76-32.23Q44.76-25.86 41.54-22.38L41.54-22.38Q39.53-20.30 36.25-19.23L36.25-19.23Q38.86-18.29 40.20-17.25Q41.54-16.21 42.61-14.20L42.61-14.20Q43.42-12.60 43.78-11.12Q44.15-9.65 44.35-6.77L44.35-6.77Q44.76-1.94 45.43 0L45.43 0L34.77 0Q34.30-1.54 33.77-6.37L33.77-6.37Q33.43-10.25 32.39-12.33Q31.36-14.41 29.28-15.61L29.28-15.61Q26.67-17.02 21.71-16.95L21.71-16.95ZM14.07-36.72L14.07-24.92L27.40-24.92Q30.75-24.92 32.16-25.93L32.16-25.93Q34.30-27.40 34.30-31.09L34.30-31.09Q34.30-35.18 31.09-36.31L31.09-36.31Q29.95-36.72 27.40-36.72L27.40-36.72L14.07-36.72Z"
+			  transform="translate(430.76 57.55)"></path>
+	</g>
+
+	<g transform="translate(105,100) scale(1)">
+		<path fill="#fff"
+			  d="M25.64-17.92L21.32-17.92L21.32-11.34L26.30-11.34L25.64-9.98L21.32-9.98L21.32-1.57L17.86-1.57L17.86-9.98L11.19-9.98L11.19-8.64L8.06-1.57L4.29-1.57L7.86-9.05L7.86-9.98L2.67-9.98L2.67-11.34L7.86-11.34L7.86-17.92L2.67-17.92L2.67-19.29L7.86-19.29L7.86-19.31L21.32-19.31L21.32-19.29L26.30-19.29L25.64-17.92ZM17.86-11.34L17.86-17.92L11.19-17.92L11.19-11.34L17.86-11.34Z"
+			  transform="translate(5 24.94)"></path>
+		<path fill="#fff"
+			  d="M18.13-3.71L13.92-1.51L8.93-1.51L15.75-4.96L10.24-7.89L14.33-7.89L17.84-6.03L22.01-8.15L22.01-9.28L9.89-9.28L5.83-1.62L2.12-1.62L8.38-13.46L2.06-13.46L4.55-19.37L8.09-19.37L6.12-14.70L9.05-14.70L11.54-19.37L15.28-19.37L12.79-14.70L22.21-14.70L21.11-17.81L24.45-17.81L25.58-14.70L26.91-14.70L26.91-13.46L12.12-13.46L10.59-10.56L25.32-10.56L25.32-7.51L20.18-4.79L26.45-1.51L22.33-1.51L18.13-3.71Z"
+			  transform="translate(34 24.94)"></path>
+		<path fill="#fff"
+			  d="M15.83-17.84L25.84-17.84L24.97-16.56L15.83-16.56L15.83-13.63L18.18-13.63L19.46-15.75L23.58-15.75L22.30-13.63L26.65-13.63L25.78-12.35L10.03-12.35L8.61-10.56L21.84-10.56L21.84-10.59L25.11-10.59L25.11-1.83L4.73-1.83L4.73-8.00L2.49-8.00L5.92-12.35L2.35-12.35L2.35-13.63L12.53-13.63L12.53-16.56L3.74-16.56L3.74-17.84L12.53-17.84L12.53-19.05L15.83-19.05L15.83-17.84ZM21.05-5.68L8.03-5.68L8.03-3.10L21.84-3.10L21.84-6.61L21.05-5.68ZM21.17-9.22L8.03-9.22L8.03-6.99L21.84-6.99L21.84-10.03L21.17-9.22Z"
+			  transform="translate(63 24.94)"></path>
+		<path fill="#fff"
+			  d="M15.23-8.44L12.33-3.68L8.96-3.68L11.86-8.44L11.86-15.57L8.85-15.57L8.85-16.94L11.86-16.94L11.86-19.14L15.23-19.14L15.23-16.94L25.46-16.94L25.46-3.68L18.73-3.68L17.98-5.05L22.10-5.05L22.10-15.57L15.23-15.57L15.23-8.44ZM2.03-13.69L6.84-13.69L6.84-3.10L26.97-3.10L26.42-1.77L7.89-1.77L6.76-2.90L5.89-1.77L2.03-1.77L2.03-3.10L3.54-3.10L3.54-12.33L2.03-12.33L2.03-13.69ZM5.95-19.05L7.45-15.25L3.92-15.25L2.38-19.05L5.95-19.05Z"
+			  transform="translate(92 24.94)"></path>
+		<path fill="#fff"
+			  d="M16.39-1.48L12.93-1.48L12.93-4.81L3.39-4.81L3.39-6.15L12.93-6.15L12.93-9.02L4.03-9.02L8.47-15.63L3.45-15.63L3.45-16.96L9.37-16.96L10.99-19.40L15.25-19.40L13.63-16.96L23.58-16.96L22.82-15.63L12.73-15.63L9.19-10.32L12.93-10.32L12.93-14.36L16.39-14.36L16.39-10.32L23.58-10.32L22.82-9.02L16.39-9.02L16.39-6.15L25.61-6.15L24.85-4.81L16.39-4.81L16.39-1.48Z"
+			  transform="translate(121 24.94)"></path>
+	</g>
+</svg>
diff --git a/packages/gui/src/view/App.vue b/packages/gui/src/view/App.vue
index da84f47..d3820af 100644
--- a/packages/gui/src/view/App.vue
+++ b/packages/gui/src/view/App.vue
@@ -1,11 +1,9 @@
 <template>
   <a-config-provider :locale="locale">
-  <div class="ds_layout">
+  <div class="ds_layout" :class="themeClass">
     <a-layout>
-      <a-layout-sider theme="light">
-        <div class="logo" >
-          <img height="60px" src="/logo/logo-lang.svg">
-        </div>
+      <a-layout-sider :theme="theme">
+        <div class="logo"></div>
         <div class="aside">
           <a-menu
             mode="inline"
@@ -13,9 +11,9 @@
             :defaultOpenKeys="['/plugin']"
           >
             <template v-for="(item) of menus">
-              <a-sub-menu v-if="item.children && item.children.length>0"   :key="item.path" @titleClick="titleClick(item)">
+              <a-sub-menu v-if="item.children && item.children.length>0" :key="item.path" @titleClick="titleClick(item)">
                 <span slot="title"><a-icon :type="item.icon?item.icon:'file'"/><span>{{item.title}}</span></span>
-                  <a-menu-item v-for="(sub) of item.children" :key="sub.path" @click="menuClick(sub)" >
+                  <a-menu-item v-for="(sub) of item.children" :key="sub.path" @click="menuClick(sub)">
                     <a-icon  :type="sub.icon?sub.icon:'file'"/> {{ sub.title }}
                   </a-menu-item>
               </a-sub-menu>
@@ -54,13 +52,21 @@ export default {
     return {
       locale: zhCN,
       info: {},
-      menus: undefined
+      menus: undefined,
+      config: undefined
     }
   },
   computed: {
+    themeClass () {
+      return 'theme-' + this.config.app.theme
+    },
+    theme () {
+      return this.config.app.theme
+    }
   },
   created () {
     this.menus = createMenus(this)
+    this.config = this.$global.config
     this.$api.info.get().then(ret => {
       this.info = ret
     })
@@ -112,9 +118,10 @@ body{
     padding:5px;
     border-bottom: #eee solid 1px;
     height:60px;
-    img{
-      height:100%
-    }
+    background-image: url("/logo/logo-lang.svg");
+    background-size: auto 50px;
+    background-repeat: no-repeat;
+    background-position: 5px center;
   }
   .ant-layout-footer{
     padding:10px;
diff --git a/packages/gui/src/view/components/container.vue b/packages/gui/src/view/components/container.vue
index f1a7437..31f6cb7 100644
--- a/packages/gui/src/view/components/container.vue
+++ b/packages/gui/src/view/components/container.vue
@@ -15,6 +15,177 @@ export default {
 </script>
 
 <style lang="scss">
+/* 暗色/黑色主题 */
+$dark-logo: url("/logo/logo-lang-light.svg");
+$dark-bg: #1e1f22; //背景
+$dark-bg-highlight: #333; //高亮块：背景
+$dark-text: #ddd; //字体颜色
+$dark-menu-selected: #1890ff; //菜单选中：字体颜色
+$dark-bd: #333; //边框和分隔线
+$dark-bd2: #929292; //边框和分隔线
+$dark-btn: #444; //按钮：边框和背景颜色
+.theme-dark{
+  /* 背景色和字体颜色 */
+  .ds_layout, .ant-layout,
+  .ds-container, .ds-container .container-header,
+  .ant-layout-footer{
+    background: $dark-bg;
+    color: $dark-text;
+  }
+  div, span, label {
+    color: $dark-text;
+  }
+  .form-help {
+    color: #999
+  }
+
+  /* 高亮块：背景色和字体颜色 */
+  .ant-alert-warning{
+    background: $dark-bg-highlight;
+    border-color: $dark-bg-highlight;
+    color: $dark-text;
+    /* 关闭图标颜色 */
+    .ant-alert-close-icon .anticon-close {
+      color: $dark-text;
+    }
+  }
+  .ant-alert-info{
+    background: $dark-bg-highlight;
+    border-color: $dark-bg-highlight;
+    color: $dark-text;
+  }
+
+  /* 边框和分隔线 */
+  .ant-layout-has-sider,
+  .ant-layout-sider-children,
+  .ds-container .container-header,
+  .logo,
+  .footer-bar,
+  .ant-layout-footer,
+  .ant-tabs .ant-tabs-left-bar,
+  .ant-tabs .ant-tabs-left-content{
+    border-color: $dark-bd;
+  }
+
+  /* 左侧 */
+  /** 背景色 **/
+  .ant-layout-sider{
+    background: $dark-bg;
+  }
+  /** Logo **/
+  .logo{
+    background-image: $dark-logo; /* logo使用亮色的 */
+  }
+  /** 菜单 **/
+  .ant-menu{
+    background: $dark-bg;
+    color: $dark-text;
+  }
+  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
+    background: $dark-bg-highlight;
+    color: $dark-menu-selected;
+    span{ color: $dark-menu-selected; }
+  }
+
+  /* 输入框、下拉框 */
+  .ant-input, .ant-input-number-input, .ant-input-number, .ant-select-selection,
+  .ant-input-group-addon{
+    background: #777;
+    border-color: #aaa;
+    color: $dark-text;
+    &:hover, &:focus{
+      border-color: #fff;
+    }
+  }
+
+  /* 卡片消息：IP测速 */
+  .ant-card{
+    background: #777;
+    border-color: #777;
+    .ant-card-head{
+      border-bottom-color: $dark-bd2;
+    }
+  }
+
+  /* 标签：未启用 */
+  .ant-tag-red{
+    background: #4f4749;
+    border-color: #4f4749;
+    color: #bf8285;
+  }
+  /* 标签：已启用 */
+  .ant-tag-green{
+    background: #505f5f;
+    border-color: #505f5f;
+    color: #90cb9f;
+  }
+
+  /* 按钮 */
+  .ant-btn:not(.ant-btn-danger, .ant-btn-primary){
+    background: $dark-btn;
+    border-color: $dark-btn;
+    color: $dark-text;
+    &:hover{
+      opacity: 0.8;
+    }
+  }
+
+  /* 单选框：开关式 */
+  .ant-switch:not(.ant-switch-checked){
+    background: $dark-btn;
+    border-color: $dark-btn;
+    &:hover{
+      opacity: 0.8;
+    }
+  }
+  /* 单选框：按钮式 */
+  .ant-radio-button-wrapper{
+    background: $dark-btn;
+    border-color: $dark-btn;
+    color: $dark-text;
+    &:hover{
+      opacity: 0.8;
+    }
+  }
+
+  /* JSON编辑器：应用于拦截设置 */
+  .jsoneditor-vue{
+    /* 头部和边框  */
+    div.jsoneditor-menu, div.jsoneditor{
+      background: $dark-bg;
+      border-color: $dark-bd;
+    }
+    /* 内容区域：背景和字体颜色 */
+    .ace_gutter, .ace_scroller{
+      background: #555;
+      color: #eee;
+    }
+    /* key的颜色 */
+    .ace_variable, .ace_text-layer{
+      color: #eee;
+    }
+    /* 字符串值的颜色 */
+    .ace_string, .ace_cjk{
+      color: #a6eaa6;
+    }
+    .ace_constant{
+      /* 数字的颜色 */
+      &.ace_numeric{
+        color: #ec9999;
+      }
+      /* 布尔值的颜色 */
+      &.ace_language{
+        color: #f4c995;
+      }
+    }
+    /* 当前行高亮样式 */
+    .ace_gutter-active-line,
+    .ace_marker-layer .ace_active-line{
+      background: #838774;
+    }
+  }
+}
+
 .ds-container{
   height:100%;
   background: #fff;
diff --git a/packages/gui/src/view/index.js b/packages/gui/src/view/index.js
index f99c122..ac398b9 100644
--- a/packages/gui/src/view/index.js
+++ b/packages/gui/src/view/index.js
@@ -6,7 +6,7 @@ export default {
   async initPre (Vue, api) {
     Vue.prototype.$api = api
     const setting = await api.setting.load()
-    Vue.prototype.$global = { setting }
+    Vue.prototype.$global = { setting, config: await api.config.get() }
     await status.install(api)
   },
   initModules (app, router) {
diff --git a/packages/gui/src/view/mixins/plugin.js b/packages/gui/src/view/mixins/plugin.js
index ead08c9..b38034b 100644
--- a/packages/gui/src/view/mixins/plugin.js
+++ b/packages/gui/src/view/mixins/plugin.js
@@ -10,8 +10,8 @@ export default {
       key: undefined,
       config: undefined,
       status: {},
-      labelCol: { span: 4 },
-      wrapperCol: { span: 20 },
+      labelCol: { span: 5 },
+      wrapperCol: { span: 19 },
       resetDefaultLoading: false,
       applyLoading: false,
       systemPlatform: ''
diff --git a/packages/gui/src/view/pages/server.vue b/packages/gui/src/view/pages/server.vue
index 32b62ea..af10fd1 100644
--- a/packages/gui/src/view/pages/server.vue
+++ b/packages/gui/src/view/pages/server.vue
@@ -15,57 +15,58 @@
         v-if="config"
       >
         <a-tab-pane tab="基本设置" key="1">
-          <a-form-item label="代理服务:" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-checkbox v-model="config.server.enabled">
-              随应用启动
-            </a-checkbox>
-            <a-tag v-if="status.proxy.enabled" color="green">
-              当前已启动
-            </a-tag>
-            <a-tag v-else color="red">
-              当前未启动
-            </a-tag>
-
-            <a-button class="md-mr-10" icon="profile" @click="openLog()">日志</a-button>
-          </a-form-item>
-          <a-form-item label="绑定IP" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-input v-model="config.server.host"/>
-            <div class="form-help">你可以设置0.0.0.0，让其他电脑可以使用此代理服务</div>
-          </a-form-item>
-          <a-form-item label="代理端口" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-input v-model="config.server.port"/>
-            <div class="form-help">修改后需要重启应用</div>
-          </a-form-item>
-          <a-form-item label="全局校验SSL" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-checkbox v-model="config.server.setting.NODE_TLS_REJECT_UNAUTHORIZED">
-              NODE_TLS_REJECT_UNAUTHORIZED
-            </a-checkbox>
-            <div class="form-help">高风险操作，没有特殊情况请勿关闭</div>
-          </a-form-item>
-          <a-form-item label="代理校验SSL" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-checkbox v-model="config.server.setting.verifySsl">
-              校验加速目标网站的ssl证书
-            </a-checkbox>
-            <div class="form-help">如果目标网站证书有问题，但你想强行访问，可以临时关闭此项</div>
-          </a-form-item>
-          <a-form-item label="根证书：" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-input-search addon-before="Cert" enter-button="选择" @search="onCrtSelect"
-                            v-model="config.server.setting.rootCaFile.certPath"/>
-            <a-input-search addon-before="Key" enter-button="选择" @search="onKeySelect"
-                            v-model="config.server.setting.rootCaFile.keyPath"/>
-          </a-form-item>
-          <a-form-item label="启用拦截" :label-col="labelCol" :wrapper-col="wrapperCol">
-              <a-checkbox v-model="config.server.intercept.enabled">
-                启用拦截
+          <div style="padding-right:10px">
+            <a-form-item label="代理服务:" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-checkbox v-model="config.server.enabled">
+                随应用启动
               </a-checkbox>
-            <div class="form-help">关闭拦截，且关闭功能增强的话，就不需要安装根证书，本应用退化为安全模式</div>
-          </a-form-item>
-          <a-form-item label="启用脚本" :label-col="labelCol" :wrapper-col="wrapperCol">
-              <a-checkbox v-model="config.server.setting.script.enabled">
-                允许插入并运行脚本
+              <a-tag v-if="status.proxy.enabled" color="green">
+                当前已启动
+              </a-tag>
+              <a-tag v-else color="red">
+                当前未启动
+              </a-tag>
+              <a-button class="md-mr-10" icon="profile" @click="openLog()">日志</a-button>
+            </a-form-item>
+            <a-form-item label="绑定IP" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-input v-model="config.server.host"/>
+              <div class="form-help">你可以设置0.0.0.0，让其他电脑可以使用此代理服务</div>
+            </a-form-item>
+            <a-form-item label="代理端口" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-input v-model="config.server.port"/>
+              <div class="form-help">修改后需要重启应用</div>
+            </a-form-item>
+            <a-form-item label="全局校验SSL" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-checkbox v-model="config.server.setting.NODE_TLS_REJECT_UNAUTHORIZED">
+                NODE_TLS_REJECT_UNAUTHORIZED
               </a-checkbox>
-            <div class="form-help">关闭后，github的clone加速链接复制也将关闭</div>
-          </a-form-item>
+              <div class="form-help">高风险操作，没有特殊情况请勿关闭</div>
+            </a-form-item>
+            <a-form-item label="代理校验SSL" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-checkbox v-model="config.server.setting.verifySsl">
+                校验加速目标网站的ssl证书
+              </a-checkbox>
+              <div class="form-help">如果目标网站证书有问题，但你想强行访问，可以临时关闭此项</div>
+            </a-form-item>
+            <a-form-item label="根证书：" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-input-search addon-before="Cert" enter-button="选择" @search="onCrtSelect"
+                              v-model="config.server.setting.rootCaFile.certPath"/>
+              <a-input-search addon-before="Key" enter-button="选择" @search="onKeySelect"
+                              v-model="config.server.setting.rootCaFile.keyPath"/>
+            </a-form-item>
+            <a-form-item label="启用拦截" :label-col="labelCol" :wrapper-col="wrapperCol">
+                <a-checkbox v-model="config.server.intercept.enabled">
+                  启用拦截
+                </a-checkbox>
+              <div class="form-help">关闭拦截，且关闭功能增强的话，就不需要安装根证书，本应用退化为安全模式</div>
+            </a-form-item>
+            <a-form-item label="启用脚本" :label-col="labelCol" :wrapper-col="wrapperCol">
+                <a-checkbox v-model="config.server.setting.script.enabled">
+                  允许插入并运行脚本
+                </a-checkbox>
+              <div class="form-help">关闭后，github的clone加速链接复制也将关闭</div>
+            </a-form-item>
+          </div>
         </a-tab-pane>
         <a-tab-pane tab="拦截设置" key="2">
           <vue-json-editor style="height:100%;" ref="editor" v-model="config.server.intercepts" mode="code"
@@ -140,7 +141,7 @@
 <!--          </a-row>-->
 <!--        </a-tab-pane>-->
         <a-tab-pane tab="IP测速" key="6">
-          <div>
+          <div style="padding-right: 10px">
             <a-alert type="info" message="对从dns获取到的ip进行测速，使用速度最快的ip进行访问。（对使用增强功能的域名没啥用）"></a-alert>
             <a-form-item label="开启dns测速" :label-col="labelCol" :wrapper-col="wrapperCol">
               <a-checkbox v-model="getSpeedTestConfig().enabled">
diff --git a/packages/gui/src/view/pages/setting.vue b/packages/gui/src/view/pages/setting.vue
index 26fa41e..3ece6c5 100644
--- a/packages/gui/src/view/pages/setting.vue
+++ b/packages/gui/src/view/pages/setting.vue
@@ -42,6 +42,16 @@
           <br/>如果重载远程配置后发现下载的还是修改前的内容，请稍等片刻再重试。
         </div>
       </a-form-item>
+      <a-form-item label="主题设置" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-radio-group v-model="config.app.theme" default-value="light" button-style="solid">
+          <a-radio-button :value="'light'">
+            亮色
+          </a-radio-button>
+          <a-radio-button :value="'dark'">
+            暗色
+          </a-radio-button>
+        </a-radio-group>
+      </a-form-item>
       <a-form-item label="首页提示" :label-col="labelCol" :wrapper-col="wrapperCol">
         <a-radio-group v-model="config.app.showShutdownTip"
                        default-value="true" button-style="solid">
@@ -94,7 +104,8 @@ export default {
     return {
       key: 'app',
       removeUserConfigLoading: false,
-      reloadLoading: false
+      reloadLoading: false,
+      themeBackup: null
     }
   },
   created () {
@@ -103,6 +114,15 @@ export default {
   mounted () {
   },
   methods: {
+    ready (config) {
+      this.themeBackup = config.app.theme
+    },
+    async applyAfter () {
+      // 判断是否切换了主题
+      if (this.config.app.theme !== this.themeBackup) {
+        window.location.reload()
+      }
+    },
     async openExternal (url) {
       await this.$api.ipc.openExternal(url)
     },