From 173603741127415cef02ffc8e229bd6a22f256c1 Mon Sep 17 00:00:00 2001
From: layyback <505187749@qq.com>
Date: Sun, 26 Mar 2023 19:29:08 +0800
Subject: [PATCH 01/11] =?UTF-8?q?:hammer:=20=E5=87=8F=E5=B0=91=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E9=98=B2=E6=8A=96=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 feature/src/views/settings/index.vue | 51 ++++++++++++++++++++++++----
 1 file changed, 45 insertions(+), 6 deletions(-)

diff --git a/feature/src/views/settings/index.vue b/feature/src/views/settings/index.vue
index 5883ab4..696f87f 100644
--- a/feature/src/views/settings/index.vue
+++ b/feature/src/views/settings/index.vue
@@ -69,6 +69,17 @@
             ></a-switch>
           </div>
         </div>
+        <div class="setting-item">
+          <div class="title">主题</div>
+          <div class="settings-item-li">
+            <div class="label">暗黑模式</div>
+            <a-switch
+              v-model:checked="common.darkMode"
+              checked-children="开"
+              un-checked-children="关"
+            ></a-switch>
+          </div>
+        </div>
       </div>
       <div v-if="currentSelect[0] === 'global'">
         <a-collapse>
@@ -196,7 +207,7 @@ const setConfig = debounce(() => {
     )
   );
   ipcRenderer.send("re-register");
-}, 2000);
+}, 500);
 
 watch(state, setConfig);
 
@@ -270,7 +281,7 @@ const { shortCut, common, local, global } = toRefs(state);
   box-sizing: border-box;
   width: 100%;
   overflow-x: hidden;
-  background: #f3efef;
+  background: var(--color-body-bg);
   height: calc(~"100vh - 46px");
   display: flex;
   .settings-detail {
@@ -279,7 +290,7 @@ const { shortCut, common, local, global } = toRefs(state);
     flex: 1;
     overflow: auto;
     height: 100%;
-    background: #fff;
+    background: var(--color-body-bg);
     .setting-item {
       margin-bottom: 20px;
       .ant-form-item {
@@ -298,17 +309,22 @@ const { shortCut, common, local, global } = toRefs(state);
         justify-content: space-between;
         margin-bottom: 10px;
         .label {
-          color: #646464;
+          color: var(--color-text-content);
         }
         .value {
           width: 300px;
           text-align: center;
-          border: 1px solid #ddd;
+          border: 1px solid var(--color-border-light);
           color: #6c9fe2;
           font-size: 14px;
           height: 24px;
           font-weight: lighter;
         }
+        :deep(.ant-switch) {
+          &:not(.ant-switch-checked) {
+            background: var(--color-list-hover);
+          }
+        }
       }
     }
   }
@@ -320,29 +336,37 @@ const { shortCut, common, local, global } = toRefs(state);
     font-size: 14px;
     .item {
       flex: 1;
+      color: var(--color-text-content);
     }
     .short-cut {
       margin-left: 20px;
     }
     .value {
       text-align: center;
-      border: 1px solid #ddd;
+      border: 1px solid var(--color-border-light);
       color: #6c9fe2;
       font-size: 14px;
       height: 24px;
       font-weight: lighter;
       margin-top: 10px;
       position: relative;
+      background: var(--color-input-hover);
       :deep(.ant-input) {
         color: #6c9fe2;
         font-weight: lighter;
+        background: none;
       }
+      :deep(.anticon) {
+        color: var(--color-text-desc);
+      }
+
       &.ant-input-affix-wrapper {
         display: flex;
       }
       &:hover {
         .anticon {
           display: block;
+          color: var(--color-text-content);
         }
       }
       .anticon {
@@ -361,5 +385,20 @@ const { shortCut, common, local, global } = toRefs(state);
     text-align: center;
     cursor: pointer;
   }
+  :deep(.ant-collapse) {
+    background: var(--color-input-hover);
+    .ant-collapse-content {
+      background: var(--color-input-hover);
+      color: var(--color-text-content);
+    }
+    h3,
+    .ant-collapse-header,
+    .ant-list-item-meta-title {
+      color: var(--color-text-primary);
+    }
+    .ant-list-item-meta-description {
+      color: var(--color-text-desc);
+    }
+  }
 }
 </style>

