diff --git a/dist-electron/main/main.js b/dist-electron/main/main.js
index 2a3e22d..a8c04dd 100644
--- a/dist-electron/main/main.js
+++ b/dist-electron/main/main.js
@@ -1,7 +1,2 @@
-"use strict";
-require("electron");
-require("./main-D4EDpIiu.js");
-require("electron-squirrel-startup");
-require("electron-log");
-require("bytenode");
-require("axios");
+require('bytenode')
+require('./main.jsc')
\ No newline at end of file
diff --git a/dist-electron/preload/preload.js b/dist-electron/preload/preload.js
index d7b783e..fbd36fb 100644
--- a/dist-electron/preload/preload.js
+++ b/dist-electron/preload/preload.js
@@ -1,118 +1 @@
-"use strict";
-const electron = require("electron");
-var IPC_EVENTS = /* @__PURE__ */ ((IPC_EVENTS2) => {
-  IPC_EVENTS2["EXTERNAL_OPEN"] = "external-open";
-  IPC_EVENTS2["APP_SET_FRAMELESS"] = "app:set-frameless";
-  IPC_EVENTS2["APP_LOAD_PAGE"] = "app:load-page";
-  IPC_EVENTS2["TAB_CREATE"] = "tab:create";
-  IPC_EVENTS2["TAB_LIST"] = "tab:list";
-  IPC_EVENTS2["TAB_NAVIGATE"] = "tab:navigate";
-  IPC_EVENTS2["TAB_RELOAD"] = "tab:reload";
-  IPC_EVENTS2["TAB_BACK"] = "tab:back";
-  IPC_EVENTS2["TAB_FORWARD"] = "tab:forward";
-  IPC_EVENTS2["TAB_SWITCH"] = "tab:switch";
-  IPC_EVENTS2["TAB_CLOSE"] = "tab:close";
-  IPC_EVENTS2["LOG_TO_MAIN"] = "log-to-main";
-  IPC_EVENTS2["READ_FILE"] = "read-file";
-  IPC_EVENTS2["INVOKE"] = "ipc:invoke";
-  IPC_EVENTS2["INVOKE_ASYNC"] = "ipc:invokeAsync";
-  IPC_EVENTS2["APP_MINIMIZE"] = "app:minimize";
-  IPC_EVENTS2["APP_MAXIMIZE"] = "app:maximize";
-  IPC_EVENTS2["APP_QUIT"] = "app:quit";
-  IPC_EVENTS2["FILE_READ"] = "file:read";
-  IPC_EVENTS2["FILE_WRITE"] = "file:write";
-  IPC_EVENTS2["GET_WINDOW_ID"] = "get-window-id";
-  IPC_EVENTS2["CUSTOM_EVENT"] = "custom:event";
-  IPC_EVENTS2["TIME_UPDATE"] = "time:update";
-  IPC_EVENTS2["RENDERER_IS_READY"] = "renderer-ready";
-  IPC_EVENTS2["SHOW_CONTEXT_MENU"] = "show-context-menu";
-  IPC_EVENTS2["START_A_DIALOGUE"] = "start-a-dialogue";
-  IPC_EVENTS2["OPEN_WINDOW"] = "open-window";
-  IPC_EVENTS2["LOG_DEBUG"] = "log-debug";
-  IPC_EVENTS2["LOG_INFO"] = "log-info";
-  IPC_EVENTS2["LOG_WARN"] = "log-warn";
-  IPC_EVENTS2["LOG_ERROR"] = "log-error";
-  IPC_EVENTS2["CONFIG_UPDATED"] = "config-updated";
-  IPC_EVENTS2["SET_CONFIG"] = "set-config";
-  IPC_EVENTS2["GET_CONFIG"] = "get-config";
-  IPC_EVENTS2["UPDATE_CONFIG"] = "update-config";
-  IPC_EVENTS2["SET_THEME_MODE"] = "set-theme-mode";
-  IPC_EVENTS2["GET_THEME_MODE"] = "get-theme-mode";
-  IPC_EVENTS2["IS_DARK_THEME"] = "is-dark-theme";
-  IPC_EVENTS2["THEME_MODE_UPDATED"] = "theme-mode-updated";
-  IPC_EVENTS2["EXECUTE_SCRIPT"] = "execute-script";
-  IPC_EVENTS2["OPEN_CHANNEL"] = "open-channel";
-  IPC_EVENTS2["SCRIPT_LIST"] = "script:list";
-  IPC_EVENTS2["SCRIPT_GET"] = "script:get";
-  IPC_EVENTS2["SCRIPT_SAVE"] = "script:save";
-  IPC_EVENTS2["SCRIPT_DELETE"] = "script:delete";
-  IPC_EVENTS2["SCRIPT_TOGGLE"] = "script:toggle";
-  IPC_EVENTS2["SCRIPT_RUN"] = "script:run";
-  IPC_EVENTS2["SCRIPT_RECORD_START"] = "script:record-start";
-  IPC_EVENTS2["SCRIPT_RECORD_STOP"] = "script:record-stop";
-  IPC_EVENTS2["SCRIPT_CODEGEN"] = "script:codegen";
-  IPC_EVENTS2["GATEWAY_RPC"] = "gateway:rpc";
-  IPC_EVENTS2["GATEWAY_EVENT"] = "gateway:event";
-  IPC_EVENTS2["UPDATE_CHECK"] = "update:check";
-  IPC_EVENTS2["UPDATE_DOWNLOAD"] = "update:download";
-  IPC_EVENTS2["UPDATE_INSTALL"] = "update:install";
-  IPC_EVENTS2["UPDATE_VERSION"] = "update:version";
-  IPC_EVENTS2["UPDATE_STATUS_CHANGED"] = "update:status-changed";
-  return IPC_EVENTS2;
-})(IPC_EVENTS || {});
-const api = {
-  versions: process.versions,
-  external: {
-    open: (url) => electron.ipcRenderer.invoke("external-open", url)
-  },
-  platform: process.platform,
-  windowMinimize: () => electron.ipcRenderer.invoke("window:minimize"),
-  windowMaximize: () => electron.ipcRenderer.invoke("window:maximize"),
-  windowClose: () => electron.ipcRenderer.invoke("window:close"),
-  windowIsMaximized: () => electron.ipcRenderer.invoke("window:isMaximized"),
-  viewIsReady: () => electron.ipcRenderer.send(IPC_EVENTS.RENDERER_IS_READY),
-  app: {
-    setFrameless: (route) => electron.ipcRenderer.invoke(IPC_EVENTS.APP_SET_FRAMELESS, route),
-    loadPage: (page) => electron.ipcRenderer.invoke(IPC_EVENTS.APP_LOAD_PAGE, page)
-  },
-  // 通过 IPC 调用主进程
-  readFile: (filePath) => electron.ipcRenderer.invoke(IPC_EVENTS.READ_FILE, filePath),
-  // 异步调用(映射为 electron 的 invoke)
-  invoke: (channel, ...args) => electron.ipcRenderer.invoke(channel, ...args),
-  // 异步调用(为了兼容老代码)
-  invokeAsync: (channel, ...args) => electron.ipcRenderer.invoke(channel, ...args),
-  // 监听主进程消息
-  on: (event, callback) => {
-    const subscription = (_event, ...args) => callback(...args);
-    electron.ipcRenderer.on(event, subscription);
-    return () => electron.ipcRenderer.removeListener(event, subscription);
-  },
-  // 发送消息到主进程
-  send: (channel, ...args) => electron.ipcRenderer.send(channel, ...args),
-  // 获取窗口ID
-  getCurrentWindowId: () => electron.ipcRenderer.sendSync(IPC_EVENTS.GET_WINDOW_ID),
-  // 发送日志
-  logger: {
-    debug: (message, ...meta) => electron.ipcRenderer.send(IPC_EVENTS.LOG_DEBUG, message, ...meta),
-    info: (message, ...meta) => electron.ipcRenderer.send(IPC_EVENTS.LOG_INFO, message, ...meta),
-    warn: (message, ...meta) => electron.ipcRenderer.send(IPC_EVENTS.LOG_WARN, message, ...meta),
-    error: (message, ...meta) => electron.ipcRenderer.send(IPC_EVENTS.LOG_ERROR, message, ...meta)
-  },
-  // 执行脚本
-  executeScript: (params) => electron.ipcRenderer.invoke(IPC_EVENTS.EXECUTE_SCRIPT, params),
-  // 打开渠道
-  openChannel: (channels) => electron.ipcRenderer.invoke(IPC_EVENTS.OPEN_CHANNEL, channels),
-  // 脚本管理
-  scriptApi: {
-    list: () => electron.ipcRenderer.invoke(IPC_EVENTS.SCRIPT_LIST),
-    get: (id) => electron.ipcRenderer.invoke(IPC_EVENTS.SCRIPT_GET, id),
-    save: (input) => electron.ipcRenderer.invoke(IPC_EVENTS.SCRIPT_SAVE, input),
-    delete: (id) => electron.ipcRenderer.invoke(IPC_EVENTS.SCRIPT_DELETE, id),
-    toggle: (id, enabled) => electron.ipcRenderer.invoke(IPC_EVENTS.SCRIPT_TOGGLE, id, enabled),
-    run: (id) => electron.ipcRenderer.invoke(IPC_EVENTS.SCRIPT_RUN, id),
-    startRecording: (url) => electron.ipcRenderer.invoke(IPC_EVENTS.SCRIPT_RECORD_START, url),
-    stopRecording: () => electron.ipcRenderer.invoke(IPC_EVENTS.SCRIPT_RECORD_STOP),
-    codegen: (id, url) => electron.ipcRenderer.invoke(IPC_EVENTS.SCRIPT_CODEGEN, id, url)
-  }
-};
-electron.contextBridge.exposeInMainWorld("api", api);
+"use strict";const i=require("electron");var n=(e=>(e.EXTERNAL_OPEN="external-open",e.APP_SET_FRAMELESS="app:set-frameless",e.APP_LOAD_PAGE="app:load-page",e.TAB_CREATE="tab:create",e.TAB_LIST="tab:list",e.TAB_NAVIGATE="tab:navigate",e.TAB_RELOAD="tab:reload",e.TAB_BACK="tab:back",e.TAB_FORWARD="tab:forward",e.TAB_SWITCH="tab:switch",e.TAB_CLOSE="tab:close",e.LOG_TO_MAIN="log-to-main",e.READ_FILE="read-file",e.INVOKE="ipc:invoke",e.INVOKE_ASYNC="ipc:invokeAsync",e.APP_MINIMIZE="app:minimize",e.APP_MAXIMIZE="app:maximize",e.APP_QUIT="app:quit",e.FILE_READ="file:read",e.FILE_WRITE="file:write",e.GET_WINDOW_ID="get-window-id",e.CUSTOM_EVENT="custom:event",e.TIME_UPDATE="time:update",e.RENDERER_IS_READY="renderer-ready",e.SHOW_CONTEXT_MENU="show-context-menu",e.START_A_DIALOGUE="start-a-dialogue",e.OPEN_WINDOW="open-window",e.LOG_DEBUG="log-debug",e.LOG_INFO="log-info",e.LOG_WARN="log-warn",e.LOG_ERROR="log-error",e.CONFIG_UPDATED="config-updated",e.SET_CONFIG="set-config",e.GET_CONFIG="get-config",e.UPDATE_CONFIG="update-config",e.SET_THEME_MODE="set-theme-mode",e.GET_THEME_MODE="get-theme-mode",e.IS_DARK_THEME="is-dark-theme",e.THEME_MODE_UPDATED="theme-mode-updated",e.EXECUTE_SCRIPT="execute-script",e.OPEN_CHANNEL="open-channel",e.SCRIPT_LIST="script:list",e.SCRIPT_GET="script:get",e.SCRIPT_SAVE="script:save",e.SCRIPT_DELETE="script:delete",e.SCRIPT_TOGGLE="script:toggle",e.SCRIPT_RUN="script:run",e.SCRIPT_RECORD_START="script:record-start",e.SCRIPT_RECORD_STOP="script:record-stop",e.SCRIPT_CODEGEN="script:codegen",e.GATEWAY_RPC="gateway:rpc",e.GATEWAY_EVENT="gateway:event",e.UPDATE_CHECK="update:check",e.UPDATE_DOWNLOAD="update:download",e.UPDATE_INSTALL="update:install",e.UPDATE_VERSION="update:version",e.UPDATE_STATUS_CHANGED="update:status-changed",e))(n||{});const t={versions:process.versions,external:{open:e=>i.ipcRenderer.invoke("external-open",e)},platform:process.platform,windowMinimize:()=>i.ipcRenderer.invoke("window:minimize"),windowMaximize:()=>i.ipcRenderer.invoke("window:maximize"),windowClose:()=>i.ipcRenderer.invoke("window:close"),windowIsMaximized:()=>i.ipcRenderer.invoke("window:isMaximized"),viewIsReady:()=>i.ipcRenderer.send(n.RENDERER_IS_READY),app:{setFrameless:e=>i.ipcRenderer.invoke(n.APP_SET_FRAMELESS,e),loadPage:e=>i.ipcRenderer.invoke(n.APP_LOAD_PAGE,e)},readFile:e=>i.ipcRenderer.invoke(n.READ_FILE,e),invoke:(e,...r)=>i.ipcRenderer.invoke(e,...r),invokeAsync:(e,...r)=>i.ipcRenderer.invoke(e,...r),on:(e,r)=>{const o=(d,...R)=>r(...R);return i.ipcRenderer.on(e,o),()=>i.ipcRenderer.removeListener(e,o)},send:(e,...r)=>i.ipcRenderer.send(e,...r),getCurrentWindowId:()=>i.ipcRenderer.sendSync(n.GET_WINDOW_ID),logger:{debug:(e,...r)=>i.ipcRenderer.send(n.LOG_DEBUG,e,...r),info:(e,...r)=>i.ipcRenderer.send(n.LOG_INFO,e,...r),warn:(e,...r)=>i.ipcRenderer.send(n.LOG_WARN,e,...r),error:(e,...r)=>i.ipcRenderer.send(n.LOG_ERROR,e,...r)},executeScript:e=>i.ipcRenderer.invoke(n.EXECUTE_SCRIPT,e),openChannel:e=>i.ipcRenderer.invoke(n.OPEN_CHANNEL,e),scriptApi:{list:()=>i.ipcRenderer.invoke(n.SCRIPT_LIST),get:e=>i.ipcRenderer.invoke(n.SCRIPT_GET,e),save:e=>i.ipcRenderer.invoke(n.SCRIPT_SAVE,e),delete:e=>i.ipcRenderer.invoke(n.SCRIPT_DELETE,e),toggle:(e,r)=>i.ipcRenderer.invoke(n.SCRIPT_TOGGLE,e,r),run:e=>i.ipcRenderer.invoke(n.SCRIPT_RUN,e),startRecording:e=>i.ipcRenderer.invoke(n.SCRIPT_RECORD_START,e),stopRecording:()=>i.ipcRenderer.invoke(n.SCRIPT_RECORD_STOP),codegen:(e,r)=>i.ipcRenderer.invoke(n.SCRIPT_CODEGEN,e,r)}};i.contextBridge.exposeInMainWorld("api",t);
diff --git a/dist/index.html b/dist/index.html
index 4330d23..6add19d 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,17 +1,17 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>NIANXX</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
-      http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: http://8.138.234.141 https://one-feel-bucket.oss-cn-guangzhou.aliyuncs.com; connect-src 'self' http://8.138.234.141 https://api.iconify.design wss://onefeel.brother7.cn"
-    />
-    <script type="module" crossorigin src="./assets/index-CtY0TCqT.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-Dd5p8HHW.css">
-  </head>
-  <body>
-    <div id="app"></div>

