diff --git a/detach/src/App.vue b/detach/src/App.vue
index 450f9c5..ca70e6b 100644
--- a/detach/src/App.vue
+++ b/detach/src/App.vue
@@ -79,10 +79,11 @@ html, body {
 
 .detach {
   width: 100%;
-  height: 56px;
+  height: 60px;
   display: flex;
   align-items: center;
-  background: #eee;
+  background: var(--color-body-bg);
+  color: var(--color-text-primary);
 }
 
 .detach {
@@ -112,8 +113,8 @@ html, body {
 }
 
 .detach input {
-  background-color: #FFFFFF;
-  color: #333333;
+  background-color: var(--color-body-bg);
+  color: var(--color-text-primary);
   width: 360px;
   height: 36px;
   line-height: 36px;
diff --git a/detach/src/assets/var.less b/detach/src/assets/var.less
new file mode 100644
index 0000000..9435b0d
--- /dev/null
+++ b/detach/src/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;
+}
diff --git a/detach/src/main.ts b/detach/src/main.ts
index b670de8..8bd5232 100644
--- a/detach/src/main.ts
+++ b/detach/src/main.ts
@@ -1,4 +1,5 @@
-import { createApp } from "vue";
-import App from "./App.vue";
+import { createApp } from 'vue';
+import App from './App.vue';
+import './assets/var.less';
 
-createApp(App).mount("#app");
+createApp(App).mount('#app');
diff --git a/feature/src/App.vue b/feature/src/App.vue
index f7e4069..aee3bae 100644
--- a/feature/src/App.vue
+++ b/feature/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main-container">
+  <div :class="{'main-container': true, dark: darkMode}">
     <div class="slider-bar">
       <a-menu
         v-model:selectedKeys="active"
@@ -37,18 +37,24 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { useRouter } from "vue-router";
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 import {
   HeartOutlined,
-  UserOutlined,
   AppstoreOutlined,
   SettingOutlined,
-  BugOutlined
-} from "@ant-design/icons-vue";
-import { useStore } from "vuex";
+  BugOutlined,
+} from '@ant-design/icons-vue';
+import { useStore } from 'vuex';
+
+const { remote } = window.require('electron');
+
+const { perf } = remote.getGlobal('OP_CONFIG').get();
+
+const darkMode = ref(perf.common.darkMode);
+
 const router = useRouter();
-const active = ref(["market"]);
+const active = ref(['market']);
 const changeMenu = (key: any) => {
   router.push(key);
 };
@@ -59,7 +65,7 @@ window.rubick.onPluginEnter(({ code }: { code: string }) => {
 });
 
 const store = useStore();
-const init = () => store.dispatch("init");
+const init = () => store.dispatch('init');
 init();
 </script>
 <style lang="less" scoped>
diff --git a/feature/src/assets/ant-reset.less b/feature/src/assets/ant-reset.less
index 311cc99..9435b0d 100644
--- a/feature/src/assets/ant-reset.less
+++ b/feature/src/assets/ant-reset.less
@@ -1,8 +1,3 @@
-@import "~ant-design-vue/dist/antd.less"; // 引入官方提供的 less 样式入口文件
-
-@primary-color: #ff4ea4; // 全局主色
-@error-color: #ff4ea4; // 错误色
-
 :root {
   --color-text-primary: rgba(0, 0, 0, 0.85);
   --color-text-content: #141414;
diff --git a/feature/src/views/settings/index.vue b/feature/src/views/settings/index.vue
index 0dc01d4..f025ff1 100644
--- a/feature/src/views/settings/index.vue
+++ b/feature/src/views/settings/index.vue
@@ -427,12 +427,13 @@ const {shortCut, common, local, global} = toRefs(state);
           font-size: 14px;
           height: 24px;
           font-weight: lighter;
-          
+          background: var(--color-input-hover);
           .ant-input {
             text-align: center;
             color: var(--ant-primary-color);
             font-size: 14px;
             font-weight: lighter;
+            background: var(--color-input-hover);
           }
         }
         
diff --git a/package.json b/package.json
index 89e474b..fd3d464 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rubick",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "author": "muwoo <2424880409@qq.com>",
   "private": true,
   "scripts": {
diff --git a/src/common/constans/defaultConfig.ts b/src/common/constans/defaultConfig.ts
index fb31e37..3b69bdd 100644
--- a/src/common/constans/defaultConfig.ts
+++ b/src/common/constans/defaultConfig.ts
@@ -1,12 +1,12 @@
 export default {
-  version: 9,
+  version: 11,
   perf: {
     custom: {
-      primaryColor: '#106898',
+      primaryColor: '#ff4ea4',
       errorColor: '#ed6d46',
       warningColor: '#e5a84b',
       successColor: '#c0d695',
-      infoColor: '#007175',
+      infoColor: '#aa8eeB',
       logo: `file://${__static}/logo.png`,
       placeholder: '你好 rubick',
     },
diff --git a/src/main/browsers/detach.ts b/src/main/browsers/detach.ts
index 24409f8..3f50a90 100644
--- a/src/main/browsers/detach.ts
+++ b/src/main/browsers/detach.ts
@@ -13,6 +13,7 @@ export default () => {
       width: viewInfo.width,
       autoHideMenuBar: true,
       titleBarStyle: 'hidden',
+      titleBarOverlay: true,
       trafficLightPosition: { x: 12, y: 21 },
       title: pluginInfo.pluginName,
       resizable: true,
@@ -44,6 +45,11 @@ export default () => {
     });
 
     win.once('ready-to-show', () => {
+      const darkMode = global.OP_CONFIG.get().perf.common.darkMode;
+      darkMode &&
+        win.webContents.executeJavaScript(
+          `document.body.classList.add("dark");window.rubick.theme="dark"`
+        );
       win.setBrowserView(view);
       win.webContents.executeJavaScript(
         `window.initDetach(${JSON.stringify(pluginInfo)})`