From 19d98ec07cc9c2c72ee69a89d8abe2ee7a75dc51 Mon Sep 17 00:00:00 2001
From: layyback <505187749@qq.com>
Date: Sun, 26 Mar 2023 19:30:49 +0800
Subject: [PATCH 02/11] :feature: add css variable

---
 feature/src/assets/ant-reset.less | 28 +++++++++++++++++++++++++++-
 src/renderer/assets/var.less      | 25 +++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/assets/var.less

diff --git a/feature/src/assets/ant-reset.less b/feature/src/assets/ant-reset.less
index 99c8c39..fe5d98e 100644
--- a/feature/src/assets/ant-reset.less
+++ b/feature/src/assets/ant-reset.less
@@ -1,5 +1,31 @@
-@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
+@import "~ant-design-vue/dist/antd.less"; // 引入官方提供的 less 样式入口文件
 
 @primary-color: #ff4ea4; // 全局主色
 @link-color: #ff4ea4; // 链接色
 @error-color: #ff4ea4; // 错误色
+
+:root {
+  --color-text-primary: rgba(0, 0, 0, 0.85);
+  --color-text-content: #141414;
+  --color-text-desc: rgba(0, 0, 0, 0.45);
+  // 背景色
+  --color-body-bg: #fff;
+  --color-menu-bg: #f3efef;
+  --color-list-hover: #e2e2e2;
+  --color-input-hover: #fff;
+  // 边框
+  --color-border-light: #f0f0f0;
+}
+
+.dark {
+  --color-text-primary: #e8e8f0;
+  --color-text-content: #ccccd8;
+  --color-text-desc: #8f8fa6;
+  // 背景色
+  --color-body-bg: #1c1c28;
+  --color-menu-bg: #1c1c28;
+  --color-list-hover: #33333d;
+  --color-input-hover: #33333d;
+  // 边框
+  --color-border-light: #33333d;
+}
diff --git a/src/renderer/assets/var.less b/src/renderer/assets/var.less
new file mode 100644
index 0000000..9435b0d
--- /dev/null
+++ b/src/renderer/assets/var.less
@@ -0,0 +1,25 @@
+:root {
+  --color-text-primary: rgba(0, 0, 0, 0.85);
+  --color-text-content: #141414;
+  --color-text-desc: rgba(0, 0, 0, 0.45);
+  // 背景色
+  --color-body-bg: #fff;
+  --color-menu-bg: #f3efef;
+  --color-list-hover: #e2e2e2;
+  --color-input-hover: #fff;
+  // 边框
+  --color-border-light: #f0f0f0;
+}
+
+.dark {
+  --color-text-primary: #e8e8f0;
+  --color-text-content: #ccccd8;
+  --color-text-desc: #8f8fa6;
+  // 背景色
+  --color-body-bg: #1c1c28;
+  --color-menu-bg: #1c1c28;
+  --color-list-hover: #33333d;
+  --color-input-hover: #33333d;
+  // 边框
+  --color-border-light: #33333d;
+}

From 3fded762df486faca894aa7c3dc443e7511853cc Mon Sep 17 00:00:00 2001
From: layyback <505187749@qq.com>
Date: Sun, 26 Mar 2023 19:33:13 +0800
Subject: [PATCH 03/11] :art: fit menu style

---
 feature/src/assets/common.less | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/feature/src/assets/common.less b/feature/src/assets/common.less
index 7e9ce10..c870765 100644
--- a/feature/src/assets/common.less
+++ b/feature/src/assets/common.less
@@ -1,20 +1,37 @@
 .left-menu {
   width: 200px;
   height: 100vh;
+  border-right: 1px solid var(--color-border-light);
   .search-container {
     padding: 10px;
   }
   .ant-input-affix-wrapper {
     border: none;
+    background: var(--color-input-hover);
+    :deep(input) {
+      background: none;
+      color: var(--color-text-desc);
+    }
+    :deep(.anticon) {
+      color: var(--color-text-desc);
+    }
   }
   :deep(.ant-menu) {
-    background: #F3EFEF;
+    background: var(--color-menu-bg);
+    height: 100%;
+    border-right: none;
+    .ant-menu-item {
+      color: var(--color-text-content);
+      &:active {
+        background: none;
+      }
+    }
     .ant-menu-item-selected {
-      background-color: #E2E2E2;
-      color: #141414;
+      background-color: var(--color-list-hover);
+      color: var(--color-text-primary);
       &:after {
         display: none;
       }
     }
   }
-}
\ No newline at end of file
+}