-  </body>
-</html>
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>NIANXX</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: http://8.138.234.141 https://one-feel-bucket.oss-cn-guangzhou.aliyuncs.com; connect-src 'self' http://8.138.234.141 https://api.iconify.design wss://onefeel.brother7.cn"
+    />
+    <script type="module" crossorigin src="./assets/index-CfM9LZqc.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CAGR0NJ4.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/src/components/Layout/TitleBar/index.vue b/src/components/Layout/TitleBar/index.vue
index 2c71cc5..959a44c 100644
--- a/src/components/Layout/TitleBar/index.vue
+++ b/src/components/Layout/TitleBar/index.vue
@@ -49,11 +49,11 @@ const platform = (window as any).api?.platform ?? ''
 const maximized = ref(false)
 
 const iconColorClass = computed(() =>
-  props.variant === 'light' ? 'text-white' : 'text-[#525866]'
+  props.variant === 'light' ? 'text-white' : 'text-[#525866] dark:text-gray-300'
 )
 
 const borderColorClass = computed(() =>
-  props.variant === 'light' ? 'border-b-white/30' : 'border-b-gray-300'
+  props.variant === 'light' ? 'border-b-white/30' : 'border-b-gray-300 dark:border-gray-700'
 )
 
 onMounted(async () => {
diff --git a/src/components/Layout/index.vue b/src/components/Layout/index.vue
index 7fcd79a..2471ae6 100644
--- a/src/components/Layout/index.vue
+++ b/src/components/Layout/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-color h-screen flex flex-col">
+  <div class="bg-color dark:bg-[#0f0f10]! h-screen flex flex-col">
     <title-bar v-if="platform !== 'linux'" />
 
     <main
@@ -23,7 +23,5 @@ const platform = computed(() => (window as any).api?.platform ?? '')
 </script>
 
 <style scoped>
-.bg-color {
-  background: linear-gradient(180deg, #EFF6FF 0%, #F5F7FA 40%);
-}
+
 </style>
diff --git a/src/components/SideMenus/index.vue b/src/components/SideMenus/index.vue
index 6d77551..61149cf 100644
--- a/src/components/SideMenus/index.vue
+++ b/src/components/SideMenus/index.vue
@@ -3,7 +3,7 @@
         <div :class="['flex flex-col gap-[16px]', { 'mt-auto mb-[8px] shrink-1': item.url === '/setting' }]"
             v-for="(item) in menus" :key="item.id">
             <div :class="['cursor-pointer flex flex-col items-center justify-center']" @click="handleClick(item)">
-                <div :class="['box-border rounded-[16px] w-[48px] h-[48px] flex flex-col items-center justify-center hover:bg-white', { 'bg-white': item.id === currentId }]">
+                <div :class="['box-border rounded-[16px] w-[48px] h-[48px] flex flex-col items-center justify-center hover:bg-white dark:hover:bg-[#222225]', { 'bg-white dark:bg-[#222225]': item.id === currentId }]">
                     <component :is="item.icon" :color="item.id === currentId ? item.activeColor : item.color"
                         :class="['w-[32px] h-[32px]]']" />
                 </div>
diff --git a/src/components/TaskList/Card.vue b/src/components/TaskList/Card.vue
index f973994..947836f 100644
--- a/src/components/TaskList/Card.vue
+++ b/src/components/TaskList/Card.vue
@@ -8,13 +8,13 @@
 -->
 <template>
     <div v-for="item in task" :key="item.id"
-        class="border border-solid border-[#E5E8EE] rounded-[12px] p-[12px] mb-[12px] task">
-        <div class="flex items-center pb-[12px]" style="border-bottom: 1px dashed #E5E8EE;">
+        class="border border-solid border-[#E5E8EE] dark:border-[#2a2a2d] rounded-[12px] p-[12px] mb-[12px] task dark:bg-[#1f1f22]">
+        <div class="flex items-center pb-[12px] border-b border-dashed border-[#E5E8EE] dark:border-[#2a2a2d]">
             <!-- <img class="w-[24px] h-[24px] rounded-[8px]] mr-[4px]" src="@assets/images/task/xc.png" /> -->
             <div
-                class="w-[24px] h-[24px] rounded-[4px] bg-[#EFF6FF] text-[#2B7FFF] text-[14px] font-bold border border-solid border-[#BEDBFF] flex justify-center items-center">
+                class="w-[24px] h-[24px] rounded-[4px] bg-[#EFF6FF] dark:bg-[#1f1f22] text-[#2B7FFF] text-[14px] font-bold border border-solid border-[#BEDBFF] dark:border-[#2a2a2d] flex justify-center items-center">
                 {{ item.name[0] }}</div>
-            <div class="text-[16px] text-[#171717] font-bold mr-[8px] ml-[4px]">{{ item.name }}</div>
+            <div class="text-[16px] text-[#171717] dark:text-gray-100 font-bold mr-[8px] ml-[4px]">{{ item.name }}</div>
             <div class="pl-[8px] pr-[8px] text-[12px] rounded-[100px]" :class="item.statusColor">{{
                 item.statusText }}</div>
         </div>
diff --git a/src/components/TaskList/List.vue b/src/components/TaskList/List.vue
index bd349ea..2be7590 100644
--- a/src/components/TaskList/List.vue
+++ b/src/components/TaskList/List.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="task p-[12px]">
-        <div class="flex border border-[#BEDBFF] h-[48px] p-[4px] rounded-[10px] bg-[#EFF6FF] task-tab">
+        <div class="flex border border-[#BEDBFF] dark:border-[#2a2a2d] h-[48px] p-[4px] rounded-[10px] bg-[#EFF6FF] dark:bg-[#1f1f22] task-tab">
             <div v-for="item in tabs" :key="item.value" class="flex-1 flex text-center items-center h-full align-middle text" :class="active === item.value && 'active'" @click="changeTab(item.value)">
                 <div class="flex-1">{{ item.name }}<span v-if="item.total">{{`（${item.total > 98 && item.total + '+' || item.total}）`}}</span></div>
             </div>
         </div>
         <div class="flex justify-between mt-[12px] mb-[12px] text-[14px]">
-            <div class="text-[#171717]">今天</div>
-            <div class="text-[#99A0AE]">02:32:05</div>
+            <div class="text-[#171717] dark:text-gray-100">今天</div>
+            <div class="text-[#99A0AE] dark:text-gray-500">02:32:05</div>
         </div>
         <div>
             <TaskCard />
@@ -40,12 +40,23 @@ const changeTab = (val:number) => {
     font-size: 14px;
     cursor: pointer;
 }
+
+:global(.dark) .task-tab .text {
+    color: #9ca3af;
+}
+
 .task-tab .active {
     position: relative;
     color: #2B7FFF;
     background: #FFFFFF;
     border-radius: 8px;
 }
+
+:global(.dark) .task-tab .active {
+    color: #2B7FFF;
+    background: #1f1f22;
+}
+
 .task-tab .active::after {
     position: absolute;
     left: 0;
@@ -56,4 +67,8 @@ const changeTab = (val:number) => {
     border-radius: 8px;
     border: 1px solid #2B7FFF;
 }
+
+:global(.dark) .task-tab .active::after {
+    border: 1px solid #2B7FFF;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/TaskList/index.vue b/src/components/TaskList/index.vue
index 13df722..85dc920 100644
--- a/src/components/TaskList/index.vue
+++ b/src/components/TaskList/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="task-list w-[392px] h-full rounded-[16px] bg-white">
+    <div class="task-list w-[392px] h-full rounded-[16px] bg-white dark:bg-[#1b1b1d]">
         <slot>
             <TaskList />
         </slot>
@@ -31,6 +31,10 @@ const changeTab = (val: number) => {
     cursor: pointer;
 }
 
+:global(.dark) .task-tab .text {
+    color: #9ca3af;
+}
+
 .task-tab .active {
     position: relative;
     color: #2B7FFF;
@@ -38,6 +42,11 @@ const changeTab = (val: number) => {
     border-radius: 8px;
 }
 
+:global(.dark) .task-tab .active {
+    color: #2B7FFF;
+    background: #1f1f22;
+}
+
 .task-tab .active::after {
     position: absolute;
     left: 0;
@@ -48,4 +57,8 @@ const changeTab = (val: number) => {
     border-radius: 8px;
     border: 1px solid #2B7FFF;
 }
+
+:global(.dark) .task-tab .active::after {
+    border: 1px solid #2B7FFF;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/TitleSection/index.vue b/src/components/TitleSection/index.vue
index 4ce2ff3..5847646 100644
--- a/src/components/TitleSection/index.vue
+++ b/src/components/TitleSection/index.vue
@@ -7,17 +7,17 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-    <div class="flex justify-between items-center box-border border-b-[1px] border-b-[#E5E8EE] mb-[20px] pb-[20px]">
+    <div class="flex justify-between items-center box-border border-b-[1px] border-b-[#E5E8EE] dark:border-b-gray-700 mb-[20px] pb-[20px]">
         <div class="flex">
             <div class="flex items-center">
-                <el-icon v-if="attrs.onBackTo" @click="emits('back-to', true)" size="18px" color="#525866" class="mr-[15px] cursor-pointer">
+                <el-icon v-if="attrs.onBackTo" @click="emits('back-to', true)" size="18px" color="#525866" class="mr-[15px] cursor-pointer dark:!text-gray-400">
                     <ArrowLeftBold />
                 </el-icon>
-                <span class="text-[24px] font-500 text-[#171717] leading-[32px] mr-[8px]">
+                <span class="text-[24px] font-500 text-[#171717] dark:text-gray-100 leading-[32px] mr-[8px]">
                     {{ title }}
                 </span>
             </div>
-            <span class="text-[12px] font-400 text-[#99A0AE] leading-[16px]" style="align-self: flex-end;">
+            <span class="text-[12px] font-400 text-[#99A0AE] dark:text-gray-500 leading-[16px]" style="align-self: flex-end;">
                 {{ desc }}
             </span>
         </div>
diff --git a/src/main.ts b/src/main.ts
index 4795631..5c9c6e7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,6 +15,7 @@ import './permission'
 // 样式文件隔离
 import "./styles/index.css";
 import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 
 // 引入全局组件
 import Layout from '@components/Layout/index.vue'
diff --git a/src/pages/agents/components/ProvidersSettings.vue b/src/pages/agents/components/ProvidersSettings.vue
index fb6521e..11d8177 100644
--- a/src/pages/agents/components/ProvidersSettings.vue
+++ b/src/pages/agents/components/ProvidersSettings.vue
@@ -2,8 +2,8 @@
   <div class="space-y-6">
     <div class="flex items-center justify-between">
       <div>
-        <h3 class="text-lg font-medium text-[#171717]">{{ t('models.aiProviders.title', 'AI Providers') }}</h3>
-        <p class="text-sm text-[#99A0AE] mt-1">{{ t('models.aiProviders.subtitle', 'Manage your AI models and API keys.') }}</p>
+        <h3 class="text-lg font-medium text-[#171717] dark:text-[#f3f4f6]">{{ t('models.aiProviders.title', 'AI Providers') }}</h3>
+        <p class="text-sm text-[#99A0AE] dark:text-gray-500 mt-1">{{ t('models.aiProviders.subtitle', 'Manage your AI models and API keys.') }}</p>
       </div>
       <el-button type="primary" @click="showAddDialog = true">
         <el-icon class="mr-1"><Plus /></el-icon>
@@ -12,7 +12,7 @@
     </div>
 
     <!-- Provider List -->
-    <div v-if="loading" class="py-8 text-center text-[#99A0AE]">
+    <div v-if="loading" class="py-8 text-center text-[#99A0AE] dark:text-gray-500">
       <el-icon class="is-loading text-2xl"><Loading /></el-icon>
     </div>
     
@@ -20,19 +20,19 @@
       <el-card v-for="item in displayProviders" :key="item.account.id" shadow="hover" class="provider-card">
         <div class="flex items-start justify-between">
           <div class="flex items-center gap-4">
-            <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-xl overflow-hidden border border-gray-200">
+            <div class="w-10 h-10 rounded-full bg-gray-100 dark:bg-[#222225] flex items-center justify-center text-xl overflow-hidden border border-gray-200 dark:border-[#2a2a2d]">
               {{ item.vendor?.icon || '🤖' }}
             </div>
             <div>
               <div class="flex items-center gap-2">
-                <span class="font-medium text-[16px] text-[#171717]">{{ item.account.label || item.vendor?.name }}</span>
+                <span class="font-medium text-[16px] text-[#171717] dark:text-[#f3f4f6]">{{ item.account.label || item.vendor?.name }}</span>
                 <el-tag size="small" :type="item.account.isDefault ? 'success' : 'info'" v-if="item.account.isDefault">
                   {{ t('models.aiProviders.default', 'Default') }}
                 </el-tag>
               </div>
-              <div class="text-sm text-[#99A0AE] mt-1 flex items-center gap-2">
+              <div class="text-sm text-[#99A0AE] dark:text-gray-500 mt-1 flex items-center gap-2">
                 <span v-if="item.account.baseUrl" class="truncate max-w-[200px]">{{ item.account.baseUrl }}</span>
-                <span v-if="item.account.model" class="truncate max-w-[150px] bg-gray-100 px-2 py-0.5 rounded text-xs">{{ item.account.model }}</span>
+                <span v-if="item.account.model" class="truncate max-w-[150px] bg-gray-100 dark:bg-[#222225] px-2 py-0.5 rounded text-xs">{{ item.account.model }}</span>
                 <span v-if="item.status?.hasKey" class="text-green-600 text-xs flex items-center">
                   <el-icon class="mr-1"><Check /></el-icon> {{ t('models.aiProviders.configured', 'Configured') }}
                 </span>
@@ -61,7 +61,7 @@
         </div>
       </el-card>
       
-      <div v-if="displayProviders.length === 0" class="text-center py-12 border border-dashed border-gray-300 rounded-lg text-gray-500">
+      <div v-if="displayProviders.length === 0" class="text-center py-12 border border-dashed border-gray-300 dark:border-[#2a2a2d] rounded-lg text-gray-500 dark:text-gray-400">
         {{ t('models.aiProviders.empty', 'No providers configured yet. Click "Add Provider" to start.') }}
       </div>
     </div>
@@ -76,27 +76,27 @@
       <div class="p-[30px] pb-[20px]">
         <div class="flex justify-between items-start mb-[24px]">
           <div>
-            <h2 class="text-[24px] font-serif text-[#171717] mb-[8px] font-normal tracking-tight">
+            <h2 class="text-[24px] font-serif text-[#171717] dark:text-[#f3f4f6] mb-[8px] font-normal tracking-tight">
               {{ editingItem?.account.id.includes('-') ? t('models.aiProviders.addProvider', '添加 AI 提供商') : t('models.aiProviders.editProvider', '编辑提供商') }}
             </h2>
-            <p class="text-[14px] text-[#99A0AE]">
+            <p class="text-[14px] text-[#99A0AE] dark:text-gray-500">
               配置新的 AI 模型提供商
             </p>
           </div>
-          <button @click="editDialogVisible = false" class="text-[#99A0AE] hover:text-[#171717] transition-colors mt-[4px]">
+          <button @click="editDialogVisible = false" class="text-[#99A0AE] dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] transition-colors mt-[4px]">
             <el-icon class="text-[20px]"><Close /></el-icon>
           </button>
         </div>
 
-        <div class="bg-white rounded-[16px] p-[20px] flex items-center gap-[16px] mb-[24px] shadow-sm">
-          <div class="w-[48px] h-[48px] rounded-[14px] bg-[#F4F3EB] flex items-center justify-center text-[24px] overflow-hidden">
+        <div class="bg-white dark:bg-[#1f1f22] rounded-[16px] p-[20px] flex items-center gap-[16px] mb-[24px] shadow-sm">
+          <div class="w-[48px] h-[48px] rounded-[14px] bg-[#F4F3EB] dark:bg-[#222225] flex items-center justify-center text-[24px] overflow-hidden">
             {{ editingItem?.vendor?.icon || '🤖' }}
           </div>
           <div class="flex flex-col">
-            <span class="text-[16px] font-medium text-[#171717] mb-[4px]">{{ editingItem?.vendor?.name }}</span>
-            <div class="flex items-center text-[13px] text-[#007AFF]">
+            <span class="text-[16px] font-medium text-[#171717] dark:text-[#f3f4f6] mb-[4px]">{{ editingItem?.vendor?.name }}</span>
+            <div class="flex items-center text-[13px] text-[#007AFF] dark:text-blue-400">
               <a href="javascript:void(0)" @click="showAddDialog = true; editDialogVisible = false" class="hover:underline">更换提供商</a>
-              <span class="mx-[8px] text-[#E5E8EE]">|</span>
+              <span class="mx-[8px] text-[#E5E8EE] dark:text-[#2a2a2d]">|</span>
               <a v-if="editingItem?.vendor?.docsUrl" :href="editingItem.vendor.docsUrl" target="_blank" class="hover:underline flex items-center gap-[4px]">
                 查看文档
                 <el-icon class="text-[12px]"><TopRight /></el-icon>
@@ -137,7 +137,7 @@
           </template>
         </el-form>
 
-        <div class="h-[1px] bg-[rgba(0,0,0,0.05)] w-full my-[24px]"></div>
+        <div class="h-[1px] bg-[rgba(0,0,0,0.05)] dark:bg-[rgba(255,255,255,0.08)] w-full my-[24px]"></div>
 
         <div class="flex justify-end">
           <el-button type="primary" @click="saveEdit" :loading="saving" class="h-[40px] px-[24px] rounded-[20px] bg-[#007AFF] hover:bg-[#0066FF] border-none text-[14px] font-medium">
@@ -157,29 +157,29 @@
       <div class="p-[30px]">
         <div class="flex justify-between items-start mb-[30px]">
           <div>
-            <h2 class="text-[24px] font-serif text-[#171717] mb-[8px] font-normal tracking-tight">
+            <h2 class="text-[24px] font-serif text-[#171717] dark:text-[#f3f4f6] mb-[8px] font-normal tracking-tight">
               {{ t('models.aiProviders.addProvider', 'Add AI Provider') }}
             </h2>
-            <p class="text-[14px] text-[#99A0AE]">
+            <p class="text-[14px] text-[#99A0AE] dark:text-gray-500">
               配置新的 AI 模型提供商
             </p>
           </div>
-          <button @click="showAddDialog = false" class="text-[#99A0AE] hover:text-[#171717] transition-colors mt-[4px]">
+          <button @click="showAddDialog = false" class="text-[#99A0AE] dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] transition-colors mt-[4px]">
             <el-icon class="text-[20px]"><Close /></el-icon>
           </button>
         </div>
 
         <div class="grid grid-cols-2 md:grid-cols-3 gap-[16px]">
-          <div 
-            v-for="provider in availableProviders" 
+          <div
+            v-for="provider in availableProviders"
             :key="provider.id"
             @click="selectNewProvider(provider)"
-            class="cursor-pointer border border-[rgba(0,0,0,0.05)] rounded-[16px] p-[20px] flex flex-col items-center justify-center gap-[12px] bg-[rgba(255,255,255,0.4)] hover:bg-[rgba(255,255,255,0.8)] transition-all duration-200"
+            class="cursor-pointer border border-[rgba(0,0,0,0.05)] dark:border-[rgba(255,255,255,0.08)] rounded-[16px] p-[20px] flex flex-col items-center justify-center gap-[12px] bg-[rgba(255,255,255,0.4)] dark:bg-[#1f1f22] hover:bg-[rgba(255,255,255,0.8)] dark:hover:bg-[#2a2a2d] transition-all duration-200"
           >
-            <div class="w-[48px] h-[48px] rounded-[14px] bg-[rgba(0,0,0,0.05)] flex items-center justify-center text-[24px] overflow-hidden">
+            <div class="w-[48px] h-[48px] rounded-[14px] bg-[rgba(0,0,0,0.05)] dark:bg-[#222225] flex items-center justify-center text-[24px] overflow-hidden">
               {{ provider.icon || '🤖' }}
             </div>
-            <span class="text-[14px] font-medium text-[#171717] text-center">{{ provider.name }}</span>
+            <span class="text-[14px] font-medium text-[#171717] dark:text-[#f3f4f6] text-center">{{ provider.name }}</span>
           </div>
         </div>
       </div>
@@ -372,6 +372,9 @@ const saveEdit = async () => {
   background-color: #F4F3EB !important;
   border-radius: 20px !important;
 }
+.dark .custom-provider-dialog {
+  background-color: #1f1f22 !important;
+}
 .custom-provider-dialog .el-dialog__header {
   display: none !important;
 }
@@ -384,6 +387,9 @@ const saveEdit = async () => {
   padding-bottom: 8px !important;
   font-size: 15px !important;
 }
+.dark .custom-form .el-form-item__label {
+  color: #f3f4f6 !important;
+}
 .custom-input .el-input__wrapper {
   background-color: #F4F3EB !important;
   border: 1px solid rgba(0,0,0,0.1) !important;
@@ -391,10 +397,24 @@ const saveEdit = async () => {
   box-shadow: none !important;
   padding: 10px 16px !important;
 }
+.dark .custom-input .el-input__wrapper {
+  background-color: #222225 !important;
+  border-color: rgba(255,255,255,0.1) !important;
+}
 .custom-input .el-input__wrapper:hover, .custom-input .el-input__wrapper.is-focus {
   border-color: rgba(0,0,0,0.2) !important;
 }
+.dark .custom-input .el-input__wrapper:hover, .dark .custom-input .el-input__wrapper.is-focus {
+  border-color: rgba(255,255,255,0.2) !important;
+}
 .custom-input .el-input__inner {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+  color: #171717 !important;
+}
+.dark .custom-input .el-input__inner {
+  color: #f3f4f6 !important;
+}
+.dark .custom-input .el-input__inner::placeholder {
+  color: #9ca3af !important;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/agents/components/RequestContentDialog.vue b/src/pages/agents/components/RequestContentDialog.vue
index 9291172..7d9e941 100644
--- a/src/pages/agents/components/RequestContentDialog.vue
+++ b/src/pages/agents/components/RequestContentDialog.vue
@@ -9,20 +9,20 @@
     <div class="p-[30px]">
       <div class="flex justify-between items-start mb-[24px]">
         <div>
-          <h2 class="text-[24px] font-serif text-[#171717] mb-[8px] font-normal tracking-tight">
+          <h2 class="text-[24px] font-serif text-[#171717] dark:text-[#f3f4f6] mb-[8px] font-normal tracking-tight">
             {{ t('models.recentTokenHistory.contentDialogTitle', 'Request Content') }}
           </h2>
-          <p class="text-[14px] text-[#99A0AE]">
+          <p class="text-[14px] text-[#99A0AE] dark:text-gray-500">
             {{ entry?.model || t('models.recentTokenHistory.unknownModel', 'Unknown Model') }} • {{ formatUsageTimestamp(entry?.timestamp) }}
           </p>
         </div>
-        <button @click="visible = false" class="text-[#99A0AE] hover:text-[#171717] transition-colors mt-[4px]">
+        <button @click="visible = false" class="text-[#99A0AE] dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] transition-colors mt-[4px]">
           <el-icon class="text-[20px]"><Close /></el-icon>
         </button>
       </div>
 
-      <div class="max-h-[60vh] overflow-y-auto p-[20px] bg-white rounded-[16px] border border-[rgba(0,0,0,0.05)] shadow-sm">
-        <pre class="whitespace-pre-wrap break-words text-[13px] leading-relaxed text-[#171717] font-mono">
+      <div class="max-h-[60vh] overflow-y-auto p-[20px] bg-white dark:bg-[#1f1f22] rounded-[16px] border border-[rgba(0,0,0,0.05)] dark:border-[rgba(255,255,255,0.08)] shadow-sm">
+        <pre class="whitespace-pre-wrap break-words text-[13px] leading-relaxed text-[#171717] dark:text-[#f3f4f6] font-mono">
           {{ entry?.content }}
         </pre>
       </div>
@@ -75,6 +75,9 @@ const formatUsageTimestamp = (timestamp?: string) => {
   background-color: #F4F3EB !important;
   border-radius: 20px !important;
 }
+.dark .custom-request-dialog {
+  background-color: #1f1f22 !important;
+}
 .custom-request-dialog .el-dialog__header {
   display: none !important;
 }
diff --git a/src/pages/agents/index.vue b/src/pages/agents/index.vue
index fbbdef6..27232c4 100644
--- a/src/pages/agents/index.vue
+++ b/src/pages/agents/index.vue
@@ -1,6 +1,6 @@
 <template>
   <layout>
-    <div class="bg-white w-full h-full flex flex-col p-[20px] rounded-[16px] overflow-hidden">
+    <div class="bg-white dark:bg-[#1b1b1d] w-full h-full flex flex-col p-[20px] rounded-[16px] overflow-hidden">
       <!-- Header -->
       <TitleSection :title="t('models.title')" :desc="t('models.subtitle')" />
 
@@ -11,27 +11,27 @@
 
         <!-- Token Usage History Section -->
         <div>
-          <h2 class="text-2xl font-serif text-[#171717] mb-6 font-normal tracking-tight">
+          <h2 class="text-2xl font-serif text-[#171717] dark:text-[#f3f4f6] mb-6 font-normal tracking-tight">
             {{ t('models.recentTokenHistory.title', 'Token Usage History') }}
           </h2>
           
-          <div v-if="usageLoading" class="flex items-center justify-center py-12 text-[#99A0AE] bg-gray-50 rounded-2xl border border-transparent border-dashed">
+          <div v-if="usageLoading" class="flex items-center justify-center py-12 text-[#99A0AE] dark:text-gray-500 bg-gray-50 dark:bg-[#222225] rounded-2xl border border-transparent border-dashed dark:border-[#2a2a2d]">
             <el-icon class="is-loading mr-2 text-xl"><Loading /></el-icon>
             {{ t('models.recentTokenHistory.loading', 'Loading usage history...') }}
           </div>
           
-          <div v-else-if="visibleUsageHistory.length === 0" class="flex items-center justify-center py-12 text-[#99A0AE] bg-gray-50 rounded-2xl border border-transparent border-dashed">
+          <div v-else-if="visibleUsageHistory.length === 0" class="flex items-center justify-center py-12 text-[#99A0AE] dark:text-gray-500 bg-gray-50 dark:bg-[#222225] rounded-2xl border border-transparent border-dashed dark:border-[#2a2a2d]">
             {{ t('models.recentTokenHistory.empty', 'No usage history available.') }}
           </div>
           
-          <div v-else-if="filteredUsageHistory.length === 0" class="flex items-center justify-center py-12 text-[#99A0AE] bg-gray-50 rounded-2xl border border-transparent border-dashed">
+          <div v-else-if="filteredUsageHistory.length === 0" class="flex items-center justify-center py-12 text-[#99A0AE] dark:text-gray-500 bg-gray-50 dark:bg-[#222225] rounded-2xl border border-transparent border-dashed dark:border-[#2a2a2d]">
             {{ t('models.recentTokenHistory.emptyForWindow', 'No usage history in the selected time window.') }}
           </div>
           
           <div v-else class="space-y-6">
             <div class="flex flex-wrap items-center justify-between gap-3">
               <div class="flex flex-wrap items-center gap-3">
-                <div class="flex rounded-lg bg-gray-100 p-1 border border-gray-200">
+                <div class="flex rounded-lg bg-gray-100 dark:bg-[#222225] p-1 border border-gray-200 dark:border-[#2a2a2d]">
                   <el-button
                     :type="usageGroupBy === 'model' ? 'primary' : 'default'"
                     :plain="usageGroupBy !== 'model'"
@@ -51,7 +51,7 @@
                     {{ t('models.recentTokenHistory.groupByTime', 'By Time') }}
                   </el-button>
                 </div>
-                <div class="flex rounded-lg bg-gray-100 p-1 border border-gray-200">
+                <div class="flex rounded-lg bg-gray-100 dark:bg-[#222225] p-1 border border-gray-200 dark:border-[#2a2a2d]">
                   <el-button
                     :type="usageWindow === '7d' ? 'primary' : 'default'"
                     :plain="usageWindow !== '7d'"
@@ -81,7 +81,7 @@
                   </el-button>
                 </div>
               </div>
-              <p class="text-[13px] font-medium text-[#99A0AE]">
+              <p class="text-[13px] font-medium text-[#99A0AE] dark:text-gray-500">
                 {{ usageRefreshing
                   ? t('models.recentTokenHistory.loading', 'Loading...')
                   : t('models.recentTokenHistory.showingLast', `Showing ${filteredUsageHistory.length} records`) }}
@@ -101,14 +101,14 @@
               <div
                 v-for="entry in pagedUsageHistory"
                 :key="`${entry.sessionId}-${entry.timestamp}`"
-                class="rounded-xl bg-transparent border border-gray-200 p-5 hover:bg-gray-50 transition-colors"
+                class="rounded-xl bg-transparent dark:bg-[#1f1f22] border border-gray-200 dark:border-[#2a2a2d] p-5 hover:bg-gray-50 dark:hover:bg-[#2a2a2d] transition-colors"
               >
                 <div class="flex items-start justify-between gap-3">
                   <div class="min-w-0">
-                    <p class="font-semibold text-[15px] text-[#171717] truncate">
+                    <p class="font-semibold text-[15px] text-[#171717] dark:text-[#f3f4f6] truncate">
                       {{ entry.model || t('models.recentTokenHistory.unknownModel', 'Unknown Model') }}
                     </p>
-                    <p class="text-[13px] text-[#99A0AE] truncate mt-0.5">
+                    <p class="text-[13px] text-[#99A0AE] dark:text-gray-500 truncate mt-0.5">
                       {{ [formatUsageSource(entry.provider), formatUsageSource(entry.agentId), entry.sessionId].filter(Boolean).join(' • ') }}
                     </p>
                   </div>
@@ -116,18 +116,18 @@
                     <p :class="getUsageTotalClass(entry)">
                       {{ formatUsageTotal(entry) }}
                     </p>
-                    <p v-if="entry.usageStatus === 'missing'" class="text-[12px] text-[#99A0AE] mt-0.5">
+                    <p v-if="entry.usageStatus === 'missing'" class="text-[12px] text-[#99A0AE] dark:text-gray-500 mt-0.5">
                       {{ t('models.recentTokenHistory.noUsage', 'No usage info') }}
                     </p>
                     <p v-if="entry.usageStatus === 'error'" class="text-[12px] text-red-500 mt-0.5">
                       {{ t('models.recentTokenHistory.usageParseError', 'Error parsing usage') }}
                     </p>
-                    <p class="text-[12px] text-[#99A0AE] mt-0.5">
+                    <p class="text-[12px] text-[#99A0AE] dark:text-gray-500 mt-0.5">
                       {{ formatUsageTimestamp(entry.timestamp) }}
                     </p>
                   </div>
                 </div>
-                <div class="mt-3 flex flex-wrap gap-x-4 gap-y-1.5 text-[12.5px] font-medium text-[#99A0AE]">
+                <div class="mt-3 flex flex-wrap gap-x-4 gap-y-1.5 text-[12.5px] font-medium text-[#99A0AE] dark:text-gray-400">
                   <template v-if="entry.usageStatus === 'available'">
                     <span class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-sky-500"></div>{{ t('models.recentTokenHistory.input', `Input: ${formatTokenCount(entry.inputTokens)}`) }}</span>
                     <span class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-violet-500"></div>{{ t('models.recentTokenHistory.output', `Output: ${formatTokenCount(entry.outputTokens)}`) }}</span>
@@ -139,7 +139,7 @@
                       ? t('models.recentTokenHistory.noUsage', 'No usage reported')
                       : t('models.recentTokenHistory.usageParseError', 'Parse error') }}
                   </span>
-                  <span v-if="typeof entry.costUsd === 'number' && Number.isFinite(entry.costUsd)" class="flex items-center gap-1.5 ml-auto text-[#171717] bg-gray-100 px-2 py-0.5 rounded-md">
+                  <span v-if="typeof entry.costUsd === 'number' && Number.isFinite(entry.costUsd)" class="flex items-center gap-1.5 ml-auto text-[#171717] dark:text-[#f3f4f6] bg-gray-100 dark:bg-[#222225] px-2 py-0.5 rounded-md">
                     {{ t('models.recentTokenHistory.cost', `$${entry.costUsd.toFixed(4)}`) }}
                   </span>
                   <el-button
@@ -155,7 +155,7 @@
             </div>
 
             <div class="flex items-center justify-between gap-3 pt-2">
-              <p class="text-[13px] font-medium text-[#99A0AE]">
+              <p class="text-[13px] font-medium text-[#99A0AE] dark:text-gray-500">
                 {{ t('models.recentTokenHistory.page', `Page ${safeUsagePage} of ${usageTotalPages}`) }}
               </p>
               <div class="flex items-center gap-2">
@@ -314,8 +314,8 @@ const formatTokenCount = (value: number) => Intl.NumberFormat().format(value);
 
 const getUsageTotalClass = (entry: UsageHistoryEntry) => {
   if (entry.usageStatus === 'error') return 'font-bold text-[15px] text-red-500';
-  if (entry.usageStatus === 'missing') return 'font-bold text-[15px] text-[#99A0AE]';
-  return 'font-bold text-[15px] text-[#171717]';
+  if (entry.usageStatus === 'missing') return 'font-bold text-[15px] text-[#99A0AE] dark:text-gray-500';
+  return 'font-bold text-[15px] text-[#171717] dark:text-[#f3f4f6]';
 };
 
 const formatUsageTotal = (entry: UsageHistoryEntry) => {
diff --git a/src/pages/cron/components/CronJobCard.vue b/src/pages/cron/components/CronJobCard.vue
index 927d778..068206e 100644
--- a/src/pages/cron/components/CronJobCard.vue
+++ b/src/pages/cron/components/CronJobCard.vue
@@ -1,25 +1,25 @@
 <template>
   <div
-    class="group flex flex-col p-5 rounded-2xl bg-transparent border border-transparent hover:bg-black/[0.03] transition-all relative overflow-hidden cursor-pointer"
+    class="group flex flex-col p-5 rounded-2xl bg-transparent dark:bg-[#1f1f22] border border-transparent dark:border-[#2a2a2d] hover:bg-black/[0.03] dark:hover:bg-[#2a2a2d] transition-all relative overflow-hidden cursor-pointer"
     @click="handleEdit"
   >
     <div class="flex items-start justify-between mb-4">
       <div class="flex items-center gap-4">
-        <div class="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-[#171717] bg-black/5 border border-black/5 rounded-full shadow-sm group-hover:scale-105 transition-transform">
-          <RiTimeLine :class="['h-5 w-5', job.enabled ? 'text-[#171717]' : 'text-[#99A0AE]']" />
+        <div class="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-[#171717] dark:text-[#f3f4f6] bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 rounded-full shadow-sm group-hover:scale-105 transition-transform">
+          <RiTimeLine :class="['h-5 w-5', job.enabled ? 'text-[#171717] dark:text-[#f3f4f6]' : 'text-[#99A0AE] dark:text-gray-500']" />
         </div>
         <div class="flex flex-col min-w-0">
           <div class="flex items-center gap-2 mb-1">
-            <h3 class="text-[16px] font-semibold text-[#171717] truncate">{{ job.name }}</h3>
+            <h3 class="text-[16px] font-semibold text-[#171717] dark:text-[#f3f4f6] truncate">{{ job.name }}</h3>
             <div
               :class="[
                 'w-2 h-2 rounded-full shrink-0',
-                job.enabled ? 'bg-green-500' : 'bg-[#99A0AE]'
+                job.enabled ? 'bg-green-500' : 'bg-[#99A0AE] dark:bg-gray-500'
               ]"
               :title="job.enabled ? t('cron.stats.active') : t('cron.stats.paused')"
             />
           </div>
-          <p class="text-[13px] text-[#525866] flex items-center gap-1.5">
+          <p class="text-[13px] text-[#525866] dark:text-gray-400 flex items-center gap-1.5">
             <RiTimerLine class="h-3.5 w-3.5" />
             {{ parseCronSchedule(job.schedule, t) }}
           </p>
@@ -36,14 +36,14 @@
 
     <div class="flex-1 flex flex-col justify-end mt-2 pl-[62px]">
       <div class="flex items-start gap-2 mb-3">
-        <RiMessage3Line class="h-3.5 w-3.5 mt-0.5 text-[#99A0AE] shrink-0" />
-        <p class="text-[13.5px] text-[#525866] line-clamp-2 leading-[1.5]">
+        <RiMessage3Line class="h-3.5 w-3.5 mt-0.5 text-[#99A0AE] dark:text-gray-500 shrink-0" />
+        <p class="text-[13.5px] text-[#525866] dark:text-gray-400 line-clamp-2 leading-[1.5]">
           {{ job.message }}
         </p>
       </div>
 
       <!-- Metadata -->
-      <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-[12px] text-[#99A0AE] font-medium mb-3">
+      <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-[12px] text-[#99A0AE] dark:text-gray-500 font-medium mb-3">
         <span v-if="job.lastRun" class="flex items-center gap-1.5">
           <RiHistoryLine class="h-3.5 w-3.5" />
           {{ t('cron.card.last') }}: {{ formatRelativeTime(job.lastRun.time) }}
@@ -58,7 +58,7 @@
       </div>
 
       <!-- Last Run Error -->
-      <div v-if="job.lastRun && !job.lastRun.success && job.lastRun.error" class="flex items-start gap-2 p-2.5 mb-3 rounded-xl bg-red-500/10 border border-red-500/20 text-[13px] text-red-600">
+      <div v-if="job.lastRun && !job.lastRun.success && job.lastRun.error" class="flex items-start gap-2 p-2.5 mb-3 rounded-xl bg-red-500/10 border border-red-500/20 text-[13px] text-red-600 dark:text-red-400">
         <RiErrorWarningLine class="h-4 w-4 mt-0.5 shrink-0" />
         <span class="line-clamp-2">{{ job.lastRun.error }}</span>
       </div>
diff --git a/src/pages/cron/components/CronStats.vue b/src/pages/cron/components/CronStats.vue
index b466172..0fad84d 100644
--- a/src/pages/cron/components/CronStats.vue
+++ b/src/pages/cron/components/CronStats.vue
@@ -1,54 +1,54 @@
 <template>
   <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
     <!-- Total -->
-    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden hover:bg-[#F4F3EB] transition-colors">
+    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 dark:bg-[#1f1f22] border border-transparent dark:border-[#2a2a2d] flex flex-col justify-between min-h-[130px] relative overflow-hidden hover:bg-[#F4F3EB] dark:hover:bg-[#222225] transition-colors">
       <div class="flex items-center justify-between">
-        <div class="h-11 w-11 rounded-full bg-[#E8E6DE] flex items-center justify-center">
-          <RiTimeLine class="h-5 w-5 text-[#7A7668]" />
+        <div class="h-11 w-11 rounded-full bg-[#E8E6DE] dark:bg-[#2a2a2d] flex items-center justify-center">
+          <RiTimeLine class="h-5 w-5 text-[#7A7668] dark:text-gray-400" />
         </div>
       </div>
       <div class="mt-4 flex items-baseline gap-3">
-        <p class="text-[40px] leading-none font-serif text-[#171717]">{{ total }}</p>
-        <p class="text-[14px] font-medium text-[#525866]">{{ t('cron.stats.total') }}</p>
+        <p class="text-[40px] leading-none font-serif text-[#171717] dark:text-[#f3f4f6]">{{ total }}</p>
+        <p class="text-[14px] font-medium text-[#525866] dark:text-gray-400">{{ t('cron.stats.total') }}</p>
       </div>
     </div>
 
     <!-- Active -->
-    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden hover:bg-[#F4F3EB] transition-colors">
+    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 dark:bg-[#1f1f22] border border-transparent dark:border-[#2a2a2d] flex flex-col justify-between min-h-[130px] relative overflow-hidden hover:bg-[#F4F3EB] dark:hover:bg-[#222225] transition-colors">
       <div class="flex items-center justify-between">
-        <div class="h-11 w-11 rounded-full bg-green-100 flex items-center justify-center">
-          <RiPlayLine class="h-5 w-5 text-green-600 ml-0.5" />
+        <div class="h-11 w-11 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center">
+          <RiPlayLine class="h-5 w-5 text-green-600 dark:text-green-400 ml-0.5" />
         </div>
       </div>
       <div class="mt-4 flex items-baseline gap-3">
-        <p class="text-[40px] leading-none font-serif text-[#171717]">{{ active }}</p>
-        <p class="text-[14px] font-medium text-[#525866]">{{ t('cron.stats.active') }}</p>
+        <p class="text-[40px] leading-none font-serif text-[#171717] dark:text-[#f3f4f6]">{{ active }}</p>
+        <p class="text-[14px] font-medium text-[#525866] dark:text-gray-400">{{ t('cron.stats.active') }}</p>
       </div>
     </div>
 
     <!-- Paused -->
-    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden hover:bg-[#F4F3EB] transition-colors">
+    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 dark:bg-[#1f1f22] border border-transparent dark:border-[#2a2a2d] flex flex-col justify-between min-h-[130px] relative overflow-hidden hover:bg-[#F4F3EB] dark:hover:bg-[#222225] transition-colors">
       <div class="flex items-center justify-between">
-        <div class="h-11 w-11 rounded-full bg-amber-100 flex items-center justify-center">
-          <RiPauseLine class="h-5 w-5 text-amber-600" />
+        <div class="h-11 w-11 rounded-full bg-amber-100 dark:bg-amber-900/20 flex items-center justify-center">
+          <RiPauseLine class="h-5 w-5 text-amber-600 dark:text-amber-400" />
         </div>
       </div>
       <div class="mt-4 flex items-baseline gap-3">
-        <p class="text-[40px] leading-none font-serif text-[#171717]">{{ paused }}</p>
-        <p class="text-[14px] font-medium text-[#525866]">{{ t('cron.stats.paused') }}</p>
+        <p class="text-[40px] leading-none font-serif text-[#171717] dark:text-[#f3f4f6]">{{ paused }}</p>
+        <p class="text-[14px] font-medium text-[#525866] dark:text-gray-400">{{ t('cron.stats.paused') }}</p>
       </div>
     </div>
 
     <!-- Failed -->
-    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden hover:bg-[#F4F3EB] transition-colors">
+    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 dark:bg-[#1f1f22] border border-transparent dark:border-[#2a2a2d] flex flex-col justify-between min-h-[130px] relative overflow-hidden hover:bg-[#F4F3EB] dark:hover:bg-[#222225] transition-colors">
       <div class="flex items-center justify-between">
-        <div class="h-11 w-11 rounded-full bg-red-100 flex items-center justify-center">
-          <RiCloseCircleLine class="h-5 w-5 text-red-500" />
+        <div class="h-11 w-11 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center">
+          <RiCloseCircleLine class="h-5 w-5 text-red-500 dark:text-red-400" />
         </div>
       </div>
       <div class="mt-4 flex items-baseline gap-3">
-        <p class="text-[40px] leading-none font-serif text-[#171717]">{{ failed }}</p>
-        <p class="text-[14px] font-medium text-[#525866]">{{ t('cron.stats.failed') }}</p>
+        <p class="text-[40px] leading-none font-serif text-[#171717] dark:text-[#f3f4f6]">{{ failed }}</p>
+        <p class="text-[14px] font-medium text-[#525866] dark:text-gray-400">{{ t('cron.stats.failed') }}</p>
       </div>
     </div>
   </div>
diff --git a/src/pages/cron/components/CronTaskDialog.vue b/src/pages/cron/components/CronTaskDialog.vue
index 09c7d70..2b3c669 100644
--- a/src/pages/cron/components/CronTaskDialog.vue
+++ b/src/pages/cron/components/CronTaskDialog.vue
@@ -8,16 +8,16 @@
   >
     <!-- Header -->
     <template #header>
-      <div class="sticky top-0 z-10 bg-[#F4F3EB] flex justify-between items-start">
+      <div class="sticky top-0 z-10 bg-[#F4F3EB] dark:bg-[#1f1f22] flex justify-between items-start">
         <div>
-          <h2 class="text-[24px] font-serif text-[#171717] mb-[8px] font-normal tracking-tight">
+          <h2 class="text-[24px] font-serif text-[#171717] dark:text-[#f3f4f6] mb-[8px] font-normal tracking-tight">
             {{ job ? t('cron.dialog.editTitle') : t('cron.dialog.createTitle') }}
           </h2>
-          <p class="text-[14px] text-[#99A0AE]">
+          <p class="text-[14px] text-[#99A0AE] dark:text-gray-500">
             {{ t('cron.dialog.description') }}
           </p>
         </div>
-        <button @click="visible = false" class="text-[#99A0AE] hover:text-[#171717] transition-colors mt-[4px]">
+        <button @click="visible = false" class="text-[#99A0AE] dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] transition-colors mt-[4px]">
           <el-icon class="text-[20px] cursor-pointer"><Close /></el-icon>
         </button>
       </div>
@@ -26,7 +26,7 @@
     <div class="px-[30px] pb-[30px] pt-[30px] space-y-6">
       <!-- Name -->
       <div class="space-y-2.5">
-        <label class="text-[14px] text-[#171717]/80 font-bold">{{ t('cron.dialog.taskName') }}</label>
+        <label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('cron.dialog.taskName') }}</label>
         <el-input
           v-model="form.name"
           :placeholder="t('cron.dialog.taskNamePlaceholder')"
@@ -36,7 +36,7 @@
 
       <!-- Message -->
       <div class="space-y-2.5">
-        <label class="text-[14px] text-[#171717]/80 font-bold">{{ t('cron.dialog.message') }}</label>
+        <label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('cron.dialog.message') }}</label>
         <el-input
           v-model="form.message"
           type="textarea"
@@ -48,7 +48,7 @@
 
       <!-- Schedule -->
       <div class="space-y-2.5">
-        <label class="text-[14px] text-[#171717]/80 font-bold">{{ t('cron.dialog.schedule') }}</label>
+        <label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('cron.dialog.schedule') }}</label>
 
         <!-- Presets -->
         <div v-if="!useCustom" class="grid grid-cols-2 gap-2">
@@ -74,7 +74,7 @@
         />
 
         <div class="flex items-center justify-between mt-2">
-          <p class="text-[12px] text-[#99A0AE] font-medium">
+          <p class="text-[12px] text-[#99A0AE] dark:text-gray-500 font-medium">
             {{ schedulePreview ? `${t('cron.card.next')}: ${schedulePreview}` : t('cron.dialog.cronPlaceholder') }}
           </p>
           <el-button
@@ -92,8 +92,8 @@
       <!-- Delivery (simplified for first phase) -->
       <div class="space-y-3">
         <div class="space-y-1">
-          <label class="text-[14px] text-[#171717]/80 font-bold">{{ t('cron.dialog.deliveryTitle') }}</label>
-          <p class="text-[12px] text-[#99A0AE]">{{ t('cron.dialog.deliveryDescription') }}</p>
+          <label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('cron.dialog.deliveryTitle') }}</label>
+          <p class="text-[12px] text-[#99A0AE] dark:text-gray-500">{{ t('cron.dialog.deliveryDescription') }}</p>
         </div>
 
         <div class="grid grid-cols-2 gap-2">
@@ -122,16 +122,16 @@
         </div>
 
         <!-- Delivery placeholder hint for announce mode -->
-        <div v-if="deliveryMode === 'announce'" class="p-3 rounded-xl bg-amber-50 border border-amber-200 text-[12px] text-amber-700">
+        <div v-if="deliveryMode === 'announce'" class="p-3 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-[12px] text-amber-700 dark:text-amber-400">
           {{ t('cron.dialog.noChannels') }}
         </div>
       </div>
 
       <!-- Enabled -->
-      <div class="flex items-center justify-between bg-[#E8E6DE]/50 p-4 rounded-2xl border border-black/5">
+      <div class="flex items-center justify-between bg-[#E8E6DE]/50 dark:bg-[#222225] p-4 rounded-2xl border border-black/5 dark:border-[#2a2a2d]">
         <div>
-          <label class="text-[14px] text-[#171717]/80 font-bold">{{ t('cron.dialog.enableImmediately') }}</label>
-          <p class="text-[13px] text-[#99A0AE] mt-0.5">
+          <label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('cron.dialog.enableImmediately') }}</label>
+          <p class="text-[13px] text-[#99A0AE] dark:text-gray-500 mt-0.5">
             {{ t('cron.dialog.enableImmediatelyDesc') }}
           </p>
         </div>
@@ -311,6 +311,9 @@ function handleClosed() {
   overflow: hidden;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
 }
+.dark .custom-cron-dialog {
+  background-color: #1f1f22 !important;
+}
 
 .custom-cron-dialog .el-dialog__body {
   padding: 0 !important;
@@ -326,6 +329,9 @@ function handleClosed() {
   background-color: #D1CFC7;
   border-radius: 3px;
 }
+.dark .custom-cron-dialog .el-dialog__body::-webkit-scrollbar-thumb {
+  background-color: #2a2a2d;
+}
 
 /* Input / Textarea styling to match the cream UI */
 .custom-cron-dialog .el-input__wrapper,
@@ -336,6 +342,11 @@ function handleClosed() {
   border: 1px solid transparent !important;
   color: #171717 !important;
 }
+.dark .custom-cron-dialog .el-input__wrapper,
+.dark .custom-cron-dialog .el-textarea__inner {
+  background-color: #222225 !important;
+  color: #f3f4f6 !important;
+}
 .custom-cron-dialog .el-input__wrapper.is-focus,
 .custom-cron-dialog .el-textarea__inner:focus {
   border-color: #3B6DE8 !important;
@@ -343,10 +354,17 @@ function handleClosed() {
 .custom-cron-dialog .el-input__inner {
   color: #171717 !important;
 }
+.dark .custom-cron-dialog .el-input__inner {
+  color: #f3f4f6 !important;
+}
 .custom-cron-dialog .el-input__inner::placeholder,
 .custom-cron-dialog .el-textarea__inner::placeholder {
   color: #99A0AE !important;
 }
+.dark .custom-cron-dialog .el-input__inner::placeholder,
+.dark .custom-cron-dialog .el-textarea__inner::placeholder {
+  color: #6b7280 !important;
+}
 
 /* Schedule preset buttons */
 .schedule-btn {
@@ -361,6 +379,14 @@ function handleClosed() {
   background-color: #E5E4DC !important;
   color: #171717 !important;
 }
+.dark .schedule-btn--inactive {
+  background-color: #222225 !important;
+  color: #9ca3af !important;
+}
+.dark .schedule-btn--inactive:hover {
+  background-color: #2a2a2d !important;
+  color: #f3f4f6 !important;
+}
 .schedule-btn--active {
   background-color: #3B6DE8 !important;
   color: #ffffff !important;
@@ -378,6 +404,14 @@ function handleClosed() {
   background-color: #E5E4DC !important;
   color: #171717 !important;
 }
+.dark .delivery-btn--inactive {
+  background-color: #222225 !important;
+  color: #9ca3af !important;
+}
+.dark .delivery-btn--inactive:hover {
+  background-color: #2a2a2d !important;
+  color: #f3f4f6 !important;
+}
 .delivery-btn--active {
   background-color: #3B6DE8 !important;
   color: #ffffff !important;
@@ -403,4 +437,12 @@ function handleClosed() {
   background-color: #E5E4DC !important;
   color: #171717 !important;
 }
+.dark .cancel-btn {
+  background-color: #222225 !important;
+  color: #9ca3af !important;
+}
+.dark .cancel-btn:hover {
+  background-color: #2a2a2d !important;
+  color: #f3f4f6 !important;
+}
 </style>
diff --git a/src/pages/cron/index.vue b/src/pages/cron/index.vue
index f7479b9..a1467bd 100644
--- a/src/pages/cron/index.vue
+++ b/src/pages/cron/index.vue
@@ -1,17 +1,17 @@
 <template>
   <layout>
-    <div class="bg-white box-border w-full h-full flex rounded-[16px] overflow-hidden">
+    <div class="bg-white dark:bg-[#1b1b1d] box-border w-full h-full flex rounded-[16px] overflow-hidden">
       <div class="w-full flex flex-col h-full p-10 pt-12">
         <!-- Header -->
         <div class="flex flex-col md:flex-row md:items-start justify-between mb-6 shrink-0 gap-4">
           <div>
             <h1
-              class="text-5xl md:text-6xl font-serif text-[#171717] mb-3 font-normal tracking-tight"
+              class="text-5xl md:text-6xl font-serif text-[#171717] dark:text-[#f3f4f6] mb-3 font-normal tracking-tight"
               style="font-family: Georgia, Cambria, 'Times New Roman', Times, serif"
             >
               {{ t('cron.title') }}
             </h1>
-            <p class="text-[17px] text-[#171717]/70 font-medium">
+            <p class="text-[17px] text-[#171717]/70 dark:text-[#9ca3af] font-medium">
               {{ t('cron.subtitle') }}
             </p>
           </div>
@@ -19,7 +19,7 @@
           <div class="flex items-center gap-3 md:mt-2">
             <button
               @click="store.fetchJobs()"
-              class="hover:bg-black/5 transition-colors shrink-0 text-[13px] font-medium px-4 h-9 rounded-full border border-black/10 flex items-center justify-center text-[#171717]/80 hover:text-[#171717]"
+              class="hover:bg-black/5 dark:hover:bg-white/5 transition-colors shrink-0 text-[13px] font-medium px-4 h-9 rounded-full border border-black/10 dark:border-gray-700 flex items-center justify-center text-[#171717]/80 dark:text-[#f3f4f6]/80 hover:text-[#171717] dark:hover:text-[#f3f4f6]"
             >
               <RiRefreshLine :class="['h-4 w-4 mr-2', store.loading && 'animate-spin']" />
               {{ t('cron.refresh') }}
@@ -48,7 +48,7 @@
           <!-- Loading -->
           <div
             v-if="store.loading && store.safeJobs.length === 0"
-            class="flex flex-col items-center justify-center h-full text-[#525866]"
+            class="flex flex-col items-center justify-center h-full text-[#525866] dark:text-gray-400"
           >
             <RiRefreshLine class="h-10 w-10 animate-spin mb-4" />
             <p>{{ t('common.loading', 'Loading...') }}</p>
@@ -64,9 +64,9 @@
             />
 
             <!-- Jobs List -->
-            <div v-if="store.safeJobs.length === 0" class="flex flex-col items-center justify-center py-20 text-[#525866] bg-[#F4F3EB]/40 rounded-3xl border border-transparent">
+            <div v-if="store.safeJobs.length === 0" class="flex flex-col items-center justify-center py-20 text-[#525866] dark:text-gray-400 bg-[#F4F3EB]/40 dark:bg-[#1f1f22] rounded-3xl border border-transparent dark:border-[#2a2a2d]">
               <RiTimeLine class="h-10 w-10 mb-4 opacity-50" />
-              <h3 class="text-lg font-medium mb-2 text-[#171717]">{{ t('cron.empty.title') }}</h3>
+              <h3 class="text-lg font-medium mb-2 text-[#171717] dark:text-[#f3f4f6]">{{ t('cron.empty.title') }}</h3>
               <p class="text-[14px] text-center mb-6 max-w-md">
                 {{ t('cron.empty.description') }}
               </p>
diff --git a/src/pages/dashboard/index.vue b/src/pages/dashboard/index.vue
deleted file mode 100644
index d440836..0000000
--- a/src/pages/dashboard/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div>看板</div>
-</template>
-
-<script setup lang="ts">
-
-</script>
diff --git a/src/pages/home/ChatHistory.vue b/src/pages/home/ChatHistory.vue
index 804430d..c994c81 100644
--- a/src/pages/home/ChatHistory.vue
+++ b/src/pages/home/ChatHistory.vue
@@ -17,7 +17,7 @@
 		</div>
 
 		<div
-			class="flex items-center justify-center m-2 bg-white rounded-lg p-2.5 border-[#E5E8EE] shadow-sm text-center cursor-pointer hover:bg-[#F5F7FA] hover:text-[#2B7FFF] hover:border-[#2B7FFF]"
+			class="flex items-center justify-center m-2 bg-white dark:bg-[#1f1f22] rounded-lg p-2.5 border border-[#E5E8EE] dark:border-[#2a2a2d] shadow-sm text-center cursor-pointer hover:bg-[#F5F7FA] dark:hover:bg-[#2a2a2d] hover:text-[#2B7FFF] hover:border-[#2B7FFF]"
 			@click="addNewChat">
 			<RiAddLine  />
 			<span v-if="!sidebarCollapsed" class="whitespace-nowrap">新对话</span>
@@ -32,8 +32,8 @@
 					<ul class="list-none">
 						<li v-for="item in bucket.sessions" :key="item.conversationId" @click="selectedHistoryMessage(item.conversationId)"
 							:class="[
-								'flex items-center gap-2 p-2 text-gray-600 rounded-lg cursor-pointer transition-colors mb-2',
-								item.conversationId === selectedConversationId ? 'bg-white shadow-sm border-[#E5E8EE] py-1.5 relative z-10' : 'hover:bg-gray-200'
+								'flex items-center gap-2 p-2 text-gray-600 dark:text-gray-400 rounded-lg cursor-pointer transition-colors mb-2',
+								item.conversationId === selectedConversationId ? 'bg-white dark:bg-[#1f1f22] shadow-sm border border-[#E5E8EE] dark:border-[#2a2a2d] py-1.5 relative z-10' : 'hover:bg-gray-200 dark:hover:bg-gray-700/50'
 							]">
 							<span class="w-2 h-2 rounded-full bg-[#BEDBFF] flex-none"></span>
 							<div class="flex-1 min-w-0">
diff --git a/src/pages/home/TaskCenter.vue b/src/pages/home/TaskCenter.vue
index 6517973..78c50f3 100644
--- a/src/pages/home/TaskCenter.vue
+++ b/src/pages/home/TaskCenter.vue
@@ -6,20 +6,20 @@
 
         <div class="grid grid-cols-2 gap-4 max-[800px]:grid-cols-1">
             <div v-for="item in taskList" :key="item.id" class="flex gap-3 items-start p-3.5
-                  rounded-[10px] border border-[#dfeaf6] bg-white cursor-pointer hover:bg-[#F5F7FA]"
+                  rounded-[10px] border border-[#dfeaf6] dark:border-[#2a2a2d] bg-white dark:bg-[#1f1f22] cursor-pointer hover:bg-[#F5F7FA] dark:hover:bg-[#2a2a2d]"
                 @click="handleTaskItem(item)">
-                <div class="w-11 h-11 bg-[#EFF6FF] rounded-lg
-                    border border-dashed border-[#9fc0e8]
+                <div class="w-11 h-11 bg-[#EFF6FF] dark:bg-[#222225] rounded-lg
+                    border border-dashed border-[#9fc0e8] dark:border-gray-700
                     flex items-center justify-center
                     text-[#3b82f6] text-[23px]">
                     {{ item.icon }}
                 </div>
 
                 <div>
-                    <div class="font-semibold">
+                    <div class="font-semibold dark:text-gray-100">
                         {{ item.title }}
                     </div>
-                    <div class="text-[#9aa5b1] text-[13px] mt-1.5">
+                    <div class="text-[#9aa5b1] dark:text-gray-400 text-[13px] mt-1.5">
                         {{ item.desc }}
                     </div>
                 </div>
diff --git a/src/pages/home/components/ChatAIMark.vue b/src/pages/home/components/ChatAIMark.vue
index 59f7945..830e88d 100644
--- a/src/pages/home/components/ChatAIMark.vue
+++ b/src/pages/home/components/ChatAIMark.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-2 text-xs text-gray-400 ">
+  <div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
     本回答由 AI 生成
   </div>
 </template>
\ No newline at end of file
diff --git a/src/pages/home/components/ChatAttach.vue b/src/pages/home/components/ChatAttach.vue
index 6309712..7355e9f 100644
--- a/src/pages/home/components/ChatAttach.vue
+++ b/src/pages/home/components/ChatAttach.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="tag-flex flex-wrap pt-3">
-        <div class="inline-flex items-center justify-center box-border border border-[#E5E8EE] rounded-lg py-0.5 px-2.5 mr-2 mb-2"
+        <div class="inline-flex items-center justify-center box-border border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-lg py-0.5 px-2.5 mr-2 mb-2"
             v-for="(item, index) in questionList" :key="index" @click="handleClick(item)">
-            <span class="tag-text-[#2d91ff] text-[10px]">{{ item }}</span>
+            <span class="text-[#2d91ff] text-[10px]">{{ item }}</span>
         </div>
     </div>
 </template>
diff --git a/src/pages/home/components/ChatInputArea.vue b/src/pages/home/components/ChatInputArea.vue
index 6aedaff..8684851 100644
--- a/src/pages/home/components/ChatInputArea.vue
+++ b/src/pages/home/components/ChatInputArea.vue
@@ -1,15 +1,15 @@
 <template>
   <div
-    class="h-[174px] bg-white rounded-lg border border-[#eef2f6] shadow-[0_1px_0_rgba(0,0,0,0.03)] p-4 mt-2 flex flex-col justify-between">
-    <textarea rows="2" placeholder="给我发布或者布置任务" class="flex-1 resize-none outline-none text-sm" :value="modelValue"
+    class="h-[174px] bg-white dark:bg-[#1f1f22] rounded-lg border border-[#eef2f6] dark:border-[#2a2a2d] shadow-[0_1px_0_rgba(0,0,0,0.03)] p-4 mt-2 flex flex-col justify-between">
+    <textarea rows="2" placeholder="给我发布或者布置任务" class="flex-1 resize-none outline-none text-sm bg-transparent dark:text-gray-100" :value="modelValue"
       @input="onInput" @keydown.enter="onKeydownEnter" />
 
     <div class="flex justify-between items-end">
-      <button class="cursor-pointer hover:text-[#2B7FFF]" @click="onAttach">
+      <button class="cursor-pointer hover:text-[#2B7FFF] dark:text-gray-400" @click="onAttach">
         <RiLink />
       </button>
       <button
-        class="w-12 h-12 bg-[#F5F7FA] px-2.5 py-1.5 rounded-md flex items-center justify-center cursor-pointer hover:bg-[#2B7FFF] hover:text-[#fff]"
+        class="w-12 h-12 bg-[#F5F7FA] dark:bg-[#222225] px-2.5 py-1.5 rounded-md flex items-center justify-center cursor-pointer hover:bg-[#2B7FFF] hover:text-[#fff]"
         @click="onSend">
         <RiStopFill v-if="isSendingMessage" />
         <RiSendPlaneFill v-else />
diff --git a/src/pages/home/components/ChatLoading.vue b/src/pages/home/components/ChatLoading.vue
index 8739f80..98a7fee 100644
--- a/src/pages/home/components/ChatLoading.vue
+++ b/src/pages/home/components/ChatLoading.vue
@@ -24,6 +24,9 @@
   border-radius: 50%;
   margin-right: 3px;
   background: #333333;
+}
+.dark .dot {
+  background: #9ca3af;
   animation: wave 1.3s linear infinite;
 }
 
diff --git a/src/pages/home/components/ChatNameTime.vue b/src/pages/home/components/ChatNameTime.vue
index dd848ac..aa3ca27 100644
--- a/src/pages/home/components/ChatNameTime.vue
+++ b/src/pages/home/components/ChatNameTime.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-start gap-2 pt-0.5 mb-2" :class="props.showReverse ? 'flex-row-reverse' : 'flex-row'">
-    <span class="text-xs text-[#4E5969]">{{ props.msg?.messageRole === MessageRole.AI ? 'NIANXX' : '我' }}</span>
-    <span class="text-xs text-[#86909C]">{{ formattedTime }}</span>
+    <span class="text-xs text-[#4E5969] dark:text-gray-300">{{ props.msg?.messageRole === MessageRole.AI ? 'NIANXX' : '我' }}</span>
+    <span class="text-xs text-[#86909C] dark:text-gray-500">{{ formattedTime }}</span>
   </div>
 </template>
 
diff --git a/src/pages/home/components/ChatOperation.vue b/src/pages/home/components/ChatOperation.vue
index 36265a6..75f2275 100644
--- a/src/pages/home/components/ChatOperation.vue
+++ b/src/pages/home/components/ChatOperation.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="mt-4 text-gray-500 flex items-center justify-between gap-4 ">
+    <div class="mt-4 text-gray-500 dark:text-gray-400 flex items-center justify-between gap-4 ">
         <RiFileCopyLine size="16px" @click="copyFileClick()" />
         <div class="flex items-center gap-4">
             <RiShareForwardLine size="16px" @click="shareForwardClick()" />
diff --git a/src/pages/home/components/ChatRoleAI.vue b/src/pages/home/components/ChatRoleAI.vue
index 964db8d..302ce21 100644
--- a/src/pages/home/components/ChatRoleAI.vue
+++ b/src/pages/home/components/ChatRoleAI.vue
@@ -2,12 +2,12 @@
   <div class="max-w-[75%] flex flex-col">
     <slot name="header"></slot>
     <div v-if="!msg.messageContentList || msg.messageContentList.length === 0"
-      class="flex flex-row text-sm text-gray-700">
+      class="flex flex-row text-sm text-gray-700 dark:text-gray-100">
       <div v-html="compiledMarkdown"></div>
       <ChatLoading v-if="msg.isLoading" />
     </div>
 
-    <div v-else class="flex flex-col p-2 mb-2 text-sm text-gray-700 bg-[#f7f9fc] rounded-md"
+    <div v-else class="flex flex-col p-2 mb-2 text-sm text-gray-700 dark:text-gray-100 bg-[#f7f9fc] dark:bg-[#222225] rounded-md"
       v-for="(_, index) in msg.messageContentList" :key="index">
       <div v-html="compiledAt(index)"></div>
     </div>
diff --git a/src/pages/home/components/ChatRoleMe.vue b/src/pages/home/components/ChatRoleMe.vue
index bb8a3f6..39bf2f6 100644
--- a/src/pages/home/components/ChatRoleMe.vue
+++ b/src/pages/home/components/ChatRoleMe.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="max-w-[75%]">
     <slot name="header"></slot>
-    <div class="text-sm text-gray-700 bg-[#f7f9fc] rounded-md px-2 py-2">
+    <div class="text-sm text-gray-700 dark:text-gray-100 bg-[#f7f9fc] dark:bg-[#222225] rounded-md px-2 py-2">
       {{ msg.messageContent }}
     </div>
     <slot name="footer"></slot>
diff --git a/src/pages/home/components/Task.vue b/src/pages/home/components/Task.vue
index 498fa1b..f7fe156 100644
--- a/src/pages/home/components/Task.vue
+++ b/src/pages/home/components/Task.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="task p-[12px]">
-        <div class="flex border border-[#BEDBFF] h-[48px] p-[4px] rounded-[10px] bg-[#EFF6FF] task-tab">
+        <div class="flex border border-[#BEDBFF] dark:border-[#2a2a2d] h-[48px] p-[4px] rounded-[10px] bg-[#EFF6FF] dark:bg-[#222225] task-tab">
             <div v-for="item in tabs" :key="item.value" class="flex-1 flex text-center items-center h-full align-middle text" :class="active === item.value && 'active'" @click="changeTab(item.value)">
                 <div class="flex-1">{{ item.name }}<span v-if="item.total">{{`（${item.total > 98 && item.total + '+' || item.total}）`}}</span></div>
             </div>
@@ -36,12 +36,19 @@ const changeTab = (val:number) => {
     font-size: 14px;
     cursor: pointer;
 }
+.dark .task-tab .text {
+    color: #9ca3af;
+}
 .task-tab .active {
     position: relative;
     color: #2B7FFF;
     background: #FFFFFF;
     border-radius: 8px;
 }
+.dark .task-tab .active {
+    background: #1f1f22;
+    border-color: #2a2a2d;
+}
 .task-tab .active::after {
     position: absolute;
     left: 0;
diff --git a/src/pages/home/components/TaskOperationDialog.vue b/src/pages/home/components/TaskOperationDialog.vue
index 2184a86..8e03148 100644
--- a/src/pages/home/components/TaskOperationDialog.vue
+++ b/src/pages/home/components/TaskOperationDialog.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-dialog v-model="isVisible" :title="title" width="480" align-center>
-    <el-form :model="form" :rules="rules" ref="formRef" label-position="top" class="pl-4 pr-4 pt-4">
+  <el-dialog v-model="isVisible" :title="title" width="480" align-center class="dark-dialog">
+    <el-form :model="form" :rules="rules" ref="formRef" label-position="top" class="pl-4 pr-4 pt-4 dark-form">
       <el-form-item label="选择房型" prop="roomType">
         <el-select v-model="form.roomType" placeholder="请选择房型">
           <el-option v-for="item in roomList" :label="item.pmsName" :value="item.id" />
diff --git a/src/pages/home/components/chat/AttachmentPreview.vue b/src/pages/home/components/chat/AttachmentPreview.vue
index 3bac133..b347390 100644
--- a/src/pages/home/components/chat/AttachmentPreview.vue
+++ b/src/pages/home/components/chat/AttachmentPreview.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="relative inline-flex items-center gap-2 px-2 py-1.5 bg-white border border-[#E5E8EE] rounded-lg overflow-hidden"
+    class="relative inline-flex items-center gap-2 px-2 py-1.5 bg-white dark:bg-[#1f1f22] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-lg overflow-hidden"
   >
     <!-- staging overlay -->
     <div
       v-if="status === 'staging'"
-      class="absolute inset-0 bg-white/60 flex items-center justify-center z-10"
+      class="absolute inset-0 bg-white/60 dark:bg-[#1f1f22]/60 flex items-center justify-center z-10"
     >
       <RiLoader4Line class="animate-spin text-[#2B7FFF]" size="16px" />
     </div>
@@ -13,9 +13,9 @@
     <!-- error overlay -->
     <div
       v-if="status === 'error'"
-      class="absolute inset-0 bg-red-50/80 flex items-center justify-center z-10"
+      class="absolute inset-0 bg-red-50/80 dark:bg-red-900/30 flex items-center justify-center z-10"
     >
-      <span class="text-[10px] text-red-600 font-medium">{{ errorText || 'Error' }}</span>
+      <span class="text-[10px] text-red-600 dark:text-red-400 font-medium">{{ errorText || 'Error' }}</span>
     </div>
 
     <img
@@ -23,15 +23,15 @@
       :src="attachment.preview"
       class="w-10 h-10 object-cover rounded"
     />
-    <div v-else class="w-10 h-10 flex items-center justify-center bg-[#F5F7FA] rounded">
+    <div v-else class="w-10 h-10 flex items-center justify-center bg-[#F5F7FA] dark:bg-[#222225] rounded">
       <RiFileLine size="18px" class="text-gray-400" />
     </div>
 
     <div class="flex flex-col min-w-0">
-      <span class="text-xs text-gray-700 truncate max-w-[120px]">
+      <span class="text-xs text-gray-700 dark:text-gray-100 truncate max-w-[120px]">
         {{ attachment.fileName }}
       </span>
-      <span v-if="attachment.fileSize > 0" class="text-[10px] text-gray-400">
+      <span v-if="attachment.fileSize > 0" class="text-[10px] text-gray-400 dark:text-gray-500">
         {{ formatSize(attachment.fileSize) }}
       </span>
     </div>
diff --git a/src/pages/home/components/chat/ChatActivityIndicator.vue b/src/pages/home/components/chat/ChatActivityIndicator.vue
index 4c6d9ae..40d7756 100644
--- a/src/pages/home/components/chat/ChatActivityIndicator.vue
+++ b/src/pages/home/components/chat/ChatActivityIndicator.vue
@@ -2,7 +2,7 @@
   <div class="flex items-start gap-3 justify-start">
     <ChatAvatar :src="aiAvatarSrc" />
     <div
-      class="px-4 py-3 bg-white border border-[#E5E8EE] rounded-2xl rounded-tl-sm flex items-center gap-2 text-sm text-gray-600"
+      class="px-4 py-3 bg-white dark:bg-[#1f1f22] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-2xl rounded-tl-sm flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300"
     >
       <RiLoader4Line class="animate-spin" size="16px" />
       <span>{{ text }}</span>
diff --git a/src/pages/home/components/chat/ChatEmpty.vue b/src/pages/home/components/chat/ChatEmpty.vue
index a0b352a..0c6804c 100644
--- a/src/pages/home/components/chat/ChatEmpty.vue
+++ b/src/pages/home/components/chat/ChatEmpty.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col h-full overflow-auto py-6 px-6">
     <div class="pt-30">
-      <h1 class="text-[28px] font-bold mb-7 leading-tight">
+      <h1 class="text-[28px] font-bold mb-7 leading-tight dark:text-gray-100">
         你好，<br />
         我今天能帮你什么？
       </h1>
@@ -9,7 +9,7 @@
         <button
           v-for="tag in quickTags"
           :key="tag"
-          class="px-3 py-1.5 rounded-2xl border border-[#E5E8EE] text-[13px] text-[#333] cursor-pointer hover:bg-[#2B7FFF] hover:text-white hover:border-[#2B7FFF] transition-colors"
+          class="px-3 py-1.5 rounded-2xl border border-[#E5E8EE] dark:border-[#2a2a2d] text-[13px] text-[#333] dark:text-gray-100 cursor-pointer hover:bg-[#2B7FFF] hover:text-white hover:border-[#2B7FFF] transition-colors"
           @click="emit('click-tag', tag)"
         >
           {{ tag }}
diff --git a/src/pages/home/components/chat/ChatErrorBar.vue b/src/pages/home/components/chat/ChatErrorBar.vue
index 2c8bc39..52782b1 100644
--- a/src/pages/home/components/chat/ChatErrorBar.vue
+++ b/src/pages/home/components/chat/ChatErrorBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="error"
-    class="flex items-center gap-3 px-4 py-2 bg-red-50 border-t border-red-200 text-red-600 text-sm"
+    class="flex items-center gap-3 px-4 py-2 bg-red-50 dark:bg-red-900/20 border-t border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 text-sm"
   >
     <RiErrorWarningLine size="16px" />
     <span class="flex-1">{{ error }}</span>
diff --git a/src/pages/home/components/chat/ChatInput.vue b/src/pages/home/components/chat/ChatInput.vue
index 89cd042..58ef0e3 100644
--- a/src/pages/home/components/chat/ChatInput.vue
+++ b/src/pages/home/components/chat/ChatInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-white rounded-lg border border-[#eef2f6] shadow-[0_1px_0_rgba(0,0,0,0.03)] p-4 mt-2 flex flex-col justify-between gap-3"
+    class="bg-white dark:bg-[#1f1f22] rounded-lg border border-[#eef2f6] dark:border-[#2a2a2d] shadow-[0_1px_0_rgba(0,0,0,0.03)] p-4 mt-2 flex flex-col justify-between gap-3"
   >
     <!-- Agent chip -->
     <div v-if="agentName" class="flex items-center gap-2">
@@ -8,7 +8,7 @@
         @{{ agentName }}
       </span>
       <button
-        class="text-gray-400 hover:text-gray-600"
+        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
         @click="emit('clear-agent')"
       >
         <RiCloseLine size="12px" />
@@ -19,7 +19,7 @@
       rows="2"
       :value="modelValue"
       :placeholder="placeholder"
-      class="w-full flex-1 resize-none outline-none text-sm text-gray-700"
+      class="w-full flex-1 resize-none outline-none text-sm text-gray-700 dark:text-gray-100 bg-transparent"
       @input="onInput"
       @keydown.enter="onEnter"
     />
@@ -29,14 +29,14 @@
       <div
         v-for="(file, idx) in attachments"
         :key="idx"
-        class="inline-flex items-center gap-2 px-2 py-1 bg-[#F5F7FA] border border-[#E5E8EE] rounded-lg"
+        class="inline-flex items-center gap-2 px-2 py-1 bg-[#F5F7FA] dark:bg-[#222225] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-lg"
       >
         <img
           v-if="file.preview && isImageMime(file.mimeType)"
           :src="file.preview"
           class="w-8 h-8 object-cover rounded"
         />
-        <span class="text-xs text-gray-600 truncate max-w-[120px]">
+        <span class="text-xs text-gray-600 dark:text-gray-300 truncate max-w-[120px]">
           {{ file.fileName }}
         </span>
         <button
@@ -51,7 +51,7 @@
     <div class="flex justify-between items-end">
       <div class="flex items-center gap-1">
         <button
-          class="p-2 rounded-md cursor-pointer hover:bg-[#F5F7FA] hover:text-[#2B7FFF]"
+          class="p-2 rounded-md cursor-pointer hover:bg-[#F5F7FA] dark:hover:bg-[#2a2a2d] hover:text-[#2B7FFF] dark:text-gray-300"
           @click="triggerFileInput"
         >
           <RiLink size="18px" />
@@ -64,7 +64,7 @@
           @change="onFileChange"
         />
         <button
-          class="p-2 rounded-md cursor-pointer hover:bg-[#F5F7FA] hover:text-[#2B7FFF]"
+          class="p-2 rounded-md cursor-pointer hover:bg-[#F5F7FA] dark:hover:bg-[#2a2a2d] hover:text-[#2B7FFF] dark:text-gray-300"
           @click="emit('mention-agent')"
         >
           <RiAtLine size="18px" />
@@ -75,8 +75,8 @@
         class="w-12 h-12 px-2.5 py-1.5 rounded-md flex items-center justify-center cursor-pointer transition-colors"
         :class="
           isSending
-            ? 'bg-gray-200 text-gray-600'
-            : 'bg-[#F5F7FA] hover:bg-[#2B7FFF] hover:text-white'
+            ? 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300'
+            : 'bg-[#F5F7FA] dark:bg-[#222225] hover:bg-[#2B7FFF] hover:text-white'
         "
         @click="onAction"
       >
diff --git a/src/pages/home/components/chat/ChatMessage.vue b/src/pages/home/components/chat/ChatMessage.vue
index 07c8a19..9b71af0 100644
--- a/src/pages/home/components/chat/ChatMessage.vue
+++ b/src/pages/home/components/chat/ChatMessage.vue
@@ -10,13 +10,13 @@
         class="flex items-start gap-2 pt-0.5 mb-2"
         :class="isUser ? 'flex-row-reverse' : 'flex-row'"
       >
-        <span class="text-xs text-[#4E5969]">{{ isUser ? '我' : 'NIANXX' }}</span>
-        <span class="text-xs text-[#86909C]">{{ formattedTime }}</span>
+        <span class="text-xs text-[#4E5969] dark:text-gray-300">{{ isUser ? '我' : 'NIANXX' }}</span>
+        <span class="text-xs text-[#86909C] dark:text-gray-500">{{ formattedTime }}</span>
       </div>
 
       <!-- User message -->
       <template v-if="isUser">
-        <div class="text-sm text-gray-700 bg-[#f7f9fc] rounded-md px-3 py-2 whitespace-pre-wrap">
+        <div class="text-sm text-gray-700 dark:text-gray-100 bg-[#f7f9fc] dark:bg-[#222225] rounded-md px-3 py-2 whitespace-pre-wrap">
           {{ displayText }}
         </div>
 
@@ -25,7 +25,7 @@
           <div
             v-for="file in attachedFiles"
             :key="file.fileName"
-            class="inline-flex items-center gap-2 px-2 py-1 bg-white border border-[#E5E8EE] rounded-lg text-xs text-gray-600"
+            class="inline-flex items-center gap-2 px-2 py-1 bg-white dark:bg-[#1f1f22] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-lg text-xs text-gray-600 dark:text-gray-300"
           >
             <img
               v-if="file.preview && isImageMime(file.mimeType)"
@@ -39,21 +39,21 @@
 
       <!-- Assistant message -->
       <template v-else>
-        <div class="flex flex-col text-sm text-gray-700">
+        <div class="flex flex-col text-sm text-gray-700 dark:text-gray-100">
           <!-- Loading -->
           <ChatLoading v-if="isStreaming && !displayText && !hasBlocks" />
 
           <!-- Markdown text -->
           <div
             v-if="markdownHtml"
-            class="bg-[#f7f9fc] rounded-md px-3 py-2 prose prose-sm"
+            class="bg-[#f7f9fc] dark:bg-[#222225] rounded-md px-3 py-2 prose prose-sm"
             v-html="markdownHtml"
           />
 
           <!-- Thinking block -->
           <div
             v-if="thinkingText && store.showThinking"
-            class="mt-2 p-2 rounded bg-gray-100 text-xs text-gray-500 border-l-2 border-[#2B7FFF]"
+            class="mt-2 p-2 rounded bg-gray-100 dark:bg-[#1f1f22] text-xs text-gray-500 dark:text-gray-400 border-l-2 border-[#2B7FFF]"
           >
             <div class="font-medium mb-1">思考过程</div>
             <pre class="whitespace-pre-wrap font-mono">{{ thinkingText }}</pre>
@@ -63,9 +63,9 @@
           <div
             v-for="tool in tools"
             :key="tool.id || tool.name"
-            class="mt-2 px-3 py-2 bg-white border border-[#E5E8EE] rounded-lg"
+            class="mt-2 px-3 py-2 bg-white dark:bg-[#1f1f22] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-lg"
           >
-            <div class="flex items-center gap-2 text-xs text-gray-600">
+            <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300">
               <span class="inline-block w-1.5 h-1.5 rounded-full bg-[#2B7FFF]" />
               <span class="font-medium">Tool: {{ tool.name }}</span>
               <span
@@ -78,7 +78,7 @@
             </div>
             <pre
               v-if="tool.input || tool.arguments"
-              class="mt-1 text-[11px] text-gray-500 bg-[#F5F7FA] rounded p-1.5 overflow-x-auto"
+              class="mt-1 text-[11px] text-gray-500 dark:text-gray-400 bg-[#F5F7FA] dark:bg-[#222225] rounded p-1.5 overflow-x-auto"
             >{{ JSON.stringify(tool.input ?? tool.arguments, null, 2) }}</pre>
           </div>
 
@@ -86,7 +86,7 @@
           <div v-for="(img, idx) in images" :key="idx" class="mt-2">
             <img
               :src="img.url || `data:${img.mimeType};base64,${img.data}`"
-              class="max-w-full rounded-md border border-[#E5E8EE]"
+              class="max-w-full rounded-md border border-[#E5E8EE] dark:border-[#2a2a2d]"
             />
           </div>
 
@@ -102,7 +102,7 @@
 
           <!-- Hover actions -->
           <div
-            class="mt-2 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-between gap-4 text-gray-500"
+            class="mt-2 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-between gap-4 text-gray-500 dark:text-gray-400"
           >
             <div
               class="flex items-center gap-1 cursor-pointer hover:text-[#2B7FFF]"
diff --git a/src/pages/home/components/chat/ChatTypingIndicator.vue b/src/pages/home/components/chat/ChatTypingIndicator.vue
index ba9e0c4..d4cbec0 100644
--- a/src/pages/home/components/chat/ChatTypingIndicator.vue
+++ b/src/pages/home/components/chat/ChatTypingIndicator.vue
@@ -2,7 +2,7 @@
   <div class="flex items-start gap-3 justify-start">
     <ChatAvatar :src="aiAvatarSrc" />
     <div
-      class="px-4 py-3 bg-white border border-[#E5E8EE] rounded-2xl rounded-tl-sm flex items-center gap-1"
+      class="px-4 py-3 bg-white dark:bg-[#1f1f22] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-2xl rounded-tl-sm flex items-center gap-1"
     >
       <span class="dot" />
       <span class="dot" />
diff --git a/src/pages/home/components/chat/ExecutionGraphCard.vue b/src/pages/home/components/chat/ExecutionGraphCard.vue
index 44543bf..5fd0b44 100644
--- a/src/pages/home/components/chat/ExecutionGraphCard.vue
+++ b/src/pages/home/components/chat/ExecutionGraphCard.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="ml-12 border border-[#E5E8EE] rounded-lg bg-white p-3 max-w-[75%]">
+  <div class="ml-12 border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-lg bg-white dark:bg-[#1f1f22] p-3 max-w-[75%]">
     <div class="flex items-center justify-between mb-2">
-      <span class="text-xs font-medium text-gray-500">{{ agentLabel || '任务执行' }}</span>
+      <span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ agentLabel || '任务执行' }}</span>
       <span
         v-if="active"
         class="inline-flex items-center gap-1 text-[10px] text-[#2B7FFF]"
@@ -27,8 +27,8 @@
           "
         />
         <div class="flex-1 min-w-0">
-          <div class="text-sm text-gray-700">{{ step.name }}</div>
-          <div v-if="step.summary" class="text-[11px] text-gray-400 truncate">
+          <div class="text-sm text-gray-700 dark:text-gray-100">{{ step.name }}</div>
+          <div v-if="step.summary" class="text-[11px] text-gray-400 dark:text-gray-500 truncate">
             {{ step.summary }}
           </div>
         </div>
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 91cab24..bebff79 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -2,11 +2,11 @@
   <layout>
     <div class="flex h-full w-full flex-col md:flex-row">
       <ChatHistory class="flex-none" @new-chat="handleNewChat" @select-chat="handleSelectChat" />
-      <div class="flex-1 mr-2 overflow-hidden bg-white rounded-xl flex flex-col">
+      <div class="flex-1 mr-2 overflow-hidden bg-white dark:bg-[#1b1b1d] rounded-xl flex flex-col">
         <ChatBox class="flex-1" />
         <TaskCenter />
       </div>
-      <Task class="w-[392px] h-full rounded-[16px] bg-white" />
+      <Task class="w-[392px] h-full rounded-[16px] bg-white dark:bg-[#1b1b1d]" />
     </div>
 
     <TaskOperationDialog ref="taskOperationDialog" />
diff --git a/src/pages/knowledge/components/EventManager/UploadImage.vue b/src/pages/knowledge/components/EventManager/UploadImage.vue
index c2878ac..02af2d9 100644
--- a/src/pages/knowledge/components/EventManager/UploadImage.vue
+++ b/src/pages/knowledge/components/EventManager/UploadImage.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog v-model="model" :title="t('knowledge.upload.title')" :width="width" :before-close="handleClose" :close-on-click-modal="false"
-    :close-on-press-escape="false" append-to-body>
+    :close-on-press-escape="false" append-to-body class="upload-image-dialog">
     <div class="flex justify-center">
       <div class="w-[500px] mt-[20px]">
         <el-steps style="max-width: 500px" :active="activeIndex" simple finish-status="success">
@@ -10,27 +10,27 @@
       </div>
     </div>
     <div v-if="activeIndex === 0" class="m-[20px]">
-      <el-upload drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
+      <el-upload drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple class="dark-upload">
         <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-        <div class="text-[14px] text-[#171717]">
+        <div class="text-[14px] text-[#171717] dark:text-[#f3f4f6]">
           {{ t('knowledge.upload.dragText') }}
         </div>
-        <div class="text-[12px] text-[#99A0AE]">
+        <div class="text-[12px] text-[#99A0AE] dark:text-gray-500">
           {{ t('knowledge.upload.formatDesc') }}
         </div>
       </el-upload>
     </div>
     <div v-else-if="activeIndex === 1" class="p-[20px]">
-      <el-alert type="info" show-icon>
+      <el-alert type="info" show-icon class="dark-alert">
         <div class="flex justify-between items-center">
-          <span class="flex-1">{{ t('knowledge.upload.tipText') }}</span>
+          <span class="flex-1 dark:text-[#f3f4f6]">{{ t('knowledge.upload.tipText') }}</span>
         </div>
         <template #icon>
-          <component :is="RiMagicFill" color="#717784" class="w-[20px] h-[20px]" />
+          <component :is="RiMagicFill" color="#717784" class="w-[20px] h-[20px] dark:text-gray-400" />
         </template>
       </el-alert>
       <div v-for="(item, index) in picList" :key="index"
-        class="rounded-[12px] border border-[#E5E8EE] p-[16px] mt-[16px] relative">
+        class="rounded-[12px] border border-[#E5E8EE] dark:border-[#2a2a2d] p-[16px] mt-[16px] relative dark:bg-[#1f1f22]">
         <div
           class="absolute right-[0px] top-[0px] w-[28px] h-[28px] text-center bg-[rgba(0,0,0,0.5)] cursor-pointer z-10"
           style="border-radius: 0px 8px 0 8px;" @click="picList.splice(index, 1)">
@@ -120,37 +120,90 @@ onMounted(() => {
   background: #525866;
 }
 
+.dark :deep(.el-step.is-simple .el-step__arrow:before) {
+  background: #6b7280;
+}
+
 :deep(.el-step.is-simple .el-step__arrow:after) {
   width: 2px;
   background: #525866;
 }
 
+.dark :deep(.el-step.is-simple .el-step__arrow:after) {
+  background: #6b7280;
+}
+
 :deep(.el-step__head.is-process .el-step__icon.is-text) {
   border-color: #2B7FFF;
 }
 
+.dark :deep(.el-step__head.is-process .el-step__icon.is-text) {
+  border-color: #60a5fa;
+}
+
 :deep(.el-step__head.is-success) {
   color: #1FC16B;
 }
 
+.dark :deep(.el-step__head.is-success) {
+  color: #34d399;
+}
+
 :deep(.el-step__head.is-success .el-step__icon.is-text) {
   background: #1FC16B;
 }
 
+.dark :deep(.el-step__head.is-success .el-step__icon.is-text) {
+  background: #34d399;
+}
+
 :deep(.el-step__head.is-success .el-step__icon.is-text) {
   border-color: #1FC16B;
   color: #ffffff;
 }
 
+.dark :deep(.el-step__head.is-success .el-step__icon.is-text) {
+  border-color: #34d399;
+}
+
 :deep(.el-step__title.is-success) {
   font-weight: 500;
   font-size: 14px;
   color: #525866;
 }
 
+.dark :deep(.el-step__title.is-success) {
+  color: #9ca3af;
+}
+
 :deep(.el-textarea .el-input__count.is-outside) {
   top: auto;
   bottom: 10px;
   right: 15px;
 }
+
+.dark :deep(.el-textarea__inner) {
+  background-color: #222225;
+  color: #f3f4f6;
+  border-color: #2a2a2d;
+}
+
+.dark :deep(.el-input__count) {
+  color: #6b7280;
+  background: transparent;
+}
+
+.dark :deep(.upload-image-dialog) {
+  --el-dialog-bg-color: #1b1b1d;
+}
+
+.dark :deep(.dark-upload .el-upload-dragger) {
+  background-color: #222225;
+  border-color: #2a2a2d;
+}
+
+.dark :deep(.dark-alert) {
+  --el-alert-bg-color: #222225;
+  --el-alert-border-color: #2a2a2d;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/knowledge/components/EventManager/index.vue b/src/pages/knowledge/components/EventManager/index.vue
index 865e640..f350097 100644
--- a/src/pages/knowledge/components/EventManager/index.vue
+++ b/src/pages/knowledge/components/EventManager/index.vue
@@ -4,7 +4,7 @@
       <el-button class="button" type="primary" :icon="Plus" @click="dialogVisible = true">{{ t('knowledge.event.addEvent') }}</el-button>
     </el-row>
 
-    <el-table :data="tableData" show-overflow-tooltip border>
+    <el-table :data="tableData" show-overflow-tooltip border class="dark-mode-table">
       <el-table-column prop="date" :label="t('knowledge.event.eventName')" width="180" align="center" />
       <el-table-column prop="name" :label="t('knowledge.event.eventDesc')" width="180" align="center" />
       <el-table-column prop="address" :label="t('knowledge.event.effectiveTime')" align="center" />
@@ -84,4 +84,14 @@ const uploadImageChange = (row) => {
   padding-top: 18px;
   padding-bottom: 18px;
 }
+
+.dark :deep(.el-table) {
+  --el-table-border-color: #2a2a2d;
+  --el-table-bg-color: #1b1b1d;
+  --el-table-tr-bg-color: #1b1b1d;
+  --el-table-header-bg-color: #222225;
+  --el-table-header-text-color: #f3f4f6;
+  --el-table-text-color: #9ca3af;
+  --el-table-row-hover-bg-color: #2a2a2d;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/knowledge/components/EventPic/index.vue b/src/pages/knowledge/components/EventPic/index.vue
index 8d9ccf5..c948979 100644
--- a/src/pages/knowledge/components/EventPic/index.vue
+++ b/src/pages/knowledge/components/EventPic/index.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="bg-white box-border w-full h-full p-[20px]">
+  <div class="bg-white dark:bg-[#1b1b1d] box-border w-full h-full p-[20px]">
     <TitleSection @back-to="handleBack" :title="data.date" :desc="data.name">
       <template #right>
         <el-button class="button" type="primary" :icon="Plus" @click="dialogVisible = true">{{ t('knowledge.event.addEvent') }}</el-button>
       </template>
     </TitleSection>
     <div class="flex flex-wrap items-center">
-      <div v-for="item in 10" class="rounded-[12px] border border-[#E5E8EE] event-pic-item">
+      <div v-for="item in 10" class="rounded-[12px] border border-[#E5E8EE] dark:border-[#2a2a2d] event-pic-item">
         <img src="@assets/images/task/xc.png" />
         <div class="p-[16px]">
           <div class="flex items-center mb-[8px]">
-            <span>01.png</span>
+            <span class="dark:text-[#f3f4f6]">01.png</span>
             <el-tooltip placement="top">
               <template #content>
                 <div class="flex">
@@ -19,17 +19,17 @@
                     @click="copyText('https://image.baidu.com/search/index')" />
                 </div>
               </template>
-              <component :is="RiInformationLine" color="#99A0AE" class="w-[15px] ml-[11px] cursor-pointer" />
+              <component :is="RiInformationLine" color="#99A0AE" class="w-[15px] ml-[11px] cursor-pointer dark:text-gray-400" />
             </el-tooltip>
           </div>
-          <div class="h-[55px] text-[12px] text-[#99A0AE] mb-[12px] line-clamp-3">
+          <div class="h-[55px] text-[12px] text-[#99A0AE] dark:text-gray-500 mb-[12px] line-clamp-3">
             这是一只靓仔河马，拍照这是一只亲子青蛙主题很合适特别适合亲子主题这是一只靓仔河马，拍照这是一只亲子青蛙主题很合适特别适合亲子主题
           </div>
           <div class="flex items-center justify-between">
-            <div class="text-[12px] text-[#99A0AE]">2025-12-15 10:45</div>
+            <div class="text-[12px] text-[#99A0AE] dark:text-gray-500">2025-12-15 10:45</div>
             <div class="flex items-center">
-              <component :is="RiEditLine" color="#99A0AE" class="w-[12px] mr-[12px] cursor-pointer" />
-              <component :is="RiDeleteBinLine" color="#99A0AE" class="w-[12px] cursor-pointer" />
+              <component :is="RiEditLine" color="#99A0AE" class="w-[12px] mr-[12px] cursor-pointer dark:text-gray-400" />
+              <component :is="RiDeleteBinLine" color="#99A0AE" class="w-[12px] cursor-pointer dark:text-gray-400" />
             </div>
           </div>
         </div>
diff --git a/src/pages/knowledge/components/RoomTypeManager/index.vue b/src/pages/knowledge/components/RoomTypeManager/index.vue
index 6661967..d67891e 100644
--- a/src/pages/knowledge/components/RoomTypeManager/index.vue
+++ b/src/pages/knowledge/components/RoomTypeManager/index.vue
@@ -69,10 +69,20 @@ getRoomTypeList()
   background: #EFF6FF !important;
 }
 
+.dark :deep(.el-table tr td:nth-of-type(1)) {
+  background: #1f1f22 !important;
+}
+
 :deep(.el-tag) {
   background: #FFFFFF !important;
   border-radius: 6px !important;
   border: 1px solid #E5E8EE !important;
   color: #525866;
 }
+
+.dark :deep(.el-tag) {
+  background: #222225 !important;
+  border-color: #2a2a2d !important;
+  color: #9ca3af;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/knowledge/index.vue b/src/pages/knowledge/index.vue
index 1215c9a..ea03f39 100644
--- a/src/pages/knowledge/index.vue
+++ b/src/pages/knowledge/index.vue
@@ -1,6 +1,6 @@
 <template>
   <layout>
-    <div class="bg-white box-border w-full h-full p-[20px] rounded-[16px]">
+    <div class="bg-white dark:bg-[#1b1b1d] box-border w-full h-full p-[20px] rounded-[16px]">
       <TitleSection :title="t('knowledge.title')" :desc="t('knowledge.desc')" />
       <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
         <el-tab-pane :label="t('knowledge.roomTypeManager')" name="roomType">
@@ -43,4 +43,16 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 :deep(.el-tabs__active-bar) {
   background-color: #2B7FFF;
 }
+
+.dark :deep(.el-tabs__item) {
+  color: #6b7280;
+}
+
+.dark :deep(.el-tabs__item.is-active) {
+  color: #60a5fa;
+}
+
+.dark :deep(.el-tabs__active-bar) {
+  background-color: #60a5fa;
+}
 </style>
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 06ed6b0..cd08765 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -2,21 +2,21 @@
   <div class="h-screen login-bg flex flex-col">
     <title-bar v-if="platform !== 'linux'" variant="light" />
     <main class="box-border pl-2 pr-2 pb-2 flex-auto flex" :class="[platform !== 'linux' ? 'pt-2' : 'pt-11']">
-      <div class="w-209 box-border bg-white rounded-2xl p-8 flex flex-col">
+      <div class="w-209 box-border bg-white dark:bg-[#1b1b1d] rounded-2xl p-8 flex flex-col">
         <div class="flex items-center">
           <img class="w-12 h-12" src="@assets/images/login/blue_logo.png" />
         </div>
 
         <div class="flex flex-col items-center justify-center mb-6 box-border pt-10">
           <img class="w-20 h-20 mb-3" src="@assets/images/login/user_icon.png" />
-          <div class="text-[24px] font-500 text-gray-800 line-height-[32px] mb-1">{{ t('login.title') }}</div>
-          <div class="text-[16px] text-gray-500 line-height-[24px]">{{ t('login.subtitle') }}</div>
+          <div class="text-[24px] font-500 text-gray-800 dark:text-gray-100 line-height-[32px] mb-1">{{ t('login.title') }}</div>
+          <div class="text-[16px] text-gray-500 dark:text-gray-400 line-height-[24px]">{{ t('login.subtitle') }}</div>
         </div>
 
         <el-form class="w-98 ml-auto mr-auto" ref="formRef" :rules="rules" :model="form" label-position="top"
           @keyup.enter="onSubmit">
           <el-form-item prop="username">
-            <div class="text-[14px] text-gray-600">{{ t('login.username') }}</div>
+            <div class="text-[14px] text-gray-600 dark:text-gray-300">{{ t('login.username') }}</div>
             <el-input class="h-10" v-model.trim="form.username" :placeholder="t('login.usernamePlaceholder')" clearable autocomplete="off">
               <template #prefix>
                 <RiUser3Fill size="20px" color="#99A0AE" />
@@ -24,7 +24,7 @@
             </el-input>
           </el-form-item>
           <el-form-item prop="password">
-            <div class="text-[14px] text-gray-600">{{ t('login.password') }}</div>
+            <div class="text-[14px] text-gray-600 dark:text-gray-300">{{ t('login.password') }}</div>
             <el-input class="h-10" v-model.trim="form.password" type="password" :placeholder="t('login.passwordPlaceholder')" clearable
                 autocomplete="off">
               <template #prefix>
@@ -34,7 +34,7 @@
           </el-form-item>
 
           <el-form-item prop="code">
-            <span class="text-[14px] text-gray-600">{{ t('login.code') }}</span>
+            <span class="text-[14px] text-gray-600 dark:text-gray-300">{{ t('login.code') }}</span>
             <el-input v-model.trim="form.code" :placeholder="t('login.codePlaceholder')" autocomplete="off">
               <template #suffix>
                 <img class="w-20 h-9.5 cursor-pointer" :src="imgSrc" @click="getVerifyCode" />
diff --git a/src/pages/scripts/components/ScriptCard.vue b/src/pages/scripts/components/ScriptCard.vue
index b42ce95..d08be2e 100644
--- a/src/pages/scripts/components/ScriptCard.vue
+++ b/src/pages/scripts/components/ScriptCard.vue
@@ -1,24 +1,24 @@
 <template>
   <div
-    class="group flex flex-col p-5 rounded-2xl bg-white border border-black/[0.08] hover:border-black/[0.12] hover:bg-black/[0.03] transition-all relative overflow-hidden"
+    class="group flex flex-col p-5 rounded-2xl bg-white dark:bg-[#1f1f22] border border-black/[0.08] dark:border-[#2a2a2d] hover:border-black/[0.12] dark:hover:border-gray-700 hover:bg-black/[0.03] dark:hover:bg-[#2a2a2d] transition-all relative overflow-hidden"
   >
     <div class="flex items-start justify-between mb-4">
       <div class="flex items-center gap-4">
-        <div class="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-[#171717] bg-black/5 border border-black/5 rounded-full shadow-sm group-hover:scale-105 transition-transform">
-          <RiCodeLine :class="['h-5 w-5', script.enabled ? 'text-[#171717]' : 'text-[#99A0AE]']" />
+        <div class="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-[#171717] dark:text-[#f3f4f6] bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 rounded-full shadow-sm group-hover:scale-105 transition-transform">
+          <RiCodeLine :class="['h-5 w-5', script.enabled ? 'text-[#171717] dark:text-[#f3f4f6]' : 'text-[#99A0AE] dark:text-gray-500']" />
         </div>
         <div class="flex flex-col min-w-0">
           <div class="flex items-center gap-2 mb-1">
-            <h3 class="text-[16px] font-semibold text-[#171717] truncate">{{ script.name }}</h3>
+            <h3 class="text-[16px] font-semibold text-[#171717] dark:text-[#f3f4f6] truncate">{{ script.name }}</h3>
             <div
               :class="[
                 'w-2 h-2 rounded-full shrink-0',
-                script.enabled ? 'bg-green-500' : 'bg-[#99A0AE]'
+                script.enabled ? 'bg-green-500' : 'bg-[#99A0AE] dark:bg-gray-500'
               ]"
               :title="script.enabled ? t('script.stats.active') : t('script.stats.total')"
             />
           </div>
-          <p v-if="props.script.channel && props.script.channel !== 'common'" class="text-[13px] text-[#525866] flex items-center gap-1.5">
+          <p v-if="props.script.channel && props.script.channel !== 'common'" class="text-[13px] text-[#525866] dark:text-gray-400 flex items-center gap-1.5">
             <RiMapPinLine class="h-3.5 w-3.5" />
             {{ channelLabel }}
           </p>
@@ -35,14 +35,14 @@
 
     <div class="flex-1 flex flex-col justify-end mt-2 pl-[62px]">
       <div class="flex items-start gap-2 mb-3">
-        <RiFileTextLine class="h-3.5 w-3.5 mt-0.5 text-[#99A0AE] shrink-0" />
-        <p class="text-[13.5px] text-[#525866] line-clamp-2 leading-[1.5]">
+        <RiFileTextLine class="h-3.5 w-3.5 mt-0.5 text-[#99A0AE] dark:text-gray-500 shrink-0" />
+        <p class="text-[13.5px] text-[#525866] dark:text-gray-400 line-clamp-2 leading-[1.5]">
           {{ script.description || t('script.dialog.descriptionPlaceholder') }}
         </p>
       </div>
 
       <!-- Metadata -->
-      <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-[12px] text-[#99A0AE] font-medium mb-3">
+      <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-[12px] text-[#99A0AE] dark:text-gray-500 font-medium mb-3">
         <span v-if="script.lastRun" class="flex items-center gap-1.5">
           <RiHistoryLine class="h-3.5 w-3.5" />
           {{ t('script.card.last') }}: {{ formatRelativeTime(script.lastRun.time) }}
@@ -56,7 +56,7 @@
         <div
           :class="[
             'p-2.5 rounded-xl text-[12px] font-mono overflow-y-auto max-h-[120px] border',
-            executionLog.success ? 'bg-green-500/5 border-green-500/20 text-green-700' : 'bg-red-500/10 border-red-500/20 text-red-600'
+            executionLog.success ? 'bg-green-500/5 border-green-500/20 text-green-700 dark:text-green-400' : 'bg-red-500/10 border-red-500/20 text-red-600 dark:text-red-400'
           ]"
         >
           <pre class="whitespace-pre-wrap break-all">{{ executionLog.stdoutTail || executionLog.stderrTail || executionLog.error || '-' }}</pre>
diff --git a/src/pages/scripts/components/ScriptCreateDialog.vue b/src/pages/scripts/components/ScriptCreateDialog.vue
index 262fd2c..010565c 100644
--- a/src/pages/scripts/components/ScriptCreateDialog.vue
+++ b/src/pages/scripts/components/ScriptCreateDialog.vue
@@ -8,16 +8,16 @@
   >
     <!-- Header -->
     <template #header>
-      <div class="sticky top-0 z-10 bg-[#F4F3EB] flex justify-between items-start">
+      <div class="sticky top-0 z-10 bg-[#F4F3EB] dark:bg-[#1f1f22] flex justify-between items-start">
         <div>
-          <h2 class="text-[24px] font-serif text-[#171717] mb-[8px] font-normal tracking-tight">
+          <h2 class="text-[24px] font-serif text-[#171717] dark:text-[#f3f4f6] mb-[8px] font-normal tracking-tight">
             {{ t('script.dialog.createTitle') }}
           </h2>
-          <p class="text-[14px] text-[#99A0AE]">
+          <p class="text-[14px] text-[#99A0AE] dark:text-gray-500">
             {{ t('script.dialog.description') }}
           </p>
         </div>
-        <button @click="visible = false" class="text-[#99A0AE] hover:text-[#171717] transition-colors mt-[4px]">
+        <button @click="visible = false" class="text-[#99A0AE] dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] transition-colors mt-[4px]">
           <el-icon class="text-[20px] cursor-pointer"><Close /></el-icon>
         </button>
       </div>
@@ -27,7 +27,7 @@
     <div class="px-[30px] pb-[30px] pt-[30px] space-y-6">
       <!-- Name -->
       <div class="space-y-2.5">
-        <label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.name') }}</label>
+        <label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.name') }}</label>
         <el-input
           v-model="form.name"
           :placeholder="t('script.dialog.namePlaceholder')"
@@ -37,7 +37,7 @@
 
       <!-- Description -->
       <div class="space-y-2.5">
-        <label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.descriptionLabel') }}</label>
+        <label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.descriptionLabel') }}</label>
         <el-input
           v-model="form.description"
           type="textarea"
@@ -49,7 +49,7 @@
 
       <!-- Channel -->
       <div class="space-y-2.5">
-        <label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.channel') }}</label>
+        <label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.channel') }}</label>
         <el-input
           v-model="form.channel"
           :placeholder="t('script.dialog.channel')"
@@ -169,6 +169,9 @@ function handleClosed() {
   overflow: hidden;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
 }
+.dark .custom-script-dialog {
+  background-color: #1f1f22 !important;
+}
 .custom-script-dialog .el-dialog__body {
   padding: 0 !important;
   max-height: calc(100vh - 360px);
@@ -181,6 +184,9 @@ function handleClosed() {
   background-color: #D1CFC7;
   border-radius: 3px;
 }
+.dark .custom-script-dialog .el-dialog__body::-webkit-scrollbar-thumb {
+  background-color: #2a2a2d;
+}
 
 /* Input / Textarea styling */
 .custom-script-dialog .el-input__wrapper,
@@ -191,22 +197,41 @@ function handleClosed() {
   border: 1px solid transparent !important;
   color: #171717 !important;
 }
+.dark .custom-script-dialog .el-input__wrapper,
+.dark .custom-script-dialog .el-textarea__inner {
+  background-color: #222225 !important;
+  color: #f3f4f6 !important;
+}
 .custom-script-dialog .el-input__wrapper.is-focus,
 .custom-script-dialog .el-textarea__inner:focus {
   border-color: #3B6DE8 !important;
 }
+.dark .custom-script-dialog .el-input__wrapper.is-focus,
+.dark .custom-script-dialog .el-textarea__inner:focus {
+  border-color: #3B6DE8 !important;
+}
 .custom-script-dialog .el-input__inner {
   color: #171717 !important;
 }
+.dark .custom-script-dialog .el-input__inner {
+  color: #f3f4f6 !important;
+}
 .custom-script-dialog .el-input__inner::placeholder,
 .custom-script-dialog .el-textarea__inner::placeholder {
   color: #99A0AE !important;
 }
+.dark .custom-script-dialog .el-input__inner::placeholder,
+.dark .custom-script-dialog .el-textarea__inner::placeholder {
+  color: #6b7280 !important;
+}
 
 /* Select styling */
 .custom-script-dialog .el-select .el-input__wrapper {
   background-color: #EDECE4 !important;
 }
+.dark .custom-script-dialog .el-select .el-input__wrapper {
+  background-color: #222225 !important;
+}
 
 /* Cancel button */
 .cancel-btn {
@@ -218,4 +243,12 @@ function handleClosed() {
   background-color: #E5E4DC !important;
   color: #171717 !important;
 }
+.dark .cancel-btn {
+  background-color: #222225 !important;
+  color: #9ca3af !important;
+}
+.dark .cancel-btn:hover {
+  background-color: #2a2a2d !important;
+  color: #f3f4f6 !important;
+}
 </style>
diff --git a/src/pages/scripts/components/ScriptEditorDialog.vue b/src/pages/scripts/components/ScriptEditorDialog.vue
index dccd125..e834890 100644
--- a/src/pages/scripts/components/ScriptEditorDialog.vue
+++ b/src/pages/scripts/components/ScriptEditorDialog.vue
@@ -8,16 +8,16 @@
   >
     <!-- Header -->
     <template #header>
-      <div class="sticky top-0 z-10 bg-[#F4F3EB] flex justify-between items-start">
+      <div class="sticky top-0 z-10 bg-[#F4F3EB] dark:bg-[#1f1f22] flex justify-between items-start">
         <div>
-          <h2 class="text-[24px] font-serif text-[#171717] mb-[8px] font-normal tracking-tight">
+          <h2 class="text-[24px] font-serif text-[#171717] dark:text-[#f3f4f6] mb-[8px] font-normal tracking-tight">
             {{ t('script.dialog.editTitle') }}
           </h2>
-          <p class="text-[14px] text-[#99A0AE]">
+          <p class="text-[14px] text-[#99A0AE] dark:text-gray-500">
             {{ t('script.dialog.description') }}
           </p>
         </div>
-        <button @click="visible = false" class="text-[#99A0AE] hover:text-[#171717] transition-colors mt-[4px]">
+        <button @click="visible = false" class="text-[#99A0AE] dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] transition-colors mt-[4px]">
           <el-icon class="text-[20px] cursor-pointer"><Close /></el-icon>
         </button>
       </div>
@@ -27,7 +27,7 @@
     <div class="px-[30px] pb-[30px] pt-[30px] space-y-6">
       <!-- Name -->
       <div class="space-y-2.5">
-        <label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.name') }}</label>
+        <label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.name') }}</label>
         <el-input
           v-model="form.name"
           :placeholder="t('script.dialog.namePlaceholder')"
@@ -37,7 +37,7 @@
 
       <!-- Description -->
       <div class="space-y-2.5">
-        <label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.descriptionLabel') }}</label>
+        <label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.descriptionLabel') }}</label>
         <el-input
           v-model="form.description"
           type="textarea"
@@ -49,7 +49,7 @@
 
       <!-- Channel -->
       <div class="space-y-2.5">
-        <label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.channel') }}</label>
+        <label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.channel') }}</label>
         <el-input
           v-model="form.channel"
           :placeholder="t('script.dialog.channelPlaceholder') || '粘贴渠道链接 / Paste channel URL'"
@@ -60,7 +60,7 @@
       <!-- Code Editor -->
       <div class="space-y-2.5">
         <div class="flex items-center justify-between">
-          <label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.code') }}</label>
+          <label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.code') }}</label>
           <div class="flex items-center gap-2">
             <el-button
               v-if="store.recordingStatus !== 'recording'"
@@ -90,11 +90,11 @@
           </div>
         </div>
 
-        <p v-if="store.recordingStatus === 'recording'" class="text-[12px] text-amber-600 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
+        <p v-if="store.recordingStatus === 'recording'" class="text-[12px] text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg px-3 py-2">
           {{ t('script.dialog.recordTip') }}
         </p>
 
-        <div class="rounded-[12px] overflow-hidden border border-transparent h-[320px] script-editor-container">
+        <div class="rounded-[12px] overflow-hidden border border-transparent dark:border-[#2a2a2d] h-[320px] script-editor-container">
           <Codemirror
             v-model="form.code"
             placeholder="// Write your Playwright script here..."
@@ -108,10 +108,10 @@
       </div>
 
       <!-- Enabled -->
-      <div class="flex items-center justify-between bg-[#E8E6DE]/50 p-4 rounded-2xl border border-black/5">
+      <div class="flex items-center justify-between bg-[#E8E6DE]/50 dark:bg-[#222225] p-4 rounded-2xl border border-black/5 dark:border-[#2a2a2d]">
         <div>
-          <label class="text-[14px] text-[#171717]/80 font-bold">{{ t('cron.dialog.enableImmediately') }}</label>
-          <p class="text-[13px] text-[#99A0AE] mt-0.5">
+          <label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('cron.dialog.enableImmediately') }}</label>
+          <p class="text-[13px] text-[#99A0AE] dark:text-gray-500 mt-0.5">
             {{ t('cron.dialog.enableImmediatelyDesc') }}
           </p>
         </div>
@@ -280,6 +280,9 @@ function handleClosed() {
   overflow: hidden;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
 }
+.dark .custom-script-dialog {
+  background-color: #1f1f22 !important;
+}
 .custom-script-dialog .el-dialog__body {
   padding: 0 !important;
   max-height: calc(100vh - 360px);
@@ -292,6 +295,9 @@ function handleClosed() {
   background-color: #D1CFC7;
   border-radius: 3px;
 }
+.dark .custom-script-dialog .el-dialog__body::-webkit-scrollbar-thumb {
+  background-color: #2a2a2d;
+}
 
 /* Input / Textarea styling */
 .custom-script-dialog .el-input__wrapper,
@@ -302,6 +308,11 @@ function handleClosed() {
   border: 1px solid transparent !important;
   color: #171717 !important;
 }
+.dark .custom-script-dialog .el-input__wrapper,
+.dark .custom-script-dialog .el-textarea__inner {
+  background-color: #222225 !important;
+  color: #f3f4f6 !important;
+}
 .custom-script-dialog .el-input__wrapper.is-focus,
 .custom-script-dialog .el-textarea__inner:focus {
   border-color: #3B6DE8 !important;
@@ -309,15 +320,25 @@ function handleClosed() {
 .custom-script-dialog .el-input__inner {
   color: #171717 !important;
 }
+.dark .custom-script-dialog .el-input__inner {
+  color: #f3f4f6 !important;
+}
 .custom-script-dialog .el-input__inner::placeholder,
 .custom-script-dialog .el-textarea__inner::placeholder {
   color: #99A0AE !important;
 }
+.dark .custom-script-dialog .el-input__inner::placeholder,
+.dark .custom-script-dialog .el-textarea__inner::placeholder {
+  color: #6b7280 !important;
+}
 
 /* Select styling */
 .custom-script-dialog .el-select .el-input__wrapper {
   background-color: #EDECE4 !important;
 }
+.dark .custom-script-dialog .el-select .el-input__wrapper {
+  background-color: #222225 !important;
+}
 
 /* Toggle switch */
 .custom-script-dialog .el-switch.is-checked .el-switch__core {
@@ -335,15 +356,29 @@ function handleClosed() {
   background-color: #E5E4DC !important;
   color: #171717 !important;
 }
+.dark .cancel-btn {
+  background-color: #222225 !important;
+  color: #9ca3af !important;
+}
+.dark .cancel-btn:hover {
+  background-color: #2a2a2d !important;
+  color: #f3f4f6 !important;
+}
 
 /* CodeMirror container */
 .script-editor-container {
   background-color: #EDECE4;
 }
+.dark .script-editor-container {
+  background-color: #0f0f10;
+}
 .script-editor-container .cm-editor {
   height: 100%;
   background-color: #EDECE4;
 }
+.dark .script-editor-container .cm-editor {
+  background-color: #0f0f10;
+}
 .script-editor-container .cm-editor.cm-focused {
   outline: none;
 }
diff --git a/src/pages/scripts/components/ScriptStats.vue b/src/pages/scripts/components/ScriptStats.vue
index 2d480a3..80a7b66 100644
--- a/src/pages/scripts/components/ScriptStats.vue
+++ b/src/pages/scripts/components/ScriptStats.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
-    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 border border-black/5">
-      <div class="text-[12px] text-[#525866] font-medium mb-1">{{ t('script.stats.total') }}</div>
-      <div class="text-[28px] font-serif text-[#171717]">{{ total }}</div>
+    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 dark:bg-[#1f1f22] border border-black/5 dark:border-[#2a2a2d]">
+      <div class="text-[12px] text-[#525866] dark:text-gray-400 font-medium mb-1">{{ t('script.stats.total') }}</div>
+      <div class="text-[28px] font-serif text-[#171717] dark:text-[#f3f4f6]">{{ total }}</div>
     </div>
-    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 border border-black/5">
-      <div class="text-[12px] text-[#525866] font-medium mb-1">{{ t('script.stats.active') }}</div>
-      <div class="text-[28px] font-serif text-[#171717]">{{ active }}</div>
+    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 dark:bg-[#1f1f22] border border-black/5 dark:border-[#2a2a2d]">
+      <div class="text-[12px] text-[#525866] dark:text-gray-400 font-medium mb-1">{{ t('script.stats.active') }}</div>
+      <div class="text-[28px] font-serif text-[#171717] dark:text-[#f3f4f6]">{{ active }}</div>
     </div>
-    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 border border-black/5">
-      <div class="text-[12px] text-[#525866] font-medium mb-1">{{ t('script.stats.failed') }}</div>
-      <div class="text-[28px] font-serif text-[#171717]">{{ failed }}</div>
+    <div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 dark:bg-[#1f1f22] border border-black/5 dark:border-[#2a2a2d]">
+      <div class="text-[12px] text-[#525866] dark:text-gray-400 font-medium mb-1">{{ t('script.stats.failed') }}</div>
+      <div class="text-[28px] font-serif text-[#171717] dark:text-[#f3f4f6]">{{ failed }}</div>
     </div>
   </div>
 </template>
diff --git a/src/pages/scripts/index.vue b/src/pages/scripts/index.vue
index 1f99dc3..160edd0 100644
--- a/src/pages/scripts/index.vue
+++ b/src/pages/scripts/index.vue
@@ -1,17 +1,17 @@
 <template>
   <layout>
-    <div class="bg-white box-border w-full h-full flex rounded-[16px] overflow-hidden">
+    <div class="bg-white dark:bg-[#1b1b1d] box-border w-full h-full flex rounded-[16px] overflow-hidden">
       <div class="w-full flex flex-col h-full p-10 pt-12">
         <!-- Header -->
         <div class="flex flex-col md:flex-row md:items-start justify-between mb-6 shrink-0 gap-4">
           <div>
             <h1
-              class="text-5xl md:text-6xl font-serif text-[#171717] mb-3 font-normal tracking-tight"
+              class="text-5xl md:text-6xl font-serif text-[#171717] dark:text-[#f3f4f6] mb-3 font-normal tracking-tight"
               style="font-family: Georgia, Cambria, 'Times New Roman', Times, serif"
             >
               {{ t('script.title') }}
             </h1>
-            <p class="text-[17px] text-[#171717]/70 font-medium">
+            <p class="text-[17px] text-[#171717]/70 dark:text-[#9ca3af] font-medium">
               {{ t('script.subtitle') }}
             </p>
           </div>
@@ -19,33 +19,33 @@
         </div>
 
         <!-- Sub Navigation and Actions -->
-        <div class="flex flex-col md:flex-row md:items-center justify-between border-b border-black/10 pb-4 mb-4 shrink-0 gap-4">
+        <div class="flex flex-col md:flex-row md:items-center justify-between border-b border-black/10 dark:border-gray-700 pb-4 mb-4 shrink-0 gap-4">
           <div class="flex items-center flex-wrap gap-4 text-[14px]">
-            <div class="relative group flex items-center bg-black/5 rounded-full px-3 py-1.5 focus-within:bg-black/10 transition-colors border border-transparent focus-within:border-black/10 mr-2">
-              <RiSearchLine class="h-4 w-4 shrink-0 text-[#525866]" />
+            <div class="relative group flex items-center bg-black/5 dark:bg-white/5 rounded-full px-3 py-1.5 focus-within:bg-black/10 dark:focus-within:bg-white/10 transition-colors border border-transparent focus-within:border-black/10 dark:focus-within:border-white/10 mr-2">
+              <RiSearchLine class="h-4 w-4 shrink-0 text-[#525866] dark:text-gray-400" />
               <input
                 :placeholder="t('script.search', 'Search scripts...')"
                 v-model="searchQuery"
-                class="ml-2 bg-transparent outline-none w-28 md:w-40 font-normal placeholder:text-[#171717]/50 text-[13px] text-[#171717]"
+                class="ml-2 bg-transparent outline-none w-28 md:w-40 font-normal placeholder:text-[#171717]/50 dark:placeholder:text-gray-500 text-[13px] text-[#171717] dark:text-[#f3f4f6]"
               />
               <button
                 v-if="searchQuery"
                 type="button"
                 @click="searchQuery = ''"
-                class="text-[#171717]/50 hover:text-[#171717] shrink-0 ml-1"
+                class="text-[#171717]/50 dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] shrink-0 ml-1"
               >
                 <RiCloseLine class="h-3.5 w-3.5" />
               </button>
             </div>
 
             <div class="flex items-center gap-4">
-              <span class="font-medium text-[#171717]">
+              <span class="font-medium text-[#171717] dark:text-[#f3f4f6]">
                 {{ t('script.stats.total', 'Total') }} {{ store.safeScripts.length }}
               </span>
-              <span class="text-[#525866]">
+              <span class="text-[#525866] dark:text-gray-400">
                 {{ t('script.stats.active', 'Active') }} {{ store.enabledScripts.length }}
               </span>
-              <span class="text-[#525866]">
+              <span class="text-[#525866] dark:text-gray-400">
                 {{ t('script.stats.failed', 'Failed') }} {{ store.safeScripts.filter((s) => s.lastRun && !s.lastRun.success).length }}
               </span>
             </div>
@@ -54,14 +54,14 @@
           <div class="flex items-center gap-2 shrink-0">
             <button
               @click="openCreateDialog"
-              class="shrink-0 text-[13px] font-medium px-4 h-8 rounded-md border border-black/10 bg-transparent hover:bg-black/5 text-[#171717]/80 hover:text-[#171717] flex items-center justify-center transition-colors"
+              class="shrink-0 text-[13px] font-medium px-4 h-8 rounded-md border border-black/10 dark:border-gray-700 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-[#171717]/80 dark:text-[#f3f4f6]/80 hover:text-[#171717] dark:hover:text-[#f3f4f6] flex items-center justify-center transition-colors"
             >
               <RiAddLine class="h-4 w-4 mr-2" />
               {{ t('script.newScript') }}
             </button>
             <button
               @click="store.fetchScripts()"
-              class="shrink-0 text-[13px] font-medium h-8 w-8 rounded-md border border-black/10 bg-transparent hover:bg-black/5 text-[#525866] hover:text-[#171717] flex items-center justify-center transition-colors"
+              class="shrink-0 text-[13px] font-medium h-8 w-8 rounded-md border border-black/10 dark:border-gray-700 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-[#525866] dark:text-gray-400 hover:text-[#171717] dark:hover:text-[#f3f4f6] flex items-center justify-center transition-colors"
               :title="t('script.refresh')"
             >
               <RiRefreshLine :class="['h-4 w-4', store.loading && 'animate-spin']" />
@@ -83,7 +83,7 @@
           <!-- Loading -->
           <div
             v-if="store.loading && store.safeScripts.length === 0"
-            class="flex flex-col items-center justify-center h-full text-[#525866]"
+            class="flex flex-col items-center justify-center h-full text-[#525866] dark:text-gray-400"
           >
             <RiRefreshLine class="h-10 w-10 animate-spin mb-4" />
             <p>{{ t('common.loading', 'Loading...') }}</p>
@@ -91,9 +91,9 @@
 
           <template v-else>
             <!-- Scripts List -->
-            <div v-if="filteredScripts.length === 0" class="flex flex-col items-center justify-center py-20 text-[#525866]">
+            <div v-if="filteredScripts.length === 0" class="flex flex-col items-center justify-center py-20 text-[#525866] dark:text-gray-400">
               <RiCodeLine class="h-10 w-10 mb-4 opacity-50" />
-              <h3 class="text-lg font-medium mb-2 text-[#171717]">{{ t('script.empty.title') }}</h3>
+              <h3 class="text-lg font-medium mb-2 text-[#171717] dark:text-[#f3f4f6]">{{ t('script.empty.title') }}</h3>
               <p class="text-[14px] text-center mb-6 max-w-md">
                 {{ t('script.empty.description') }}
               </p>
diff --git a/src/pages/setting/components/AccountSetting/index.vue b/src/pages/setting/components/AccountSetting/index.vue
index f0a5d3c..ef5955c 100644
--- a/src/pages/setting/components/AccountSetting/index.vue
+++ b/src/pages/setting/components/AccountSetting/index.vue
@@ -3,22 +3,22 @@
     <TitleSection :title="t('setting.account.title')" :desc="t('setting.account.desc')" />
 
     <div
-      class="w-full flex items-center mt-[20px] py-[20px] box-border border-b-[1px] border-dashed border-b-[#E5E8EE]">
-      <div class="label text-[16px] font-medium text-[#171717] mr-[24px] whitespace-nowrap">{{
+      class="w-full flex items-center mt-[20px] py-[20px] box-border border-b-[1px] border-dashed border-b-[#E5E8EE] dark:border-b-gray-700">
+      <div class="label text-[16px] font-medium text-[#171717] dark:text-gray-100 mr-[24px] whitespace-nowrap">{{
         t('setting.account.account') }}</div>
-      <div class="value text-[14px] font-medium text-[#171717]">1234567890</div>
+      <div class="value text-[14px] font-medium text-[#171717] dark:text-gray-100">1234567890</div>
     </div>
 
-    <div class="w-full flex items-center py-[20px] box-border border-b-[1px] border-dashed border-b-[#E5E8EE]">
-      <div class="label  text-[16px] font-medium text-[#171717] mr-[24px] whitespace-nowrap">{{
+    <div class="w-full flex items-center py-[20px] box-border border-b-[1px] border-dashed border-b-[#E5E8EE] dark:border-b-gray-700">
+      <div class="label  text-[16px] font-medium text-[#171717] dark:text-gray-100 mr-[24px] whitespace-nowrap">{{
         t('setting.account.password') }}</div>
-      <div class="value text-[14px] text-[#99A0AE]">
+      <div class="value text-[14px] text-[#99A0AE] dark:text-gray-500">
         {{ t('setting.account.passwordDesc') }} 2022-11-09 16:24:30
       </div>
 
-      <div class="border-[1px] border-[#E5E8EE] rounded-[6px] px-[6px] py-[4px] flex items-center ml-[24px]">
+      <div class="border-[1px] border-[#E5E8EE] dark:border-gray-700 rounded-[6px] px-[6px] py-[4px] flex items-center ml-[24px]">
         <RiCheckboxCircleFill class="w-[16px] h-[16px]" color="#1FC16B" />
-        <span class="text-[12px] text-[#525866] ml-[2px] whitespace-nowrap">{{ t('setting.account.configured') }}</span>
+        <span class="text-[12px] text-[#525866] dark:text-gray-400 ml-[2px] whitespace-nowrap">{{ t('setting.account.configured') }}</span>
       </div>
 
       <el-button type="text" class="ml-auto">{{ t('setting.account.changePassword') }}</el-button>
diff --git a/src/pages/setting/components/SystemConfig/index.vue b/src/pages/setting/components/SystemConfig/index.vue
index 67983f7..df6ab13 100644
--- a/src/pages/setting/components/SystemConfig/index.vue
+++ b/src/pages/setting/components/SystemConfig/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div
-    class="w-[160px] h-full box-border border-r-[1px] border-r-[#E5E8EE] py-[12px] px-[8px] flex flex-col gap-[4px] select-none">
-    <div class="text-[12px] text-[#99A0AE] p-[4px]">{{ t('setting.menu.title') }}</div>
+    class="w-[160px] h-full box-border border-r-[1px] border-r-[#E5E8EE] dark:border-r-gray-700 py-[12px] px-[8px] flex flex-col gap-[4px] select-none">
+    <div class="text-[12px] text-[#99A0AE] dark:text-gray-500 p-[4px]">{{ t('setting.menu.title') }}</div>
 
     <div
-      :class="['box-border flex items-center py-[10px] px-[12px] rounded-[6px] cursor-pointer hover:bg-[#EFF6FF]', item.id === currentId ? 'bg-[#EFF6FF]' : '']"
+      :class="['box-border flex items-center py-[10px] px-[12px] rounded-[6px] cursor-pointer hover:bg-[#EFF6FF] dark:hover:bg-[#222225]', item.id === currentId ? 'bg-[#EFF6FF] dark:bg-[#222225]' : '']"
       v-for="item in systemMenus" :key="item.id" @click="handleClick(item)">
       <component :is="item.icon" :color="item.id === currentId ? item.activeColor : item.color"
         class="w-[20px] h-[20px]" />
-      <span class="box-border px-[8px] text-[14px] font-medium text-[#525866]">{{ t(item.name) }}</span>
+      <span class="box-border px-[8px] text-[14px] font-medium text-[#525866] dark:text-gray-300">{{ t(item.name) }}</span>
     </div>
   </div>
 </template>
diff --git a/src/pages/setting/components/Version/index.vue b/src/pages/setting/components/Version/index.vue
index ac4a7b2..e8d97a9 100644
--- a/src/pages/setting/components/Version/index.vue
+++ b/src/pages/setting/components/Version/index.vue
@@ -36,11 +36,11 @@
 
             <!-- 跟随系统 -->
             <button
-              class="theme-button px-5 py-1.5 rounded-full border text-[14px] font-medium transition-all duration-200 flex items-center gap-2"
+                            class="theme-button px-5 py-1.5 rounded-full border text-[14px] font-medium transition-all duration-200 flex items-center gap-2"
               :class="[
                 currentTheme === 'system'
                   ? 'bg-green-50 dark:bg-green-900/20 border-green-500 dark:border-green-400 text-green-700 dark:text-green-300'
-                  : 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
+                  : 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
               ]" @click="handleThemeChange('system')">
               <RiComputerLine class="w-4 h-4" />
               {{ t('setting.theme.systemLabel') }}
diff --git a/src/pages/setting/index.vue b/src/pages/setting/index.vue
index e5bc55b..b4abd9b 100644
--- a/src/pages/setting/index.vue
+++ b/src/pages/setting/index.vue
@@ -1,6 +1,6 @@
 <template>
   <layout>
-    <div class="bg-white box-border w-full h-full flex rounded-2xl">
+    <div class="bg-white dark:bg-[#1b1b1d] box-border w-full h-full flex rounded-2xl">
       <SystemConfig @change=onChange />
       <component :is="currentComponent" />
     </div>
diff --git a/src/pages/skills/components/EnvVarManager.vue b/src/pages/skills/components/EnvVarManager.vue
index 83b29a8..c8fc29d 100644
--- a/src/pages/skills/components/EnvVarManager.vue
+++ b/src/pages/skills/components/EnvVarManager.vue
@@ -2,7 +2,7 @@
   <div class="space-y-3">
     <div class="flex items-center justify-between w-full">
       <div class="flex items-center gap-2">
-        <h3 class="text-[13px] font-bold text-[#171717]/80">
+        <h3 class="text-[13px] font-bold text-[#171717]/80 dark:text-gray-300">
           {{ t('skills.detail.envVars') }}
           <el-tag v-if="modelValue.length > 0" type="info" class="ml-2 !h-5 !px-1.5 !text-[10px]">
             {{ modelValue.length }}
@@ -21,7 +21,7 @@
     </div>
 
     <div class="space-y-2">
-      <div v-if="modelValue.length === 0" class="text-[13px] text-[#525866] font-medium italic flex items-center bg-[#eeece3] border border-black/5 rounded-xl px-4 py-3 shadow-sm">
+      <div v-if="modelValue.length === 0" class="text-[13px] text-[#525866] dark:text-gray-400 font-medium italic flex items-center bg-[#eeece3] dark:bg-[#222225] border border-black/5 dark:border-gray-700 rounded-xl px-4 py-3 shadow-sm">
         {{ t('skills.detail.noEnvVars', 'No environment variables configured.') }}
       </div>
 
diff --git a/src/pages/skills/components/MarketplaceDrawer.vue b/src/pages/skills/components/MarketplaceDrawer.vue
index 2e03169..ca1a2db 100644
--- a/src/pages/skills/components/MarketplaceDrawer.vue
+++ b/src/pages/skills/components/MarketplaceDrawer.vue
@@ -7,24 +7,24 @@
     :with-header="false"
     class="marketplace-drawer"
   >
-    <div class="flex flex-col h-full bg-[#f3f1e9]">
-      <div class="px-7 py-6 border-b border-black/10">
-        <h2 class="text-[24px] font-serif text-[#171717] font-normal tracking-tight">{{ t('skills.marketplace.installDialogTitle') }}</h2>
-        <p class="mt-1 text-[13px] text-[#171717]/70">{{ t('skills.marketplace.installDialogSubtitle') }}</p>
+    <div class="flex flex-col h-full bg-[#f3f1e9] dark:bg-[#1b1b1d]">
+      <div class="px-7 py-6 border-b border-black/10 dark:border-gray-700">
+        <h2 class="text-[24px] font-serif text-[#171717] dark:text-[#f3f4f6] font-normal tracking-tight">{{ t('skills.marketplace.installDialogTitle') }}</h2>
+        <p class="mt-1 text-[13px] text-[#171717]/70 dark:text-gray-400">{{ t('skills.marketplace.installDialogSubtitle') }}</p>
         <div class="mt-4 flex flex-col md:flex-row gap-2">
-          <div class="relative flex items-center bg-black/5 rounded-xl px-3 py-2 border border-black/10 flex-1">
-            <RiSearchLine class="h-4 w-4 shrink-0 text-[#525866]" />
+          <div class="relative flex items-center bg-black/5 dark:bg-[#222225] rounded-xl px-3 py-2 border border-black/10 dark:border-gray-700 flex-1">
+            <RiSearchLine class="h-4 w-4 shrink-0 text-[#525866] dark:text-gray-500" />
             <input
               :value="query"
               @input="$emit('update:query', ($event.target as HTMLInputElement).value)"
               :placeholder="t('skills.searchMarketplace')"
-              class="ml-2 bg-transparent outline-none w-full font-normal placeholder:text-[#171717]/50 text-[13px] text-[#171717]"
+              class="ml-2 bg-transparent outline-none w-full font-normal placeholder:text-[#171717]/50 dark:placeholder:text-gray-500 text-[13px] text-[#171717] dark:text-[#f3f4f6]"
             />
-            <button v-if="query" @click="$emit('update:query', '')" class="text-[#171717]/50 hover:text-[#171717] shrink-0 ml-1">
+            <button v-if="query" @click="$emit('update:query', '')" class="text-[#171717]/50 dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] shrink-0 ml-1">
               <RiCloseLine class="h-3.5 w-3.5" />
             </button>
           </div>
-          <el-button disabled class="!h-10 !rounded-xl !border-black/10 !bg-transparent !text-[#525866]">
+          <el-button disabled class="!h-10 !rounded-xl !border-black/10 dark:!border-gray-700 !bg-transparent !text-[#525866] dark:!text-gray-400">
             {{ t('skills.marketplace.sourceLabel') }}: {{ t('skills.marketplace.sourceClawHub') }}
           </el-button>
         </div>
@@ -38,7 +38,7 @@
           </span>
         </div>
 
-        <div v-if="searching" class="flex flex-col items-center justify-center py-20 text-[#525866]">
+        <div v-if="searching" class="flex flex-col items-center justify-center py-20 text-[#525866] dark:text-gray-400">
           <RiRefreshLine class="h-8 w-8 animate-spin mb-4" />
           <p class="text-sm">{{ t('skills.marketplace.searching') }}</p>
         </div>
@@ -47,25 +47,25 @@
           <div
             v-for="skill in searchResults"
             :key="skill.slug"
-            class="group flex flex-row items-center justify-between py-3.5 px-3 rounded-xl hover:bg-black/5 transition-colors cursor-pointer border-b border-black/5 last:border-0"
+            class="group flex flex-row items-center justify-between py-3.5 px-3 rounded-xl hover:bg-black/5 dark:hover:bg-[#2a2a2d] transition-colors cursor-pointer border-b border-black/5 dark:border-gray-700/50 last:border-0"
             @click="handleOpenExternal(skill.slug)"
           >
             <div class="flex items-start gap-4 flex-1 overflow-hidden pr-4">
-              <div class="h-10 w-10 shrink-0 flex items-center justify-center text-xl bg-black/5 border border-black/5 rounded-xl overflow-hidden">
+              <div class="h-10 w-10 shrink-0 flex items-center justify-center text-xl bg-black/5 dark:bg-[#222225] border border-black/5 dark:border-gray-700 rounded-xl overflow-hidden">
                 📦
               </div>
               <div class="flex flex-col overflow-hidden">
                 <div class="flex items-center gap-2 mb-1">
-                  <h3 class="text-[15px] font-semibold text-[#171717] truncate">{{ skill.name }}</h3>
-                  <span v-if="skill.author" class="text-xs text-[#525866]">• {{ skill.author }}</span>
+                  <h3 class="text-[15px] font-semibold text-[#171717] dark:text-[#f3f4f6] truncate">{{ skill.name }}</h3>
+                  <span v-if="skill.author" class="text-xs text-[#525866] dark:text-gray-400">• {{ skill.author }}</span>
                 </div>
-                <p class="text-[13.5px] text-[#525866] line-clamp-1 pr-6 leading-relaxed">
+                <p class="text-[13.5px] text-[#525866] dark:text-gray-400 line-clamp-1 pr-6 leading-relaxed">
                   {{ skill.description }}
                 </p>
               </div>
             </div>
             <div class="flex items-center gap-4 shrink-0" @click.stop>
-              <span v-if="skill.version" class="text-[13px] font-mono text-[#525866] mr-2">
+              <span v-if="skill.version" class="text-[13px] font-mono text-[#525866] dark:text-gray-400 mr-2">
                 v{{ skill.version }}
               </span>
               <template v-if="isInstalled(skill)">
@@ -82,7 +82,7 @@
           </div>
         </div>
 
-        <div v-else class="flex flex-col items-center justify-center py-20 text-[#525866]">
+        <div v-else class="flex flex-col items-center justify-center py-20 text-[#525866] dark:text-gray-400">
           <RiArchiveLine class="h-10 w-10 mb-4 opacity-50" />
           <p>{{ query.trim() ? t('skills.marketplace.noResults') : t('skills.marketplace.emptyPrompt') }}</p>
         </div>
diff --git a/src/pages/skills/components/SkillDetailDrawer.vue b/src/pages/skills/components/SkillDetailDrawer.vue
index 3baedf3..140b3b9 100644
--- a/src/pages/skills/components/SkillDetailDrawer.vue
+++ b/src/pages/skills/components/SkillDetailDrawer.vue
@@ -7,37 +7,37 @@
     :with-header="false"
     class="skill-detail-drawer"
   >
-    <div v-if="skill" class="flex flex-col h-full bg-[#f3f1e9]">
+    <div v-if="skill" class="flex flex-col h-full bg-[#f3f1e9] dark:bg-[#1b1b1d]">
       <div class="flex-1 overflow-y-auto px-8 py-10">
         <div class="flex flex-col items-center mb-8">
-          <div class="w-16 h-16 flex items-center justify-center rounded-full bg-white border border-black/5 shrink-0 mb-4 relative shadow-sm">
+          <div class="w-16 h-16 flex items-center justify-center rounded-full bg-white dark:bg-[#222225] border border-black/5 dark:border-gray-700 shrink-0 mb-4 relative shadow-sm">
             <span class="text-3xl">{{ skill.icon || '🔧' }}</span>
-            <div v-if="skill.isCore" class="absolute -bottom-1 -right-1 bg-[#f3f1e9] rounded-full p-1 shadow-sm border border-black/5">
-              <RiLockLine class="h-3 w-3 text-[#525866] shrink-0" />
+            <div v-if="skill.isCore" class="absolute -bottom-1 -right-1 bg-[#f3f1e9] dark:bg-[#1b1b1d] rounded-full p-1 shadow-sm border border-black/5 dark:border-gray-700">
+              <RiLockLine class="h-3 w-3 text-[#525866] dark:text-gray-400 shrink-0" />
             </div>
           </div>
-          <h2 class="text-[28px] font-serif text-[#171717] font-normal mb-3 text-center tracking-tight">
+          <h2 class="text-[28px] font-serif text-[#171717] dark:text-[#f3f4f6] font-normal mb-3 text-center tracking-tight">
             {{ skill.name }}
           </h2>
           <div class="flex items-center justify-center gap-2.5 mb-6 opacity-80">
-            <el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] !border-0 !text-[#171717]/70 !px-3 !py-0.5 !text-[11px] !font-mono">
+            <el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] dark:!bg-white/[0.04] !border-0 !text-[#171717]/70 dark:!text-[#f3f4f6]/70 !px-3 !py-0.5 !text-[11px] !font-mono">
               v{{ skill.version || '1.0.0' }}
             </el-tag>
-            <el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] !border-0 !text-[#171717]/70 !px-3 !py-0.5 !text-[11px]">
+            <el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] dark:!bg-white/[0.04] !border-0 !text-[#171717]/70 dark:!text-[#f3f4f6]/70 !px-3 !py-0.5 !text-[11px]">
               {{ skill.isCore ? t('skills.detail.coreSystem') : skill.isBundled ? t('skills.detail.bundled') : t('skills.detail.userInstalled') }}
             </el-tag>
           </div>
 
-          <p v-if="skill.description" class="text-[14px] text-[#171717]/70 font-medium leading-[1.6] text-center px-4">
+          <p v-if="skill.description" class="text-[14px] text-[#171717]/70 dark:text-gray-400 font-medium leading-[1.6] text-center px-4">
             {{ skill.description }}
           </p>
         </div>
 
         <div class="space-y-7 px-1">
           <div class="space-y-2">
-            <h3 class="text-[13px] font-bold text-[#171717]/80">{{ t('skills.detail.source') }}</h3>
+            <h3 class="text-[13px] font-bold text-[#171717]/80 dark:text-gray-300">{{ t('skills.detail.source') }}</h3>
             <div class="flex items-center gap-2 flex-wrap">
-              <el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] !border-0 !text-[#171717]/70 !px-3 !py-0.5 !text-[11px]">
+              <el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] dark:!bg-white/[0.04] !border-0 !text-[#171717]/70 dark:!text-[#f3f4f6]/70 !px-3 !py-0.5 !text-[11px]">
                 {{ resolvedSource }}
               </el-tag>
             </div>
@@ -45,7 +45,7 @@
               <el-input
                 :model-value="skill.baseDir || t('skills.detail.pathUnavailable')"
                 readonly
-                class="flex-1 !h-[38px] font-mono text-[12px] bg-[#eeece3] border-black/10 rounded-xl text-[#171717]/70"
+                class="flex-1 !h-[38px] font-mono text-[12px] bg-[#eeece3] dark:bg-[#222225] border-black/10 dark:border-gray-700 rounded-xl text-[#171717]/70 dark:text-gray-300"
               />
               <el-button
                 class="!h-[38px] !w-[38px] !px-0"
@@ -67,7 +67,7 @@
           </div>
 
           <div v-if="!skill.isCore" class="space-y-2">
-            <h3 class="text-[13px] font-bold flex items-center gap-2 text-[#171717]/80">
+            <h3 class="text-[13px] font-bold flex items-center gap-2 text-[#171717]/80 dark:text-gray-300">
               <RiKeyLine class="h-3.5 w-3.5 text-blue-500" />
               {{ t('skills.detail.apiKey') }}
             </h3>
@@ -78,7 +78,7 @@
               show-password
               class="!h-[44px]"
             />
-            <p class="text-[12px] text-[#171717]/50 mt-2 font-medium">
+            <p class="text-[12px] text-[#171717]/50 dark:text-gray-500 mt-2 font-medium">
               {{ t('skills.detail.apiKeyDesc', 'The primary API key for this skill.') }}
             </p>
           </div>
@@ -86,11 +86,11 @@
           <EnvVarManager v-if="!skill.isCore" v-model="envVars" />
 
           <div v-if="skill.slug && !skill.isBundled && !skill.isCore" class="flex gap-2 justify-center pt-8">
-            <el-button size="small" class="!h-[28px] !text-[11px] !font-medium !px-3 !gap-1.5 !rounded-full !border-black/10 !bg-transparent hover:!bg-black/5" @click="handleOpenClawhub">
+            <el-button size="small" class="!h-[28px] !text-[11px] !font-medium !px-3 !gap-1.5 !rounded-full !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5" @click="handleOpenClawhub">
               <RiGlobalLine class="h-3 w-3" />
               ClawHub
             </el-button>
-            <el-button size="small" class="!h-[28px] !text-[11px] !font-medium !px-3 !gap-1.5 !rounded-full !border-black/10 !bg-transparent hover:!bg-black/5" @click="handleOpenEditor">
+            <el-button size="small" class="!h-[28px] !text-[11px] !font-medium !px-3 !gap-1.5 !rounded-full !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5" @click="handleOpenEditor">
               <RiFileCodeLine class="h-3 w-3" />
               {{ t('skills.detail.openManual') }}
             </el-button>
@@ -110,7 +110,7 @@
 
           <el-button
             v-if="!skill.isCore"
-            class="flex-1 !h-[42px] !text-[13px] !rounded-full !font-semibold !border-black/20 hover:!bg-black/5"
+            class="flex-1 !h-[42px] !text-[13px] !rounded-full !font-semibold !border-black/20 dark:!border-gray-700 hover:!bg-black/5 dark:hover:!bg-white/5"
             @click="handleSecondaryAction"
           >
             {{ secondaryLabel }}
diff --git a/src/pages/skills/components/SkillListItem.vue b/src/pages/skills/components/SkillListItem.vue
index 72897fc..ba4d9fb 100644
--- a/src/pages/skills/components/SkillListItem.vue
+++ b/src/pages/skills/components/SkillListItem.vue
@@ -1,26 +1,26 @@
 <template>
   <div
-    class="group flex flex-row items-center justify-between py-3.5 px-3 rounded-xl hover:bg-black/5 transition-colors cursor-pointer border-b border-black/5 last:border-0"
+    class="group flex flex-row items-center justify-between py-3.5 px-3 rounded-xl hover:bg-black/5 dark:hover:bg-[#2a2a2d] transition-colors cursor-pointer border-b border-black/5 dark:border-gray-700/50 last:border-0"
     @click="$emit('click')"
   >
     <div class="flex items-start gap-4 flex-1 overflow-hidden pr-4">
-      <div class="h-10 w-10 shrink-0 flex items-center justify-center text-2xl bg-black/5 border border-black/5 rounded-xl overflow-hidden">
+      <div class="h-10 w-10 shrink-0 flex items-center justify-center text-2xl bg-black/5 dark:bg-[#222225] border border-black/5 dark:border-gray-700 rounded-xl overflow-hidden">
         {{ skill.icon || '🧩' }}
       </div>
       <div class="flex flex-col overflow-hidden min-w-0">
         <div class="flex items-center gap-2 mb-1">
-          <h3 class="text-[15px] font-semibold text-[#171717] truncate">{{ skill.name }}</h3>
-          <RiLockLine v-if="skill.isCore" class="h-3 w-3 text-[#525866] shrink-0" />
+          <h3 class="text-[15px] font-semibold text-[#171717] dark:text-[#f3f4f6] truncate">{{ skill.name }}</h3>
+          <RiLockLine v-if="skill.isCore" class="h-3 w-3 text-[#525866] dark:text-gray-400 shrink-0" />
           <RiPuzzleLine v-else-if="skill.isBundled" class="h-3 w-3 text-blue-500/70 shrink-0" />
-          <span v-if="skill.slug && skill.slug !== skill.name" class="text-[11px] font-mono px-1.5 py-0.5 rounded border border-black/10 text-[#525866] shrink-0">
+          <span v-if="skill.slug && skill.slug !== skill.name" class="text-[11px] font-mono px-1.5 py-0.5 rounded border border-black/10 dark:border-gray-700 text-[#525866] dark:text-gray-400 shrink-0">
             {{ skill.slug }}
           </span>
         </div>
-        <p class="text-[13.5px] text-[#525866] line-clamp-1 pr-6 leading-relaxed">
+        <p class="text-[13.5px] text-[#525866] dark:text-gray-400 line-clamp-1 pr-6 leading-relaxed">
           {{ skill.description }}
         </p>
-        <div class="mt-1 flex items-center gap-2 text-[11px] text-[#525866]/80">
-          <el-tag size="small" effect="plain" class="!rounded-full !bg-black/5 !border-0 !text-[#525866] !h-5 !px-1.5 !text-[10px]">
+        <div class="mt-1 flex items-center gap-2 text-[11px] text-[#525866]/80 dark:text-gray-500">
+          <el-tag size="small" effect="plain" class="!rounded-full !bg-black/5 dark:!bg-white/5 !border-0 !text-[#525866] dark:!text-gray-400 !h-5 !px-1.5 !text-[10px]">
             {{ resolvedSource }}
           </el-tag>
           <span class="truncate font-mono">
@@ -30,7 +30,7 @@
       </div>
     </div>
     <div class="flex items-center gap-6 shrink-0" @click.stop>
-      <span v-if="skill.version" class="text-[13px] font-mono text-[#525866]">
+      <span v-if="skill.version" class="text-[13px] font-mono text-[#525866] dark:text-gray-400">
         v{{ skill.version }}
       </span>
       <el-switch
diff --git a/src/pages/skills/index.vue b/src/pages/skills/index.vue
index efb5e92..994b6f4 100644
--- a/src/pages/skills/index.vue
+++ b/src/pages/skills/index.vue
@@ -1,14 +1,14 @@
 <template>
   <layout>
-    <div class="bg-white box-border w-full h-full flex rounded-[16px] overflow-hidden">
+    <div class="bg-white dark:bg-[#1b1b1d] box-border w-full h-full flex rounded-[16px] overflow-hidden">
       <div class="w-full  flex flex-col h-full p-10 pt-12">
         <!-- Header -->
         <div class="flex flex-col md:flex-row md:items-start justify-between mb-6 shrink-0 gap-4">
           <div>
-            <h1 class="text-5xl md:text-6xl font-serif text-[#171717] mb-3 font-normal tracking-tight" style="font-family: Georgia, Cambria, 'Times New Roman', Times, serif">
+            <h1 class="text-5xl md:text-6xl font-serif text-[#171717] dark:text-[#f3f4f6] mb-3 font-normal tracking-tight" style="font-family: Georgia, Cambria, 'Times New Roman', Times, serif">
               {{ t('skills.title') }}
             </h1>
-            <p class="text-[17px] text-[#171717]/70 font-medium">
+            <p class="text-[17px] text-[#171717]/70 dark:text-gray-400 font-medium">
               {{ t('skills.subtitle') }}
             </p>
           </div>
@@ -17,7 +17,7 @@
             <button
               v-if="hasInstalledSkills"
               @click="handleOpenSkillsFolder"
-              class="hover:bg-black/5 transition-colors shrink-0 text-[13px] font-medium px-4 h-8 rounded-full border border-black/10 flex items-center justify-center text-[#171717]/80 hover:text-[#171717]"
+              class="hover:bg-black/5 dark:hover:bg-white/5 transition-colors shrink-0 text-[13px] font-medium px-4 h-8 rounded-full border border-black/10 dark:border-gray-700 flex items-center justify-center text-[#171717]/80 dark:text-gray-300 hover:text-[#171717] dark:hover:text-[#f3f4f6]"
             >
               <RiFolderOpenLine class="h-4 w-4 mr-2" />
               {{ t('skills.openFolder') }}
@@ -26,20 +26,20 @@
         </div>
 
         <!-- Sub Navigation and Actions -->
-        <div class="flex flex-col md:flex-row md:items-center justify-between border-b border-black/10 pb-4 mb-4 shrink-0 gap-4">
+        <div class="flex flex-col md:flex-row md:items-center justify-between border-b border-black/10 dark:border-gray-700 pb-4 mb-4 shrink-0 gap-4">
           <div class="flex items-center flex-wrap gap-4 text-[14px]">
-            <div class="relative group flex items-center bg-black/5 rounded-full px-3 py-1.5 focus-within:bg-black/10 transition-colors border border-transparent focus-within:border-black/10 mr-2">
-              <RiSearchLine class="h-4 w-4 shrink-0 text-[#525866]" />
+            <div class="relative group flex items-center bg-black/5 dark:bg-[#222225] rounded-full px-3 py-1.5 focus-within:bg-black/10 dark:focus-within:bg-[#2a2a2d] transition-colors border border-transparent focus-within:border-black/10 dark:focus-within:border-gray-700 mr-2">
+              <RiSearchLine class="h-4 w-4 shrink-0 text-[#525866] dark:text-gray-500" />
               <input
                 :placeholder="t('skills.search')"
                 v-model="searchQuery"
-                class="ml-2 bg-transparent outline-none w-28 md:w-40 font-normal placeholder:text-[#171717]/50 text-[13px] text-[#171717]"
+                class="ml-2 bg-transparent outline-none w-28 md:w-40 font-normal placeholder:text-[#171717]/50 dark:placeholder:text-gray-500 text-[13px] text-[#171717] dark:text-[#f3f4f6]"
               />
               <button
                 v-if="searchQuery"
                 type="button"
                 @click="searchQuery = ''"
-                class="text-[#171717]/50 hover:text-[#171717] shrink-0 ml-1"
+                class="text-[#171717]/50 dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] shrink-0 ml-1"
               >
                 <RiCloseLine class="h-3.5 w-3.5" />
               </button>
@@ -48,19 +48,19 @@
             <div class="flex items-center gap-6">
               <button
                 @click="selectedSource = 'all'"
-                :class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'all' ? 'text-[#171717]' : 'text-[#525866] hover:text-[#171717]']"
+                :class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'all' ? 'text-[#171717] dark:text-[#f3f4f6]' : 'text-[#525866] dark:text-gray-400 hover:text-[#171717] dark:hover:text-[#f3f4f6]']"
               >
                 {{ t('skills.filter.all', { count: sourceStats.all }) }}
               </button>
               <button
                 @click="selectedSource = 'built-in'"
-                :class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'built-in' ? 'text-[#171717]' : 'text-[#525866] hover:text-[#171717]']"
+                :class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'built-in' ? 'text-[#171717] dark:text-[#f3f4f6]' : 'text-[#525866] dark:text-gray-400 hover:text-[#171717] dark:hover:text-[#f3f4f6]']"
               >
                 {{ t('skills.filter.builtIn', { count: sourceStats.builtIn }) }}
               </button>
               <button
                 @click="selectedSource = 'marketplace'"
-                :class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'marketplace' ? 'text-[#171717]' : 'text-[#525866] hover:text-[#171717]']"
+                :class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'marketplace' ? 'text-[#171717] dark:text-[#f3f4f6]' : 'text-[#525866] dark:text-gray-400 hover:text-[#171717] dark:hover:text-[#f3f4f6]']"
               >
                 {{ t('skills.filter.marketplace', { count: sourceStats.marketplace }) }}
               </button>
@@ -71,28 +71,28 @@
             <el-button
               size="small"
               @click="bulkToggleVisible(true)"
-              class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 !bg-transparent hover:!bg-black/5"
+              class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5"
             >
               {{ t('skills.actions.enableVisible') }}
             </el-button>
             <el-button
               size="small"
               @click="bulkToggleVisible(false)"
-              class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 !bg-transparent hover:!bg-black/5"
+              class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5"
             >
               {{ t('skills.actions.disableVisible') }}
             </el-button>
             <el-button
               size="small"
               @click="openMarketplace"
-              class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 !bg-transparent hover:!bg-black/5"
+              class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5"
             >
               {{ t('skills.actions.installSkill') }}
             </el-button>
             <el-button
               size="small"
               @click="store.fetchSkills()"
-              class="!h-8 !w-8 !ml-1 !rounded-md !border-black/10 !bg-transparent hover:!bg-black/5 !text-[#525866] hover:!text-[#171717]"
+              class="!h-8 !w-8 !ml-1 !rounded-md !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5 !text-[#525866] dark:!text-gray-400 hover:!text-[#171717] dark:hover:!text-[#f3f4f6]"
               :title="t('skills.refresh')"
             >
               <RiRefreshLine :class="['h-4 w-4', store.loading && 'animate-spin']" />
@@ -109,14 +109,14 @@
             </span>
           </div>
 
-          <div v-if="store.loading && store.skills.length === 0" class="flex flex-col items-center justify-center h-full text-[#525866]">
+          <div v-if="store.loading && store.skills.length === 0" class="flex flex-col items-center justify-center h-full text-[#525866] dark:text-gray-400">
             <RiRefreshLine class="h-10 w-10 animate-spin mb-4" />
             <p>{{ t('skills.marketplace.searching') }}</p>
           </div>
 
           <div v-else class="flex flex-col gap-1">
             <template v-if="filteredSkills.length === 0">
-              <div class="flex flex-col items-center justify-center py-20 text-[#525866]">
+              <div class="flex flex-col items-center justify-center py-20 text-[#525866] dark:text-gray-400">
                 <RiPuzzleLine class="h-10 w-10 mb-4 opacity-50" />
                 <p>{{ searchQuery ? t('skills.noSkillsSearch') : t('skills.noSkillsAvailable') }}</p>
               </div>
diff --git a/src/styles/index.css b/src/styles/index.css
index e48add4..51a7fe3 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -11,6 +11,10 @@
   background: linear-gradient(180deg, #EFF6FF 0%, #F5F7FA 40%);
 }
 
+.dark .bg {
+  background: transparent;
+}
+
 * {
   user-select: none;
 }
@@ -64,6 +68,10 @@ body {
   border: 1px solid #E5E8EE;
 }
 
+.dark .zn-table {
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
 .el-table {
   margin-top: 0 !important;
 }
@@ -72,6 +80,10 @@ body {
   background-color: #F5F7FA !important;
 }
 
+.dark .el-table th.el-table__cell {
+  background-color: rgba(255, 255, 255, 0.04) !important;
+}
+
 .el-dialog {
   padding: 0 !important;
   border-radius: 20px !important;
@@ -82,23 +94,39 @@ body {
   border-bottom: 1px solid #E5E8EE;
 }
 
+.dark .el-dialog__header {
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
 .el-dialog__title {
   font-weight: 600;
   font-size: 14px;
   color: #171717;
 }
 
+.dark .el-dialog__title {
+  color: var(--text-primary);
+}
+
 .el-dialog__close {
   font-size: 14px;
   font-weight: 600;
   color: #525866;
 }
 
+.dark .el-dialog__close {
+  color: var(--text-secondary);
+}
+
 .dialog-footer {
   padding: 16px 20px !important;
   border-top: 1px solid #E5E8EE;
 }
 
+.dark .dialog-footer {
+  border-top-color: rgba(255, 255, 255, 0.08);
+}
+
 .dialog-footer .el-button {
   border-radius: 8px !important;
   padding: 8px 10px !important;
@@ -123,6 +151,10 @@ body {
   color: #171717 !important;
 }
 
+.dark .el-form-item__label {
+  color: var(--text-primary) !important;
+}
+
 .el-input__wrapper {
   border-radius: 8px !important;
   /* border: 1px solid #E5E8EE; */
diff --git a/src/styles/theme/dark.css b/src/styles/theme/dark.css
index 5e7ba9f..b235300 100644
--- a/src/styles/theme/dark.css
+++ b/src/styles/theme/dark.css
@@ -1,14 +1,14 @@
 /* 深色主题变量定义在 .dark 类下 */
 .dark {
   --primary-color: #07C160;
-  --bg-color: #1E1E1E;
-  --bg-secondary: #2C2C2C;
-  --text-primary: #E0E0E0;
-  --text-secondary: #A0A0A0;
+  --bg-color: #1b1b1d;
+  --bg-secondary: #1f1f22;
+  --text-primary: #f3f4f6;
+  --text-secondary: #9ca3af;
 
   --bubble-self: var(--primary-color);
-  --bubble-others: #3A3A3A;
-  --input-bg: #333333;
+  --bubble-others: #2a2a2d;
+  --input-bg: #222225;
   --ripple-color: var(--text-secondary);
   --ripple-opacity: 0.2;
 }