diff --git a/packages/gui/src/main.js b/packages/gui/src/main.js
index 0f067b140e..f90d56c889 100644
--- a/packages/gui/src/main.js
+++ b/packages/gui/src/main.js
@@ -7,8 +7,8 @@ import App from './view/App.vue'
 import DsContainer from './view/components/container'
 import routes from './view/router'
 import 'ant-design-vue/dist/reset.css'
+import './view/style/theme/variables.scss'
 import './view/style/index.scss'
-import './view/style/theme/dark.scss' // 暗色主题
 
 try {
   window.onerror = (message, source, lineno, colno, error) => {
diff --git a/packages/gui/src/view/App.vue b/packages/gui/src/view/App.vue
index de21789538..0d570d85df 100644
--- a/packages/gui/src/view/App.vue
+++ b/packages/gui/src/view/App.vue
@@ -5,7 +5,7 @@ import * as Icons from '@ant-design/icons-vue';
 import { ipcRenderer } from 'electron'
 import createMenus from '@/view/router/menu'
 import zhCN from 'ant-design-vue/es/locale/zh_CN'
-import { colorTheme } from './composables/theme'
+import { appliedTheme, initTheme, getAntThemeConfig } from './composables/theme'
 
 export default {
   name: 'App',
@@ -32,11 +32,11 @@ export default {
   },
 
   computed: {
-    themeClass() {
-      return `theme-${this.theme}`
-    },
     theme() {
-      return colorTheme.value
+      return appliedTheme.value
+    },
+    themeConfig() {
+      return getAntThemeConfig(this.theme === 'dark')
     },
     // 将菜单数据转换为 items 格式
     menuItems() {
@@ -125,13 +125,10 @@ export default {
       await this.configReadyPromise
     }
 
+    // 初始化主题系统
     const appConfig = (this.config && this.config.app) || (this.$global && this.$global.config && this.$global.config.app) || {}
-    let theme = appConfig.theme || 'dark'
-    if (appConfig.theme === 'system') {
-      theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-    }
-
-    colorTheme.value = theme
+    const initialThemeMode = appConfig.theme || 'dark'
+    this.cleanupTheme = initTheme(initialThemeMode)
 
     // 设置默认选中的菜单项
     this.updateSelectedKeys(this.$route.fullPath)
@@ -139,6 +136,10 @@ export default {
 
   beforeUnmount() {
     ipcRenderer.removeListener('config.changed', this.onConfigChanged)
+    // 清理主题监听器
+    if (this.cleanupTheme) {
+      this.cleanupTheme()
+    }
   },
 
   methods: {
@@ -258,10 +259,10 @@ export default {
 </script>
 
 <template>
-  <a-config-provider :locale="locale">
-    <div class="ds_layout" :class="themeClass">
+  <a-config-provider :locale="locale" :theme="themeConfig">
+    <div class="ds_layout">
       <a-layout>
-        <a-layout-sider :theme="theme" style="overflow-y: auto">
+        <a-layout-sider :style="{ background: theme === 'dark' ? '#1e1f22' : '#ffffff', overflowY: 'auto' }">
           <div class="logo" />
           <div class="aside">
             <a-menu
@@ -318,106 +319,3 @@ export default {
   </a-config-provider>
 </template>
 
-<style lang="scss">
-body {
-  height: 100%;
-}
-.ds_layout {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-  height: 100%;
-  .ant-layout-has-sider {
-    border: 1px solid #eee;
-  }
-  .ant-layout-sider {
-    flex: 0 0 200px;
-    max-width: 200px;
-    min-width: 200px;
-    width: 200px;
-  }
-  .ant-layout-sider-children {
-    border-right: 1px solid #eee;
-  }
-  > .ant-layout {
-    height: 100%;
-  }
-  > .ant-layout > .ant-layout {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-  .ant-layout-content {
-    flex: 1 1 auto;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-  .content-inner {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: auto;
-  }
-  .logo {
-    padding: 5px;
-    border-bottom: #eee solid 1px;
-    height: 60px;
-    background-image: url('../../public/logo/logo-lang.svg');
-    background-size: auto 50px;
-    background-repeat: no-repeat;
-    background-position: 5px center;
-  }
-  .ant-layout-footer {
-    padding: 10px;
-    text-align: center;
-    border-top: #d6d4d4 solid 1px;
-    flex: 0 0 auto;
-    background: #fff;
-    position: relative;
-    z-index: 1;
-  }
-  .ant-menu-inline,
-  .ant-menu-vertical,
-  .ant-menu-vertical-left {
-    border: 0;
-  }
-
-  .pre-release-banner {
-    margin: 0 12px 12px;
-    padding: 10px 12px;
-    border: 1px solid #ffa940;
-    background: #fff7e6;
-    color: #ad4e00;
-    font-weight: 600;
-    border-radius: 6px;
-    text-align: center;
-  }
-
-  .pre-release-tag {
-    display: inline-block;
-    margin-left: 8px;
-    padding: 1px 8px;
-    border-radius: 999px;
-    border: 1px solid #ffa940;
-    background: #fff7e6;
-    color: #ad4e00;
-    font-size: 12px;
-    line-height: 20px;
-  }
-
-  .search-bar {
-    padding: 12px;
-    border-bottom: 1px solid #eee;
-    background: #fff;
-  }
-}
-.search-bar-highlight {
-  background-color: #ef0fff;
-  color: #fdfdfd;
-
-  &.selected-highlight {
-    background-color: #17a450;
-  }
-}
-</style>
diff --git a/packages/gui/src/view/composables/theme.js b/packages/gui/src/view/composables/theme.js
index c5962619cd..26769c2156 100644
--- a/packages/gui/src/view/composables/theme.js
+++ b/packages/gui/src/view/composables/theme.js
@@ -1,3 +1,139 @@
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import { theme } from 'ant-design-vue'
 
-export const colorTheme = ref('dark')
+// 主题类型：light-亮色, dark-暗色, system-跟随系统
+export const themeMode = ref('dark')
+
+// 实际应用的主题（system模式下会根据系统主题计算）
+export const appliedTheme = ref('dark')
+
+// 系统主题媒体查询
+const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+/**
+ * 获取系统主题
+ * @returns {'dark' | 'light'}
+ */
+function getSystemTheme() {
+  return mediaQuery.matches ? 'dark' : 'light'
+}
+
+/**
+ * 应用主题到 DOM
+ * @param {'dark' | 'light'} theme
+ */
+function applyThemeToDOM(theme) {
+  appliedTheme.value = theme
+  document.documentElement.setAttribute('data-theme', theme)
+}
+
+/**
+ * 更新主题
+ * 根据 themeMode 的值计算并应用实际主题
+ */
+export function updateTheme() {
+  const actualTheme = themeMode.value === 'system'
+    ? getSystemTheme()
+    : themeMode.value
+
+  applyThemeToDOM(actualTheme)
+}
+
+/**
+ * 设置主题模式
+ * @param {'light' | 'dark' | 'system'} mode
+ */
+export function setThemeMode(mode) {
+  themeMode.value = mode
+  updateTheme()
+}
+
+/**
+ * 初始化主题系统
+ * 应在应用挂载时调用
+ * @param {'light' | 'dark' | 'system'} initialMode - 初始主题模式
+ */
+export function initTheme(initialMode = 'dark') {
+  themeMode.value = initialMode
+  updateTheme()
+
+  // 监听系统主题变化
+  const handleSystemThemeChange = () => {
+    if (themeMode.value === 'system') {
+      updateTheme()
+    }
+  }
+
+  // 添加监听器
+  if (mediaQuery.addEventListener) {
+    mediaQuery.addEventListener('change', handleSystemThemeChange)
+  } else {
+    // 兼容旧版浏览器
+    mediaQuery.addListener(handleSystemThemeChange)
+  }
+
+  // 返回清理函数
+  return () => {
+    if (mediaQuery.removeEventListener) {
+      mediaQuery.removeEventListener('change', handleSystemThemeChange)
+    } else {
+      mediaQuery.removeListener(handleSystemThemeChange)
+    }
+  }
+}
+
+/**
+ * 获取 Ant Design 主题配置
+ * @param {boolean} isDarkTheme - 是否为暗色主题
+ * @returns {Object} Ant Design 主题配置对象
+ */
+export function getAntThemeConfig(isDarkTheme) {
+  return {
+    algorithm: isDarkTheme
+      ? theme.darkAlgorithm
+      : theme.defaultAlgorithm,
+    token: isDarkTheme
+      ? {
+          colorBgBase: '#1e1f22',
+          colorTextBase: '#dddddd',
+          colorBgContainer: '#1e1f22',
+        }
+      : {
+          colorBgBase: '#ffffff',
+          colorTextBase: '#333333',
+          colorBgContainer: '#ffffff',
+        },
+  }
+}
+
+/**
+ * 在组件中使用主题的组合式函数
+ * 提供响应式的主题状态和切换方法
+ */
+export function useTheme() {
+  // 计算属性：是否为暗色主题
+  const isDark = computed(() => appliedTheme.value === 'dark')
+
+  // 计算属性：是否为亮色主题
+  const isLight = computed(() => appliedTheme.value === 'light')
+
+  // 计算属性：当前是否为跟随系统模式
+  const isSystem = computed(() => themeMode.value === 'system')
+
+  // Ant Design 主题配置
+  const antThemeConfig = computed(() => getAntThemeConfig(isDark.value))
+
+  return {
+    themeMode,
+    appliedTheme,
+    isDark,
+    isLight,
+    isSystem,
+    setThemeMode,
+    updateTheme,
+    antThemeConfig,
+  }
+}
+
+// 为了兼容旧代码，保留 colorTheme 导出
+export const colorTheme = appliedTheme
diff --git a/packages/gui/src/view/pages/index.vue b/packages/gui/src/view/pages/index.vue
index 9c93a37b43..1a825211ed 100644
--- a/packages/gui/src/view/pages/index.vue
+++ b/packages/gui/src/view/pages/index.vue
@@ -422,23 +422,23 @@ export default {
         height: 100px;
         border-radius: 100px;
         transition: all 0.3s ease;
-        border: 2px solid #d9d9d9;
-        background-color: #fff;
+        border: 2px solid var(--btn-border);
+        background-color: var(--btn-bg);
 
         &:hover {
-          border-color: #40a9ff;
-          box-shadow: 0 0 8px rgba(24, 144, 255, 0.2);
+          border-color: var(--accent-hover);
+          box-shadow: 0 0 8px var(--accent-shadow);
         }
 
         /* 激活状态 */
         &.is-active {
-          background-color: #1890ff;
-          border-color: #1890ff;
-          box-shadow: 0 0 12px rgba(24, 144, 255, 0.4);
+          background-color: var(--accent-color);
+          border-color: var(--accent-color);
+          box-shadow: 0 0 12px var(--accent-shadow);
 
           &:hover {
-            background-color: #40a9ff;
-            border-color: #40a9ff;
+            background-color: var(--accent-hover);
+            border-color: var(--accent-hover);
           }
         }
       }
@@ -452,11 +452,11 @@ export default {
       margin-top: 10px;
       font-size: 14px;
       font-weight: 500;
-      color: #666;
+      color: var(--text-secondary);
       transition: color 0.3s ease;
 
       &.is-active {
-        color: #1890ff;
+        color: var(--accent-color);
         font-weight: 600;
       }
     }
diff --git a/packages/gui/src/view/pages/plugin/free-eye.vue b/packages/gui/src/view/pages/plugin/free-eye.vue
index 5b68fe71df..bf36bbca42 100644
--- a/packages/gui/src/view/pages/plugin/free-eye.vue
+++ b/packages/gui/src/view/pages/plugin/free-eye.vue
@@ -1,10 +1,11 @@
 <script>
 import lodash from 'lodash'
 import Plugin from '../../mixins/plugin'
-
+import { ExperimentOutlined } from '@ant-design/icons-vue'
 export default {
   name: 'FreeEye',
   mixins: [Plugin],
+  components: { ExperimentOutlined },
   data () {
     return {
       key: 'plugin.free_eye',
@@ -132,7 +133,8 @@ export default {
       />
 
       <div class="action-bar">
-        <a-button type="primary" icon="experiment" :loading="running" @click="runTests">
+        <a-button type="primary" :loading="running" @click="runTests">
+          <ExperimentOutlined/>
           运行检测
         </a-button>
         <span v-if="lastResult" class="last-run">最近完成：{{ formatTime(lastResult.finishedAt) }}</span>
@@ -212,7 +214,7 @@ export default {
   margin-bottom: 16px;
 }
 .last-run {
-  color: rgba(255, 255, 255, 0.65);
+  color: var(--text-secondary);
 }
 .summary-output {
   margin: 0;
@@ -220,7 +222,7 @@ export default {
 }
 .raw-json {
   margin: 0;
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--bg-highlight);
   padding: 12px;
   border-radius: 4px;
   overflow-x: auto;
diff --git a/packages/gui/src/view/pages/proxy.vue b/packages/gui/src/view/pages/proxy.vue
index a3c13b7366..b56fa8e895 100644
--- a/packages/gui/src/view/pages/proxy.vue
+++ b/packages/gui/src/view/pages/proxy.vue
@@ -219,7 +219,7 @@ export default defineComponent({
       <div>
         <div>1、此设置用于解决OneNote、MicrosoftStore、Outlook等UWP应用无法访问网络的问题。</div>
         <div>2、点击右上方按钮，打开EnableLoopback，然后按下图所示操作即可</div>
-        <img style="margin-top:20px;border:1px solid #eee" width="80%" src="loopback.png">
+        <img style="margin-top:20px;border:1px solid var(--border-color)" width="80%" src="loopback.png">
       </div>
     </a-drawer>
   </ds-container>
diff --git a/packages/gui/src/view/pages/setting.vue b/packages/gui/src/view/pages/setting.vue
index 240df00cb7..3a7bc179cb 100644
--- a/packages/gui/src/view/pages/setting.vue
+++ b/packages/gui/src/view/pages/setting.vue
@@ -2,7 +2,7 @@
 import { ipcRenderer } from 'electron'
 import { ProfileOutlined, SyncOutlined, CheckOutlined } from '@ant-design/icons-vue'
 import Plugin from '../mixins/plugin'
-import { colorTheme } from '../composables/theme'
+import { setThemeMode } from '../composables/theme'
 
 export default {
   name: 'Setting',
@@ -194,11 +194,8 @@ export default {
     async applyAfter () {
       let reloadLazy = 10
 
-      let theme = this.config.app.theme
-      if (theme === 'system') {
-        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-      }
-      colorTheme.value = theme
+      // 应用主题设置
+      setThemeMode(this.config.app.theme)
 
       // 判断远程配置地址是否变更过，如果是则重载远程配置并重启服务
       if (this.config.app.remoteConfig.url !== this.urlBackup || this.config.app.remoteConfig.personalUrl !== this.personalUrlBackup) {
diff --git a/packages/gui/src/view/style/index.scss b/packages/gui/src/view/style/index.scss
index 7855749b60..e79f384bc3 100644
--- a/packages/gui/src/view/style/index.scss
+++ b/packages/gui/src/view/style/index.scss
@@ -1,7 +1,13 @@
+/**
+ * 基础样式文件
+ * 主题相关样式已迁移到 theme/variables.scss，使用 CSS 变量管理
+ */
+
+/* ==================== 布局工具类 ==================== */
 .footer-bar {
   padding: 10px;
   text-align: right;
-  border-top: #eee 1px solid;
+  border-top: 1px solid var(--border-color);
 }
 
 .flex-l-r {
@@ -17,12 +23,27 @@
   }
 }
 
+/* ==================== 组件样式覆盖 ==================== */
 span.ant-input {
   white-space: nowrap;
   overflow: hidden;
   vertical-align: middle;
 }
 
+.ant-radio-button-wrapper {
+  margin-bottom: 3px;
+}
+
+.ant-form-item-control {
+  line-height: 37px;
+}
+
+.ace_search_form .ace_searchbtn {
+  width: auto;
+  min-width: 27px;
+}
+
+/* ==================== 间距工具类 ==================== */
 .w100 {
   width: 100%;
 }
@@ -54,16 +75,18 @@ span.ant-input {
   margin-left: 10px;
 }
 
+/* ==================== 列表样式 ==================== */
 ol {
   margin-block-start: 0em;
   margin-block-end: 0em;
   padding-inline-start: 20px;
 }
 
+/* ==================== 表单帮助文字 ==================== */
 .form-help {
   font-size: 12px;
   line-height: 15px;
-  color: #a1a1a1;
+  color: var(--form-help-text);
 
   i {
     font-family: 'Microsoft YaHei', serif;
@@ -76,54 +99,46 @@ ol {
   }
 }
 
+/* ==================== 代码块 ==================== */
 code {
   font-size: 85%;
   font-style: normal;
   border-radius: 6px;
-  color: #888;
-  background-color: #f1f1f1;
+  color: var(--code-text);
+  background-color: var(--code-bg);
   margin-left: 0.2em;
   margin-right: 0.2em;
   padding: 0.2em 0.4em;
   white-space: break-spaces;
 }
 
-.ace_search_form .ace_searchbtn {
-  width: auto;
-  min-width: 27px;
-}
-
-.ant-radio-button-wrapper {
-  margin-bottom: 3px;
-}
-
-.ant-form-item-control {
-  line-height: 37px;
-}
-
+/* ==================== 分隔线 ==================== */
 hr {
   border-width: 2px 0 0 0;
   border-style: solid;
-  border-color: #eee;
+  border-color: var(--border-color);
   width: 100%;
 }
 
+/* ==================== 弹窗 ==================== */
 .ant-modal-content {
-  background-color: #fbfbfb;
+  background-color: var(--bg-secondary);
 }
 
+/* ==================== 恢复出厂设置弹窗 ==================== */
 .restore-factory-settings {
   div {
     padding-left: 1em;
   }
   span {
     display: inline-block;
-    background-color: #eee;
+    background-color: var(--bg-highlight);
     padding: 2px 5px;
     margin: 0 5px 5px 5px;
   }
 }
 
+/* ==================== 帮助列表 ==================== */
 .help-list {
   ul {
     padding-left: 10px;
@@ -140,11 +155,11 @@ hr {
       }
 
       a {
-        color: #3990e0;
+        color: var(--accent-color);
       }
       a:hover {
         text-decoration: underline;
-        color: #2c9be5;
+        color: var(--accent-hover);
       }
     }
 
@@ -161,7 +176,7 @@ hr {
   .title1 {
     font-size: 18px;
     font-weight: bold;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color);
     margin-top: 12px;
     margin-bottom: 5px;
     padding-bottom: 5px;
diff --git a/packages/gui/src/view/style/theme/dark.scss b/packages/gui/src/view/style/theme/dark.scss
index a31b81e923..d367420371 100644
--- a/packages/gui/src/view/style/theme/dark.scss
+++ b/packages/gui/src/view/style/theme/dark.scss
@@ -1,244 +1,70 @@
-/* 暗色主题 */
-$dark-logo: url('../../../../public/logo/logo-lang-light.svg');
-$dark-bg: #1e1f22; //背景
-$dark-bg-highlight: #333; //高亮块：背景
-$dark-text: #ddd; //字体颜色
-$dark-bd: #333; //边框和分隔线
-$dark-btn: #444; //按钮：边框和背景颜色
-$dark-input: #777; //输入框：背景色
-.theme-dark {
-  hr {
-    border-color: $dark-bd;
-  }
-
-  /* 背景色和字体颜色 */
-  .ds_layout,
-  .ant-layout,
-  .ds-container,
-  .ds-container .container-header,
-  .ant-layout-footer {
-    background-color: $dark-bg;
-    color: $dark-text;
-  }
-  div,
-  span,
-  label {
-    color: $dark-text;
-  }
-  .form-help {
-    color: #a1a1a1;
-  }
-  code {
-    color: #bbb;
-    background-color: #333;
-  }
-
-  /* 高亮块：背景色和字体颜色 */
-  /* 警告类型 */
-  .ant-alert-warning {
-    background-color: $dark-bg-highlight;
-    border-color: $dark-bg-highlight;
-    color: $dark-text;
-    /* 关闭图标颜色 */
-    .ant-alert-close-icon .anticon-close {
-      color: $dark-text;
-    }
-  }
-  /* 消息类型 */
-  .ant-alert-info {
-    background-color: $dark-bg-highlight;
-    border-color: $dark-bg-highlight;
-    color: $dark-text;
-  }
-
-  /* 边框和分隔线 */
-  .ant-layout-has-sider,
-  .ant-layout-sider-children,
-  .ds-container .container-header,
-  .logo,
-  .footer-bar,
-  .ant-layout-footer,
-  .ant-tabs .ant-tabs-left-bar,
-  .ant-tabs .ant-tabs-left-content {
-    border-color: $dark-bd;
-  }
-  .ant-radio-button-wrapper:not(:first-child)::before {
-    background-color: #666;
-  }
-  .ant-divider {
-    background-color: $dark-bd;
-  }
-
-  .help-list .title1 {
-    border-bottom-color: $dark-bd;
-  }
-
-  /* 左侧 */
-  /** 背景色 **/
-  .ant-layout-sider {
-    background-color: $dark-bg;
-  }
-  /** Logo **/
-  .logo {
-    background-image: $dark-logo; /* logo使用亮色的 */
-  }
-  /** 菜单 **/
-  .ant-menu {
-    background-color: $dark-bg;
-    color: $dark-text;
-  }
-  /* 菜单选中时，或鼠标移到菜单上时的样式 */
-  .ant-menu-item:hover,
-  .ant-menu-submenu .ant-menu-submenu-title:hover,
-  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
-    background-color: $dark-bg-highlight;
-    color: #1890ff;
-    span {
-      color: #1890ff;
-    }
-  }
-
-  /* 输入框、下拉框 */
-  .ant-input,
-  .ant-input-number-input,
-  .ant-input-number,
-  .ant-select-selection,
-  .ant-input-group-addon {
-    background-color: $dark-input;
-    border-color: #aaa;
-    color: $dark-text;
-    &:hover,
-    &:focus {
-      border-color: #eee;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 2px rgb(255 255 255 / 35%);
-    }
-  }
+/**
+ * 暗色主题 - 已迁移到 variables.scss
+ * 此文件保留 JSON 编辑器的特殊样式覆盖
+ * 其他样式已通过 CSS 变量在 variables.scss 中统一管理
+ */
 
-  /* 选中的下拉框 */
-  .ant-select-open,
-  .ant-select-focused {
-    .ant-select-selection {
-      box-shadow: 0 0 0 2px rgb(255 255 255 / 35%);
-    }
-  }
-
-  /* 卡片消息：IP测速 */
-  .ant-card {
-    background-color: $dark-input;
-    border-color: $dark-input;
-    .ant-card-head {
-      border-bottom-color: #929292;
-    }
-  }
-
-  /* 标签：未启用 */
-  .ant-tag-red {
-    background-color: #4f4749;
-    border-color: #4f4749;
-    color: #bf8285;
-  }
-  /* 标签：已启用 */
-  .ant-tag-green {
-    background-color: #505f5f;
-    border-color: #505f5f;
-    color: #90cb9f;
-  }
-  /* 标签：警告 */
-  .ant-tag-orange {
-    background-color: #5a5750;
-    border-color: #5a5750;
-    color: #cfa572;
-  }
-  /* 标签：未知 */
-  .ant-tag:not(.ant-tag-red, .ant-tag-green, .ant-tag-orange) {
-    background-color: #5a5a5a;
-    border-color: #5a5a5a;
-    color: #ccc;
-  }
-
-  /* 按钮 */
-  .ant-btn:not(.ant-btn-danger, .ant-btn-primary) {
-    background-color: $dark-btn;
-    border-color: $dark-btn;
-    color: $dark-text;
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
-  /* 单选框：开关式 */
-  .ant-switch:not(.ant-switch-checked) {
-    background-color: $dark-btn;
-    border-color: $dark-btn;
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-  /* 单选框：按钮式 */
-  .ant-radio-button-wrapper {
-    background-color: $dark-btn;
-    border-color: $dark-btn;
-    color: $dark-text;
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
-  /* JSON编辑器：应用于拦截设置 */
+/* JSON 编辑器暗色适配（仅在暗色主题下生效） */
+[data-theme='dark'] {
   .jsoneditor-vue {
-    /*整个编辑框：背景色和边框*/
+    /* 整个编辑框 */
     div.jsoneditor {
-      background-color: $dark-bg-highlight;
+      background-color: var(--bg-highlight);
       border: none;
     }
-    /* 头部菜单栏：边框  */
+
+    /* 头部菜单栏 */
     div.jsoneditor-menu {
-      background-color: $dark-bg-highlight;
-      border-color: $dark-bg-highlight;
+      background-color: var(--bg-highlight);
+      border-color: var(--bg-highlight);
     }
+
     /* 内容区域左边：行号 */
     .ace_gutter {
       background-color: #444;
+
       .ace_gutter-cell {
         color: #aaa;
       }
     }
+
     /* 内容区域右边：JSON内容 */
     .ace_scroller {
       background-color: #555;
     }
+
     /* key的颜色 */
     .ace_variable,
     .ace_text-layer {
       color: #eee;
     }
+
     /* 字符串值的颜色 */
     .ace_string,
     .ace_cjk {
       color: #a6eaa6;
     }
-    .ace_constant {
-      /* 数字的颜色 */
-      &.ace_numeric {
-        color: #ec9999;
-      }
-      /* 布尔值的颜色 */
-      &.ace_language {
-        color: #f4c995;
-      }
+
+    /* 数字的颜色 */
+    .ace_constant.ace_numeric {
+      color: #ec9999;
+    }
+
+    /* 布尔值的颜色 */
+    .ace_constant.ace_language {
+      color: #f4c995;
     }
+
     /* 当前行高亮样式 */
     .ace_gutter-active-line,
     .ace_marker-layer .ace_active-line {
       background-color: #838774;
     }
+
     /* 选中行高亮样式 */
     .ace-jsoneditor {
       .ace_marker-layer .ace_selection {
-        background-color: #8b2929; /* 同时应用于当前选中的搜索结果项的背景色，建议与搜索结果边框颜色保持一致 */
+        background-color: #8b2929;
       }
 
       /* 光标颜色 */
@@ -246,23 +72,16 @@ $dark-input: #777; //输入框：背景色
         border-left-color: #ddd;
       }
     }
-    /* 搜索框 */
-    .ace_button,
-    button,
-    .ace_search_field {
-      color: #000;
-    }
+
     /* 搜索结果 */
     .ace-jsoneditor .ace_marker-layer .ace_selected-word {
       border-color: #8b2929;
     }
-  }
 
-  .search-bar {
-    div {
-      color: #000;
-    }
-    span {
+    /* 搜索框按钮 */
+    .ace_button,
+    button,
+    .ace_search_field {
       color: #000;
     }
   }
diff --git a/packages/gui/src/view/style/theme/variables.scss b/packages/gui/src/view/style/theme/variables.scss
new file mode 100644
index 0000000000..c134a0454f
--- /dev/null
+++ b/packages/gui/src/view/style/theme/variables.scss
@@ -0,0 +1,591 @@
+/**
+ * 主题变量定义
+ * 使用 CSS 自定义属性（CSS Variables）实现主题切换
+ * 通过修改 data-theme 属性值来切换主题
+ */
+
+/* ==================== 基础变量（亮色主题 - 默认）==================== */
+:root {
+  /* Logo */
+  --logo: url('../../../../public/logo/logo-lang.svg');
+
+  /* 背景色 */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f5f5f5;
+  --bg-tertiary: #eeeeee;
+  --bg-highlight: #f1f1f1;
+
+  /* 文字颜色 */
+  --text-primary: #333333;
+  --text-secondary: #666666;
+  --text-tertiary: #888888;
+  --text-inverse: #ffffff;
+
+  /* 边框和分隔线 */
+  --border-color: #eeeeee;
+  --border-color-strong: #d6d4d4;
+
+  /* 按钮 */
+  --btn-bg: #ffffff;
+  --btn-border: #d9d9d9;
+  --btn-text: #333333;
+  --btn-hover-bg: #f5f5f5;
+  --btn-hover-border: #1890ff;
+
+  /* 激活/主色调 */
+  --accent-color: #1890ff;
+  --accent-hover: #40a9ff;
+  --accent-shadow: rgba(24, 144, 255, 0.4);
+
+  /* 代码块 */
+  --code-bg: #f1f1f1;
+  --code-text: #888888;
+
+  /* 表单帮助文字 */
+  --form-help-text: #a1a1a1;
+
+  /* 搜索高亮 */
+  --search-highlight-bg: #ef0fff;
+  --search-highlight-text: #fdfdfd;
+  --search-selected-bg: #17a450;
+
+  /* 预发布标签 */
+  --pre-release-bg: #fff7e6;
+  --pre-release-border: #ffa940;
+  --pre-release-text: #ad4e00;
+
+  /* Ant Design 覆盖 */
+  --ant-bg-base: #ffffff;
+  --ant-bg-container: #ffffff;
+  --ant-text-base: #333333;
+  --ant-sider-bg: #ffffff;
+}
+
+/* ==================== 暗色主题 ==================== */
+[data-theme='dark'] {
+  /* Logo - 暗色主题使用亮色logo */
+  --logo: url('../../../../public/logo/logo-lang-light.svg');
+
+  /* 背景色 */
+  --bg-primary: #1e1f22;
+  --bg-secondary: #25262b;
+  --bg-tertiary: #333333;
+  --bg-highlight: #333333;
+
+  /* 文字颜色 */
+  --text-primary: #dddddd;
+  --text-secondary: #aaaaaa;
+  --text-tertiary: #888888;
+  --text-inverse: #1e1f22;
+
+  /* 边框和分隔线 */
+  --border-color: #333333;
+  --border-color-strong: #444444;
+
+  /* 按钮 */
+  --btn-bg: #444444;
+  --btn-border: #444444;
+  --btn-text: #dddddd;
+  --btn-hover-bg: #555555;
+  --btn-hover-border: #666666;
+
+  /* 激活/主色调 */
+  --accent-color: #1890ff;
+  --accent-hover: #40a9ff;
+  --accent-shadow: rgba(24, 144, 255, 0.4);
+
+  /* 代码块 */
+  --code-bg: #333333;
+  --code-text: #bbbbbb;
+
+  /* 表单帮助文字 */
+  --form-help-text: #a1a1a1;
+
+  /* 搜索高亮 */
+  --search-highlight-bg: #ef0fff;
+  --search-highlight-text: #fdfdfd;
+  --search-selected-bg: #17a450;
+
+  /* 预发布标签 - 暗色适配 */
+  --pre-release-bg: #332200;
+  --pre-release-border: #996600;
+  --pre-release-text: #ffcc66;
+
+  /* Ant Design 覆盖 */
+  --ant-bg-base: #1e1f22;
+  --ant-bg-container: #1e1f22;
+  --ant-text-base: #dddddd;
+  --ant-sider-bg: #1e1f22;
+}
+
+/* ==================== 通用样式（使用 CSS 变量）==================== */
+
+/* 基础布局 */
+.ds_layout,
+.ant-layout,
+.ds-container,
+.ds-container .container-header,
+.ant-layout-footer {
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+/* 侧边栏 */
+.ant-layout .ant-layout-sider {
+  background: var(--ant-sider-bg) !important;
+}
+
+/* 文字颜色 */
+div,
+span {
+  color: var(--text-primary);
+}
+
+label,
+.ant-form-item-label > label {
+  color: var(--text-primary);
+}
+
+.form-help {
+  color: var(--form-help-text);
+}
+
+/* 代码块 */
+code {
+  color: var(--code-text);
+  background-color: var(--code-bg);
+}
+
+/* 边框 */
+hr {
+  border-color: var(--border-color);
+}
+
+.ant-layout-has-sider,
+.ant-layout-sider-children,
+.ds-container .container-header,
+.logo,
+.footer-bar,
+.ant-layout-footer,
+.ant-tabs .ant-tabs-left-bar,
+.ant-tabs .ant-tabs-left-content {
+  border-color: var(--border-color);
+}
+
+.ant-divider {
+  background-color: var(--border-color);
+}
+
+/* Logo */
+.logo {
+  background-image: var(--logo);
+}
+
+/* 大按钮 */
+.big-button {
+  > button,
+  > .ant-btn,
+  > .ant-btn-default {
+    background-color: var(--btn-bg) !important;
+    border-color: var(--btn-border) !important;
+    color: var(--btn-text) !important;
+
+    span {
+      color: var(--btn-text) !important;
+    }
+
+    &:hover {
+      border-color: var(--btn-hover-border) !important;
+      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1) !important;
+
+      span {
+        color: var(--btn-text) !important;
+      }
+    }
+
+    /* 激活状态 */
+    &.is-active {
+      background-color: var(--accent-color) !important;
+      border-color: var(--accent-color) !important;
+      box-shadow: 0 0 12px var(--accent-shadow) !important;
+
+      span {
+        color: var(--text-inverse) !important;
+      }
+
+      &:hover {
+        background-color: var(--accent-hover) !important;
+        border-color: var(--accent-hover) !important;
+      }
+    }
+  }
+
+  .switch-status-label {
+    color: var(--text-secondary);
+
+    &.is-active {
+      color: var(--accent-color);
+    }
+  }
+}
+
+/* 预发布标签 */
+.pre-release-banner {
+  background: var(--pre-release-bg);
+  border-color: var(--pre-release-border);
+  color: var(--pre-release-text);
+}
+
+.pre-release-tag {
+  background: var(--pre-release-bg);
+  border-color: var(--pre-release-border);
+  color: var(--pre-release-text);
+}
+
+/* 搜索栏 */
+.search-bar {
+  background: var(--bg-primary);
+  border-bottom-color: var(--border-color);
+}
+
+/* 搜索高亮 */
+.search-bar-highlight {
+  background-color: var(--search-highlight-bg);
+  color: var(--search-highlight-text);
+
+  &.selected-highlight {
+    background-color: var(--search-selected-bg);
+  }
+}
+
+/* 页脚栏 */
+.footer-bar {
+  border-top-color: var(--border-color);
+}
+
+/* 帮助列表 */
+.help-list {
+  .title1 {
+    border-bottom-color: var(--border-color);
+  }
+
+  a {
+    color: var(--accent-color);
+
+    &:hover {
+      color: var(--accent-hover);
+    }
+  }
+}
+
+/* 恢复出厂设置弹窗 */
+.restore-factory-settings {
+  span {
+    background-color: var(--bg-highlight);
+  }
+}
+
+/* Ant Design 组件适配 */
+.ant-radio-button-wrapper:not(:first-child)::before {
+  background-color: var(--border-color-strong);
+}
+
+/* Radio Button 样式 */
+.ant-radio-button-wrapper {
+  background-color: var(--btn-bg);
+  border-color: var(--btn-border);
+  color: var(--btn-text);
+
+  span {
+    color: var(--btn-text);
+  }
+
+  &:hover {
+    color: var(--accent-color);
+
+    span {
+      color: var(--accent-color);
+    }
+  }
+
+  /* 选中状态 - 文字始终为白色 */
+  &.ant-radio-button-wrapper-checked {
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+    color: #ffffff;
+
+    span {
+      color: #ffffff;
+    }
+
+    &:hover {
+      color: #ffffff;
+
+      span {
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+/* 全局按钮样式 - 确保所有按钮文字颜色正确 */
+.ant-btn {
+  color: var(--text-primary);
+
+  span {
+    color: var(--text-primary);
+  }
+
+  &:hover,
+  &:focus {
+    color: var(--accent-color);
+
+    span {
+      color: var(--accent-color);
+    }
+  }
+}
+
+/* 默认按钮 */
+.ant-btn-default {
+  background-color: var(--btn-bg);
+  border-color: var(--btn-border);
+  color: var(--btn-text);
+
+  span {
+    color: var(--btn-text);
+  }
+
+  &:hover,
+  &:focus {
+    background-color: var(--btn-hover-bg);
+    border-color: var(--btn-hover-border);
+    color: var(--accent-color);
+
+    span {
+      color: var(--accent-color);
+    }
+  }
+}
+
+/* 主要按钮 */
+.ant-btn-primary {
+  span {
+    color: #ffffff;
+  }
+
+  &:hover span,
+  &:focus span {
+    color: #ffffff;
+  }
+}
+
+/* 危险按钮 */
+.ant-btn-dangerous {
+  span {
+    color: #ff4d4f;
+  }
+
+  &:hover span,
+  &:focus span {
+    color: #ff7875;
+  }
+}
+
+/* 链接按钮 */
+.ant-btn-link {
+  span {
+    color: var(--accent-color);
+  }
+
+  &:hover span,
+  &:focus span {
+    color: var(--accent-hover);
+  }
+}
+
+/* 文本按钮 */
+.ant-btn-text {
+  span {
+    color: var(--text-primary);
+  }
+
+  &:hover span,
+  &:focus span {
+    color: var(--text-primary);
+  }
+}
+
+/* ==================== 布局样式 ==================== */
+
+/* 基础布局 */
+.ds_layout {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--text-primary);
+  height: 100%;
+
+  .ant-layout-has-sider {
+    border: 1px solid var(--border-color);
+  }
+
+  .ant-layout-sider {
+    flex: 0 0 200px;
+    max-width: 200px;
+    min-width: 200px;
+    width: 200px;
+  }
+
+  .ant-layout-sider-children {
+    border-right: 1px solid var(--border-color);
+  }
+
+  > .ant-layout {
+    height: 100%;
+  }
+
+  > .ant-layout > .ant-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .ant-layout-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .content-inner {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .logo {
+    padding: 5px;
+    border-bottom: 1px solid var(--border-color);
+    height: 60px;
+    background-size: auto 50px;
+    background-repeat: no-repeat;
+    background-position: 5px center;
+  }
+
+  .ant-layout-footer {
+    padding: 10px;
+    text-align: center;
+    border-top: 1px solid var(--border-color-strong);
+    flex: 0 0 auto;
+    background: var(--bg-primary);
+    position: relative;
+    z-index: 1;
+  }
+
+  .ant-menu-inline,
+  .ant-menu-vertical,
+  .ant-menu-vertical-left {
+    border: 0;
+  }
+
+  .search-bar {
+    padding: 12px;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-primary);
+  }
+}
+
+/* ==================== 搜索高亮 ==================== */
+.search-bar-highlight {
+  background-color: var(--search-highlight-bg);
+  color: var(--search-highlight-text);
+
+  &.selected-highlight {
+    background-color: var(--search-selected-bg);
+  }
+}
+
+/* JSON 编辑器暗色适配（仅在暗色主题下生效） */
+[data-theme='dark'] {
+  .jsoneditor-vue {
+    /* 整个编辑框 */
+    div.jsoneditor {
+      background-color: var(--bg-highlight);
+      border: none;
+    }
+
+    /* 头部菜单栏 */
+    div.jsoneditor-menu {
+      background-color: var(--bg-highlight);
+      border-color: var(--bg-highlight);
+    }
+
+    /* 内容区域左边：行号 */
+    .ace_gutter {
+      background-color: #444;
+
+      .ace_gutter-cell {
+        color: #aaa;
+      }
+    }
+
+    /* 内容区域右边：JSON内容 */
+    .ace_scroller {
+      background-color: #555;
+    }
+
+    /* key的颜色 */
+    .ace_variable,
+    .ace_text-layer {
+      color: #eee;
+    }
+
+    /* 字符串值的颜色 */
+    .ace_string,
+    .ace_cjk {
+      color: #a6eaa6;
+    }
+
+    /* 数字的颜色 */
+    .ace_constant.ace_numeric {
+      color: #ec9999;
+    }
+
+    /* 布尔值的颜色 */
+    .ace_constant.ace_language {
+      color: #f4c995;
+    }
+
+    /* 当前行高亮样式 */
+    .ace_gutter-active-line,
+    .ace_marker-layer .ace_active-line {
+      background-color: #838774;
+    }
+
+    /* 选中行高亮样式 */
+    .ace-jsoneditor {
+      .ace_marker-layer .ace_selection {
+        background-color: #8b2929;
+      }
+
+      /* 光标颜色 */
+      .ace_cursor {
+        border-left-color: #ddd;
+      }
+    }
+
+    /* 搜索结果 */
+    .ace-jsoneditor .ace_marker-layer .ace_selected-word {
+      border-color: #8b2929;
+    }
+  }
+
+  /* 搜索框 */
+  .search-bar {
+    div,
+    span {
+      color: var(--text-primary);
+    }
+  }
+}