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;
   }