From 77d3d00f7aa95dce87cff56cf8c660930bdb915b Mon Sep 17 00:00:00 2001
From: layyback <505187749@qq.com>
Date: Sun, 26 Mar 2023 19:33:50 +0800
Subject: [PATCH 04/11] :art: fit search input style

---
 src/renderer/components/search.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/search.vue b/src/renderer/components/search.vue
index d015fb5..f780b5d 100644
--- a/src/renderer/components/search.vue
+++ b/src/renderer/components/search.vue
@@ -226,7 +226,7 @@ window.rubick.hooks.onHide = () => {
 .rubick-select {
   display: flex;
   padding-left: 10px;
-  background: #fff;
+  background: var(--color-body-bg);
   position: fixed;
   top: 0;
   left: 0;
@@ -259,12 +259,15 @@ window.rubick.hooks.onHide = () => {
     border: none;
     outline: none;
     box-shadow: none !important;
+    background: var(--color-body-bg);
     .ant-select-selection,
     .ant-input,
     .ant-select-selection__rendered {
       height: 100% !important;
       font-size: 22px;
       border: none !important;
+      background: var(--color-body-bg);
+      color: var(--color-text-primary);
     }
   }
   .rubick-logo,
@@ -281,7 +284,7 @@ window.rubick.hooks.onHide = () => {
     }
   }
   .icon-tool {
-    background: #fff;
+    background: var(--color-input-hover);
   }
   .ant-input:focus {
     border: none;
@@ -294,6 +297,7 @@ window.rubick.hooks.onHide = () => {
       font-size: 26px;
       font-weight: bold;
       cursor: pointer;
+      color: var(--color-text-content);
     }
     .loading {
       color: #ff4ea4;
@@ -310,7 +314,7 @@ window.rubick.hooks.onHide = () => {
     position: relative;
     align-items: center;
     display: flex;
-    border: 1px solid #e6e6e6;
+    border: 1px solid var(--color-border-light);
     padding: 0 8px;
     margin-right: 12px;
     img {

From 958e20fef9b55d1929ae9a4b045331d8f6a3ef34 Mon Sep 17 00:00:00 2001
From: layyback <505187749@qq.com>
Date: Sun, 26 Mar 2023 19:34:18 +0800
Subject: [PATCH 05/11] :art: fit result style

---
 src/renderer/components/result.vue | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/result.vue b/src/renderer/components/result.vue
index 5358d33..82e2f3f 100644
--- a/src/renderer/components/result.vue
+++ b/src/renderer/components/result.vue
@@ -40,21 +40,21 @@ onMounted(() => {
 const props = defineProps({
   searchValue: {
     type: [String, Number],
-    default: "",
+    default: ""
   },
   options: {
     type: Array,
-    default: (() => [])(),
+    default: (() => [])()
   },
   currentSelect: {
     type: Number,
-    default: 0,
+    default: 0
   },
   currentPlugin: {},
-  clipboardFile: (() => [])(),
+  clipboardFile: (() => [])()
 });
 
-const renderTitle = (title) => {
+const renderTitle = title => {
   if (typeof title !== "string") return;
   if (!props.searchValue) return title;
   const result = title.toLowerCase().split(props.searchValue.toLowerCase());
@@ -65,7 +65,7 @@ const renderTitle = (title) => {
   }
 };
 
-const renderDesc = (desc) => {
+const renderDesc = desc => {
   if (desc.length > 80) {
     return `${desc.substr(0, 63)}...${desc.substr(
       desc.length - 14,
@@ -75,7 +75,7 @@ const renderDesc = (desc) => {
   return desc;
 };
 
-const sort = (options) => {
+const sort = options => {
   for (let i = 0; i < options.length; i++) {
     for (let j = i + 1; j < options.length; j++) {
       if (options[j].zIndex > options[i].zIndex) {
@@ -98,15 +98,24 @@ const sort = (options) => {
   z-index: 99;
   max-height: calc(~"100vh - 64px");
   overflow: auto;
+  background: var(--color-body-bg);
   .op-item {
     padding: 0 10px;
     height: 60px;
     line-height: 50px;
     max-height: 500px;
     overflow: auto;
-    background: #fafafa;
+    background: var(--color-body-bg);
+    color: var(--color-text-content);
+    border-color: var(--color-border-light);
     &.active {
-      background: #dee2e8;
+      background: var(--color-list-hover);
+    }
+    .ant-list-item-meta-title {
+      color: var(--color-text-content);
+    }
+    .ant-list-item-meta-description {
+      color: var(--color-text-desc);
     }
   }
 }

From 9e2b6f52a413864f5b9d438b9c68aff8da79723f Mon Sep 17 00:00:00 2001
From: layyback <505187749@qq.com>
Date: Sun, 26 Mar 2023 19:35:07 +0800
Subject: [PATCH 06/11] :sparkles: init dark mode

---
 src/common/constans/defaultConfig.ts |  3 ++-
 src/main/browsers/runner.ts          | 20 +++++++++------
 src/main/common/registerHotKey.ts    | 37 +++++++++++++++++++++++++++-
 src/renderer/App.vue                 |  2 ++
 4 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/src/common/constans/defaultConfig.ts b/src/common/constans/defaultConfig.ts
index 6502a43..a22c03b 100644
--- a/src/common/constans/defaultConfig.ts
+++ b/src/common/constans/defaultConfig.ts
@@ -1,7 +1,7 @@
 import commonConst from "@/common/utils/commonConst";
 
 export default {
-  version: 2,
+  version: 4,
   perf: {
     shortCut: {
       showAndHidden: "Option+R",
@@ -14,6 +14,7 @@ export default {
       // 是否失焦隐藏。默认在dev环境不隐藏，在打包后隐藏。
       hideOnBlur: commonConst.production(),
       autoPast: false,
+      darkMode: false
     },
     local: {
       search: true,
diff --git a/src/main/browsers/runner.ts b/src/main/browsers/runner.ts
index c9a7990..7333ab8 100644
--- a/src/main/browsers/runner.ts
+++ b/src/main/browsers/runner.ts
@@ -3,7 +3,7 @@ import path from "path";
 import commonConst from "../../common/utils/commonConst";
 import { PLUGIN_INSTALL_DIR as baseDir } from "@/common/constans/main";
 
-const getRelativePath = (indexPath) => {
+const getRelativePath = indexPath => {
   return commonConst.windows()
     ? indexPath.replace("file://", "")
     : indexPath.replace("file:", "");
@@ -38,6 +38,7 @@ export default () => {
 
   const createView = (plugin, window: BrowserWindow) => {
     let pluginIndexPath = plugin.tplPath || plugin.indexPath;
+    let darkMode;
     if (!pluginIndexPath) {
       const pluginPath = path.resolve(baseDir, "node_modules", plugin.name);
       pluginIndexPath = `file://${path.join(pluginPath, "./", plugin.main)}`;
@@ -56,8 +57,8 @@ export default () => {
         devTools: true,
         webviewTag: true,
         preload,
-        session: ses,
-      },
+        session: ses
+      }
     });
     window.setBrowserView(view);
     view.webContents.loadURL(pluginIndexPath);
@@ -67,13 +68,18 @@ export default () => {
       view.setAutoResize({ width: true });
       executeHooks("PluginEnter", plugin.ext);
       executeHooks("PluginReady", plugin.ext);
+      darkMode = global.OP_CONFIG.get().perf.common.darkMode;
+      darkMode &&
+        view.webContents.executeJavaScript(
+          `document.body.classList.add("dark");window.rubick.theme="dark"`
+        );
       window.webContents.executeJavaScript(`window.pluginLoaded()`);
     });
     // 修复请求跨域问题
     view.webContents.session.webRequest.onBeforeSendHeaders(
       (details, callback) => {
         callback({
-          requestHeaders: { referer: "*", ...details.requestHeaders },
+          requestHeaders: { referer: "*", ...details.requestHeaders }
         });
       }
     );
@@ -83,8 +89,8 @@ export default () => {
         callback({
           responseHeaders: {
             "Access-Control-Allow-Origin": ["*"],
-            ...details.responseHeaders,
-          },
+            ...details.responseHeaders
+          }
         });
       }
     );
@@ -116,6 +122,6 @@ export default () => {
     init,
     getView,
     removeView,
-    executeHooks,
+    executeHooks
   };
 };
diff --git a/src/main/common/registerHotKey.ts b/src/main/common/registerHotKey.ts
index 4d800ca..8a23f52 100644
--- a/src/main/common/registerHotKey.ts
+++ b/src/main/common/registerHotKey.ts
@@ -1,4 +1,12 @@
-import { globalShortcut, BrowserWindow, screen, ipcMain, app } from "electron";
+import {
+  globalShortcut,
+  nativeTheme,
+  BrowserWindow,
+  BrowserView,
+  screen,
+  ipcMain,
+  app
+} from "electron";
 
 const registerHotKey = (mainWindow: BrowserWindow): void => {
   // 设置开机启动
@@ -9,9 +17,36 @@ const registerHotKey = (mainWindow: BrowserWindow): void => {
       openAsHidden: true
     });
   };
+  // 设置暗黑模式
+  const setDarkMode = () => {
+    const config = global.OP_CONFIG.get();
+    const isDark = config.perf.common.darkMode;
+    if (isDark) {
+      nativeTheme.themeSource = "dark";
+      mainWindow.webContents.executeJavaScript(
+        `document.body.classList.add("dark");window.rubick.theme="dark"`
+      );
+      mainWindow.getBrowserViews().forEach((view: BrowserView) => {
+        view.webContents.executeJavaScript(
+          `document.body.classList.add("dark");window.rubick.theme="dark"`
+        );
+      });
+    } else {
+      nativeTheme.themeSource = "light";
+      mainWindow.webContents.executeJavaScript(
+        `document.body.classList.remove("dark");window.rubick.theme="light"`
+      );
+      mainWindow.getBrowserViews().forEach((view: BrowserView) => {
+        view.webContents.executeJavaScript(
+          `document.body.classList.remove("dark");window.rubick.theme="light"`
+        );
+      });
+    }
+  };
 
   const init = () => {
     setAutoLogin();
+    setDarkMode();
     const config = global.OP_CONFIG.get();
     globalShortcut.unregisterAll();
     // 注册偏好快捷键
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index bfdf44d..e8a1c31 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -119,6 +119,7 @@ const clearSearchValue = () => {
 </script>
 
 <style lang="less">
+@import "./assets/var.less";
 .drag-bar {
   -webkit-app-region: drag;
   width: 100%;
@@ -131,6 +132,7 @@ const clearSearchValue = () => {
 #components-layout {
   height: 100vh;
   overflow: hidden;
+  background: var(--color-body-bg);
   ::-webkit-scrollbar {
     width: 0;
   }

From f766ea3bde59e708911e29c5073e374969e93a35 Mon Sep 17 00:00:00 2001
From: layyback <505187749@qq.com>
Date: Sun, 26 Mar 2023 19:35:47 +0800
Subject: [PATCH 07/11] :art: fit market style

---
 .../views/market/components/plugin-list.vue   | 73 ++++++++++++++-----
 feature/src/views/market/index.vue            |  4 +-
 2 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/feature/src/views/market/components/plugin-list.vue b/feature/src/views/market/components/plugin-list.vue
index e548465..dbaac12 100644
--- a/feature/src/views/market/components/plugin-list.vue
+++ b/feature/src/views/market/components/plugin-list.vue
@@ -6,7 +6,11 @@
         <template #renderItem="{ item, index }">
           <a-list-item v-if="item" @click="showDetail(item)">
             <template #actions>
-              <a-button style="color: #ff4ea4;" type="text" :loading="item.isloading">
+              <a-button
+                style="color: #ff4ea4"
+                type="text"
+                :loading="item.isloading"
+              >
                 <CloudDownloadOutlined
                   v-show="!item.isloading && !item.isdownload"
                   @click.stop="downloadPlugin(item, index)"
@@ -16,7 +20,7 @@
             </template>
             <a-list-item-meta>
               <template #description>
-                <span class="ellipse">{{ item.description }}</span>
+                <span class="ellipse desc">{{ item.description }}</span>
               </template>
               <template #title>
                 <span class="ellipse">{{ item.pluginName }}</span>
@@ -38,18 +42,15 @@
     :get-container="false"
     class="plugin-info"
     :style="{ position: 'absolute' }"
-    @close="visible=false"
+    @close="visible = false"
   >
     <template #title>
       <div class="plugin-title-info">
-        <div class="back-icon" @click="visible=false">
+        <div class="back-icon" @click="visible = false">
           <ArrowLeftOutlined />
         </div>
         <div class="info">
-          <img
-            :src="detail.logo"
-            class="plugin-icon"
-          />
+          <img :src="detail.logo" class="plugin-icon" />
           <div class="plugin-desc">
             <div class="title">
               {{ detail.pluginName }}
@@ -57,9 +58,17 @@
             <div class="desc">
               {{ detail.description }}
             </div>
-            <a-button v-if="!detail.isdownload" @click.stop="downloadPlugin(detail)" shape="round" type="primary" :loading="detail.isloading">
+            <a-button
+              v-if="!detail.isdownload"
+              @click.stop="downloadPlugin(detail)"
+              shape="round"
+              type="primary"
+              :loading="detail.isloading"
+            >
               <template #icon>
-                <CloudDownloadOutlined v-show="!detail.isloading && !detail.isdownload" />
+                <CloudDownloadOutlined
+                  v-show="!detail.isloading && !detail.isdownload"
+                />
               </template>
               获取
             </a-button>
@@ -74,7 +83,7 @@
 <script setup>
 import {
   CloudDownloadOutlined,
-  ArrowLeftOutlined,
+  ArrowLeftOutlined
 } from "@ant-design/icons-vue";
 
 import { defineProps, ref } from "vue";
@@ -85,18 +94,18 @@ import request from "../../../assets/request/index";
 
 const store = useStore();
 
-const startDownload = (name) => store.dispatch("startDownload", name);
-const successDownload = (name) => store.dispatch("successDownload", name);
+const startDownload = name => store.dispatch("startDownload", name);
+const successDownload = name => store.dispatch("successDownload", name);
 
 defineProps({
   list: {
     type: [Array],
-    default: () => [],
+    default: () => []
   },
-  title: String,
+  title: String
 });
 
-const downloadPlugin = async (plugin) => {
+const downloadPlugin = async plugin => {
   startDownload(plugin.name);
   await window.market.downloadPlugin(plugin);
   message.success(`${plugin.name}安装成功！`);
@@ -108,7 +117,7 @@ const detail = ref({});
 const markdown = new MarkdownIt();
 const content = ref("");
 
-const showDetail = async (item) => {
+const showDetail = async item => {
   visible.value = true;
   detail.value = item;
   let mdContent = "暂无内容";
@@ -127,6 +136,7 @@ const showDetail = async (item) => {
   margin: 20px 0;
   .title {
     margin-bottom: 30px;
+    color: var(--color-text-primary);
   }
   .ellipse {
     display: inline-block;
@@ -134,13 +144,17 @@ const showDetail = async (item) => {
     overflow: hidden;
     text-overflow: ellipsis;
     width: 100%;
+    color: var(--color-text-content);
+    &.desc {
+      color: var(--color-text-desc);
+    }
   }
-  &:after{
+  &:after {
     content: " ";
     display: block;
     width: 100%;
     height: 1px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--color-border-light);
     transform: scaleY(0.5);
   }
   .ant-list-item {
@@ -156,6 +170,22 @@ const showDetail = async (item) => {
 
   .ant-drawer-content-wrapper {
     box-shadow: none !important;
+    .ant-drawer-content {
+      background: var(--color-body-bg);
+
+    }
+    .ant-drawer-header {
+      background: var(--color-body-bg);
+      border-bottom: 1px solid var(--color-border-light);
+    }
+  }
+}
+
+.dark {
+  .plugin-title-info {
+    .back-icon {
+      filter: invert(1) brightness(200%);
+    }
   }
 }
 
@@ -182,6 +212,7 @@ const showDetail = async (item) => {
       .title {
         font-size: 18px;
         font-weight: bold;
+        color: var(--color-text-primary);
       }
 
       .desc {
@@ -189,11 +220,15 @@ const showDetail = async (item) => {
         font-weight: normal;
         margin-top: 5px;
         margin-bottom: 20px;
+        color: var(--color-text-desc);
       }
     }
   }
 }
 .home-page-container {
+  * {
+    color: var(--color-text-content);
+  }
   img {
     width: 100%;
   }
diff --git a/feature/src/views/market/index.vue b/feature/src/views/market/index.vue
index 95b0b0a..f3cc69a 100644
--- a/feature/src/views/market/index.vue
+++ b/feature/src/views/market/index.vue
@@ -100,10 +100,10 @@ const { searchValue, current } = toRefs(state);
   align-items: flex-start;
   width: 100%;
   overflow: hidden;
-  background: #F3EFEF;
+  background: var(--color-menu-bg);
   height: calc(~"100vh - 46px");
   .container {
-    background: #fff;
+    background: var(--color-body-bg);
     width: calc(~'100% - 200px');
     height: 100%;
     box-sizing: border-box;

From 47eacb86cb5409c21092bdfd7e4cfd24a9a79f8c Mon Sep 17 00:00:00 2001
From: layyback <505187749@qq.com>
Date: Sun, 26 Mar 2023 19:36:22 +0800
Subject: [PATCH 08/11] :art: fit installed page style

---
 feature/src/views/installed/index.vue | 36 +++++++++++++++++++--------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/feature/src/views/installed/index.vue b/feature/src/views/installed/index.vue
index 40ae992..bb32cf2 100644
--- a/feature/src/views/installed/index.vue
+++ b/feature/src/views/installed/index.vue
@@ -161,7 +161,7 @@ const deletePlugin = async plugin => {
   box-sizing: border-box;
   width: 100%;
   overflow: hidden;
-  background: #f3efef;
+  background: var(--color-body-bg);
   height: calc(~"100vh - 46px");
   .container {
     box-sizing: border-box;
@@ -173,25 +173,26 @@ const deletePlugin = async plugin => {
   }
   .installed-list {
     width: 40%;
-    background: #fff;
+    background: var(--color-body-bg);
     height: 100%;
     padding: 10px 0;
-    border-right: 1px solid #eee;
+    border-right: 1px solid var(--color-border-light);
     overflow: auto;
     .item {
       padding: 10px 20px;
       display: flex;
       align-items: center;
+      color: var(--color-text-content);
       img {
         width: 40px;
         height: 40px;
         margin-right: 20px;
       }
       .desc {
-        color: #999;
+        color: var(--color-text-desc);
       }
       &.active {
-        background: #eee;
+        background: var(--color-list-hover);
       }
     }
   }
@@ -200,7 +201,7 @@ const deletePlugin = async plugin => {
     box-sizing: border-box;
     width: 60%;
     height: 100%;
-    background: #fff;
+    background: var(--color-body-bg);
     .plugin-top {
       display: flex;
       align-items: flex-start;
@@ -209,29 +210,44 @@ const deletePlugin = async plugin => {
         font-size: 20px;
         display: flex;
         align-items: center;
+        color: var(--color-text-primary);
+        .ant-tag {
+          background: var(--color-input-hover);
+          border: 1px solid var(--color-border-light);
+          color: var(--color-text-content);
+          margin-left: 8px;
+        }
       }
       .desc {
         font-size: 13px;
-        color: #999;
+        color: var(--color-text-desc);
+      }
+    }
+    .ant-tabs {
+      .ant-tabs-bar {
+        color: var(--color-text-content);
+        border-bottom: 1px solid var(--color-border-light);
       }
     }
     .detail-container,
     .feature-container {
       height: 380px;
       overflow: auto;
+      color: var(--color-text-content);
       img {
         width: 100%;
       }
     }
     .desc-item {
-      border-bottom: 1px solid #ddd;
+      border-bottom: 1px solid var(--color-border-light);
       padding: 10px 0;
+      color: var(--color-text-content);
       .ant-tag {
         margin-top: 6px;
         &.executable {
           cursor: pointer;
           &:hover {
-           transform: translateY(-2px);
+            transform: translateY(-2px);
           }
         }
       }
@@ -241,7 +257,7 @@ const deletePlugin = async plugin => {
         justify-content: space-between;
       }
       .desc-info {
-        color: #999;
+        color: var(--color-text-desc);
       }
     }
   }

From e156642684cbf511a6ee8cc1099c989a73bc304b Mon Sep 17 00:00:00 2001
From: layyback <505187749@qq.com>
Date: Sun, 26 Mar 2023 19:36:58 +0800
Subject: [PATCH 09/11] :art: fit dev page style

---
 feature/src/views/dev/index.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/feature/src/views/dev/index.vue b/feature/src/views/dev/index.vue
index a045b6b..c45ffd1 100644
--- a/feature/src/views/dev/index.vue
+++ b/feature/src/views/dev/index.vue
@@ -64,13 +64,20 @@ const labelCol = { span: 4 };
 const wrapperCol = { span: 14 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dev {
   box-sizing: border-box;
   width: 100%;
   overflow-x: hidden;
-  background: #fff;
+  background: var(--color-body-bg);
   height: calc(~"100vh - 46px");
   padding: 20px;
+  :deep(label) {
+    color: var(--color-text-content);
+  }
+  :deep(.ant-input) {
+    background: var(--color-input-hover);
+    color: var(--color-text-content);
+  }
 }
 </style>

From 4115051bad1aa65f8a82f318d34339a524fb1711 Mon Sep 17 00:00:00 2001
From: layyback <505187749@qq.com>
Date: Sun, 26 Mar 2023 19:37:25 +0800
Subject: [PATCH 10/11] :art: fit reset pages

---
 feature/src/App.vue                      | 13 +++++++++++--
 feature/src/views/account/index.vue      | 10 ++++++++--
 feature/src/views/settings/localhost.vue | 20 +++++++++++++++-----
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/feature/src/App.vue b/feature/src/App.vue
index 5f92dd5..5a0a199 100644
--- a/feature/src/App.vue
+++ b/feature/src/App.vue
@@ -68,7 +68,7 @@ const store = useStore();
 const init = () => store.dispatch("init");
 init();
 </script>
-<style lang="less">
+<style lang="less" scoped>
 * {
   margin: 0;
   padding: 0;
@@ -77,11 +77,20 @@ init();
 .main-container {
   display: flex;
   align-items: flex-start;
-  background: #f2efef;
+  background: var(--color-body-bg);
   flex-direction: column;
 
   .slider-bar {
     width: 100%;
+    .ant-menu {
+      background: var(--color-body-bg);
+      border-color: var(--color-border-light);
+      :deep(.ant-menu-item) {
+        &:not(.ant-menu-item-selected) {
+          color: var(--color-text-primary);
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/feature/src/views/account/index.vue b/feature/src/views/account/index.vue
index b89eaa0..03f76a6 100644
--- a/feature/src/views/account/index.vue
+++ b/feature/src/views/account/index.vue
@@ -10,12 +10,18 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .account {
   box-sizing: border-box;
   width: 100%;
   overflow-x: hidden;
-  background: #f3efef;
+  background: var(--color-body-bg);
   height: calc(~"100vh - 46px");
+  :deep(.ant-result-title) {
+    color: var(--color-text-primary);
+  }
+  :deep(.ant-result-subtitle) {
+    color: var(--color-text-desc);
+  }
 }
 </style>
diff --git a/feature/src/views/settings/localhost.vue b/feature/src/views/settings/localhost.vue
index 4db1158..895cf52 100644
--- a/feature/src/views/settings/localhost.vue
+++ b/feature/src/views/settings/localhost.vue
@@ -44,7 +44,7 @@ let _rev: any;
 let defaultConfig = {
   register: "https://registry.npm.taobao.org",
   database: "https://gitcode.net/rubickcenter/rubick-database/-/raw/master",
-  access_token: "",
+  access_token: ""
 };
 
 try {
@@ -59,25 +59,25 @@ const formState = ref(JSON.parse(JSON.stringify(defaultConfig)));
 
 const rules = {
   register: [{ required: true, trigger: "change" }],
-  database: [{ required: true, trigger: "change" }],
+  database: [{ required: true, trigger: "change" }]
 };
 const layout = {
   labelCol: { span: 6 },
-  wrapperCol: { span: 18 },
+  wrapperCol: { span: 18 }
 };
 
 const resetForm = () => {
   formState.value = {
     register: "https://registry.npm.taobao.org",
     database: "https://gitcode.net/rubickcenter/rubick-database/-/raw/master",
-    access_token: "",
+    access_token: ""
   };
 };
 
 const submit = () => {
   const changeData: any = {
     _id: "rubick-localhost-config",
-    data: toRaw(formState.value),
+    data: toRaw(formState.value)
   };
 
   if (_rev) {
@@ -88,3 +88,13 @@ const submit = () => {
   message.success("设置成功！重启插件市场后生效！");
 };
 </script>
+
+<style lang="less" scoped>
+:deep(label) {
+  color: var(--color-text-content);
+}
+:deep(.ant-input) {
+  background: var(--color-input-hover);
+  color: var(--color-text-content);
+}
+</style>

From 1f391c7cb56696ce436a31343c395b7a7152f904 Mon Sep 17 00:00:00 2001
From: layyback <505187749@qq.com>
Date: Sun, 26 Mar 2023 19:49:04 +0800
Subject: [PATCH 11/11] :sparkles: add dark mode

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 890e47f..23753ad 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rubick",
-  "version": "2.0.10",
+  "version": "2.1.0",
   "author": "muwoo <2424880409@qq.com>",
   "private": true,
   "scripts": {