diff --git a/src/vue/about/App.vue b/src/vue/about/App.vue
index d5a36df..b153ab4 100644
--- a/src/vue/about/App.vue
+++ b/src/vue/about/App.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="container">
+    <div class="rt-page about-page container">
         <Banner sub-title="关于" />
 
-        <div class="content_area">
+        <div class="rt-page__content content_area">
             <div v-html="readmeMarkdown"></div>
 
             <el-button type="primary" @click="openRTThreadGitHub">Open RT-Thread/Github</el-button>
@@ -12,6 +12,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
+import { useTheme } from '../composables/useTheme';
 import { imgUrl } from '../assets/img';
 import { sendCommand } from '../api/vscode';
 import { extensionInfo } from '../setting/data';
@@ -19,6 +20,8 @@ import Banner from '../components/Banner.vue';
 
 let readmeMarkdown = ref('');
 
+useTheme();
+
 const openRTThreadGitHub = () => {
     sendCommand('openURL', ['https://github.com/RT-Thread/rt-thread']);
 };
diff --git a/src/vue/about/index.less b/src/vue/about/index.less
index 08fe884..a1c9f90 100644
--- a/src/vue/about/index.less
+++ b/src/vue/about/index.less
@@ -1,268 +1,178 @@
-// About page styles
-@import '../styles/mixins.less';
-@import '../styles/variables.less';
+@import '../styles/mixins.less';
 
-.container {
-  .container-base();
-  padding: 0;
-}
+.about-page {
+  .rt-page__content {
+    padding: @spacing-xl @spacing-xxl;
+    max-width: 960px;
+    margin: 0 auto;
+  }
 
-.content_area {
-  padding: @spacing-xl @spacing-xxl;
-  background-color: @el-bg-color;
-  max-width: 900px;
-  margin: 0 auto;
-  
-  // Markdown content styling - GitHub Flavored Markdown style
-  > div {
-    color: @el-text-color-primary;
-    font-size: @font-size-medium;
-    line-height: 1.6;
-    word-wrap: break-word;
-    
-    // Headings with proper hierarchy
-    h1, h2, h3, h4, h5, h6 {
-      color: @el-text-color-primary;
-      font-weight: 600;
-      line-height: 1.25;
-      margin-top: 24px;
-      margin-bottom: 16px;
-      
-      // Add subtle border for h1 and h2
-      &:first-child {
-        margin-top: 0;
-      }
-    }
-    
-    h1 { 
-      font-size: 2em;
-      border-bottom: 1px solid @el-border-color-lighter;
-      padding-bottom: 0.3em;
-    }
-    
-    h2 { 
-      font-size: 1.5em;
-      border-bottom: 1px solid @el-border-color-lighter;
-      padding-bottom: 0.3em;
-    }
-    
-    h3 { font-size: 1.25em; }
-    h4 { font-size: 1em; }
-    h5 { font-size: 0.875em; }
-    h6 { 
-      font-size: 0.85em;
-      color: @el-text-color-secondary;
-    }
-    
-    // Paragraphs
-    p {
-      margin-top: 0;
-      margin-bottom: 16px;
-      color: @el-text-color-regular;
-      line-height: 1.6;
-    }
-    
-    // Links
-    a {
-      color: @el-color-primary;
-      text-decoration: none;
-      font-weight: 400;
-      transition: @transition-color;
-      
-      &:hover {
-        color: @el-color-primary-light-3;
-        text-decoration: underline;
-      }
-      
-      &:active {
-        color: @el-color-primary-dark-2;
-      }
-    }
-    
-    // Inline code
-    code {
-      padding: 0.2em 0.4em;
-      margin: 0;
-      font-size: 85%;
-      background-color: rgba(175, 184, 193, 0.2);
-      border-radius: 3px;
-      font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
-      color: @el-text-color-primary;
-    }
-    
-    // Code blocks
-    pre {
-      margin-top: 0;
-      margin-bottom: 16px;
-      padding: 16px;
-      overflow: auto;
-      font-size: 85%;
-      line-height: 1.45;
-      background-color: @el-fill-color-light;
-      border-radius: 6px;
-      .scrollbar-style();
-      
-      code {
-        padding: 0;
-        margin: 0;
-        font-size: 100%;
-        word-break: normal;
-        white-space: pre;
-        background: transparent;
-        border: 0;
-        color: @el-text-color-primary;
-        line-height: inherit;
-      }
-    }
-    
-    // Lists
-    ul, ol {
-      margin-top: 0;
-      margin-bottom: 16px;
-      padding-left: 2em;
-      
-      li {
-        margin-bottom: 0.25em;
-        color: @el-text-color-regular;
-        line-height: 1.6;
-        
-        > p {
-          margin-bottom: 0.25em;
+  .content_area {
+    padding: 0;
+
+    > div {
+      font-family: @font-family-base;
+      font-size: @font-size-base;
+      line-height: 1.7;
+      color: @color-text-primary;
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-weight: 600;
+        color: @color-text-primary;
+        line-height: 1.3;
+        margin-top: @spacing-xxl;
+        margin-bottom: @spacing-md;
+
+        &:first-child {
+          margin-top: 0;
         }
       }
-      
-      ul, ol {
-        margin-top: 0.25em;
-        margin-bottom: 0.25em;
-      }
-    }
-    
-    // Task lists
-    ul li input[type="checkbox"] {
-      margin-right: 0.5em;
-      vertical-align: middle;
-    }
-    
-    // Blockquotes
-    blockquote {
-      margin: 16px 0;
-      padding: 0 1em;
-      color: @el-text-color-secondary;
-      border-left: 0.25em solid @el-border-color;
-      
-      > :first-child {
-        margin-top: 0;
+
+      h1 {
+        font-size: 32px;
+        padding-bottom: @spacing-sm;
+        border-bottom: 1px solid @color-border;
       }
-      
-      > :last-child {
-        margin-bottom: 0;
+
+      h2 {
+        font-size: 24px;
+        padding-bottom: @spacing-xs;
+        border-bottom: 1px solid @color-border;
       }
-      
+
+      h3 { font-size: 20px; }
+      h4 { font-size: 18px; }
+      h5 { font-size: 16px; }
+      h6 { font-size: 14px; color: @color-text-secondary; }
+
       p {
-        color: @el-text-color-secondary;
+        margin: 0 0 @spacing-base;
       }
-    }
-    
-    // Tables
-    table {
-      display: block;
-      width: 100%;
-      overflow: auto;
-      margin-top: 0;
-      margin-bottom: 16px;
-      border-spacing: 0;
-      border-collapse: collapse;
-      
-      thead {
-        display: table-header-group;
+
+      a {
+        color: @color-link;
+        text-decoration: none;
+
+        &:hover,
+        &:focus-visible {
+          text-decoration: underline;
+        }
       }
-      
-      tr {
-        background-color: @el-bg-color;
-        border-top: 1px solid @el-border-color-light;
-        
-        &:nth-child(2n) {
-          background-color: @el-fill-color-lighter;
+
+      ul,
+      ol {
+        margin: 0 0 @spacing-base;
+        padding-left: @spacing-xl;
+
+        li {
+          margin-bottom: @spacing-xs;
+          line-height: 1.7;
+
+          ul,
+          ol {
+            margin-top: @spacing-xs;
+            padding-left: @spacing-lg;
+          }
         }
       }
-      
-      th {
-        padding: 6px 13px;
-        border: 1px solid @el-border-color-light;
-        font-weight: 600;
-        text-align: left;
-        background-color: @el-fill-color-light;
-        color: @el-text-color-primary;
+
+      blockquote {
+        margin: @spacing-lg 0;
+        padding: @spacing-base @spacing-lg;
+        border-left: 4px solid @color-accent;
+        background-color: color-mix(in srgb, @color-accent 8%, transparent);
+        color: @color-text-secondary;
       }
-      
-      td {
-        padding: 6px 13px;
-        border: 1px solid @el-border-color-light;
-        color: @el-text-color-regular;
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: @spacing-lg 0;
+        font-size: @font-size-base;
+
+        th,
+        td {
+          border: 1px solid @color-border;
+          padding: @spacing-sm @spacing-base;
+          text-align: left;
+          line-height: 1.6;
+        }
+
+        th {
+          background-color: @color-surface-muted;
+          font-weight: 600;
+        }
       }
-    }
-    
-    // Horizontal rules
-    hr {
-      height: 0.25em;
-      padding: 0;
-      margin: 24px 0;
-      background-color: @el-border-color-lighter;
-      border: 0;
-    }
-    
-    // Images
-    img {
-      max-width: 100%;
-      box-sizing: content-box;
-      background-color: @el-bg-color;
-      
-      &[align=right] {
-        padding-left: 20px;
+
+      code {
+        font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier New', monospace;
+        background-color: color-mix(in srgb, @color-surface-muted 70%, transparent);
+        padding: 0.2em 0.4em;
+        border-radius: @border-radius-small;
+      }
+
+      pre {
+        font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier New', monospace;
+        background-color: @color-surface-muted;
+        border: 1px solid @color-border;
+        border-radius: @border-radius-base;
+        padding: @spacing-base;
+        overflow: auto;
+        margin: @spacing-lg 0;
+        .scrollbar-style();
+
+        code {
+          background: transparent;
+          padding: 0;
+        }
       }
-      
-      &[align=left] {
-        padding-right: 20px;
+
+      hr {
+        border: none;
+        height: 1px;
+        background-color: @color-border;
+        margin: @spacing-xl 0;
       }
-    }
-    
-    // Definition lists
-    dl {
-      padding: 0;
-      
-      dt {
-        padding: 0;
-        margin-top: 16px;
-        font-size: 1em;
-        font-style: italic;
-        font-weight: 600;
-        color: @el-text-color-primary;
+
+      kbd {
+        display: inline-block;
+        padding: 3px 6px;
+        font-size: 12px;
+        font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier New', monospace;
+        background-color: @color-surface-muted;
+        border: 1px solid @color-border;
+        border-radius: @border-radius-base;
+        box-shadow: inset 0 -1px 0 color-mix(in srgb, @color-border 50%, transparent);
       }
-      
-      dd {
-        padding: 0 16px;
-        margin-bottom: 16px;
-        color: @el-text-color-regular;
+
+      figure.rt-md-image {
+        margin: @spacing-xl 0;
+        text-align: center;
+
+        img {
+          max-width: 100%;
+          border-radius: @border-radius-base;
+          border: 1px solid @color-border;
+          background-color: @color-surface;
+          box-shadow: 0 8px 24px 0 color-mix(in srgb, @shadow-soft 40%, transparent);
+        }
+
+        figcaption {
+          margin-top: @spacing-sm;
+          font-size: @font-size-small;
+          color: @color-text-secondary;
+        }
       }
     }
-    
-    // Keyboard keys
-    kbd {
-      display: inline-block;
-      padding: 3px 5px;
-      font-size: 11px;
-      line-height: 10px;
-      color: @el-text-color-primary;
-      vertical-align: middle;
-      background-color: @el-fill-color-lighter;
-      border: 1px solid @el-border-color;
-      border-radius: 3px;
-      box-shadow: inset 0 -1px 0 @el-border-color;
+
+    .el-button {
+      margin-top: @spacing-xl;
     }
   }
-  
-  // Primary button at the bottom
-  .el-button {
-    margin-top: @spacing-xl;
-  }
-}
\ No newline at end of file
+}
+
diff --git a/src/vue/about/main.ts b/src/vue/about/main.ts
index 6e88063..17c0cff 100644
--- a/src/vue/about/main.ts
+++ b/src/vue/about/main.ts
@@ -1,5 +1,7 @@
+import '../styles/global.less';
 import { createApp } from 'vue';
 import App from './App.vue';
 
 const app = createApp(App);
-app.mount('#app');
\ No newline at end of file
+app.mount('#app');
+
diff --git a/src/vue/analyze/App.vue b/src/vue/analyze/App.vue
index e16085d..f7d551c 100644
--- a/src/vue/analyze/App.vue
+++ b/src/vue/analyze/App.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="container">
-    <Banner sub-title="分析" />
+  <div class="rt-page analyze-page container">
+    <Banner sub-title="符号分析" />
 
-    <div class="content_area">
+    <div class="rt-page__content content_area">
       <el-tabs
         v-model="activeName"
         class="section-tabs"
@@ -54,12 +54,15 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import Banner from "../components/Banner.vue";
+import { useTheme } from '../composables/useTheme';
 import { Close } from '@element-plus/icons-vue';
 import type { TabPaneName, TabsPaneContext } from "element-plus";
 declare var acquireVsCodeApi: any;
 
 const vscode = acquireVsCodeApi();
 
+useTheme();
+
 interface Section {
   name: string;
 }
diff --git a/src/vue/analyze/index.less b/src/vue/analyze/index.less
index 0563c4c..29cc963 100644
--- a/src/vue/analyze/index.less
+++ b/src/vue/analyze/index.less
@@ -9,136 +9,47 @@
 }
 
 .content_area {
-  background-color: @el-bg-color;
+  // Use Element Plus default styles
 }
 
 // Tabs styles
 .section-tabs {
   // Use Element Plus default tab styles
-  
+
   > .el-tabs__content {
     padding: @spacing-xxl;
-    color: @el-text-color-regular;
     font-size: @font-size-base;
     font-weight: 400;
   }
-  
-  :deep(.el-tabs__header) {
-    background-color: @el-fill-color-light;
-    border-bottom: 1px solid @el-border-color-light;
-  }
-  
-  :deep(.el-tabs__item) {
-    color: @el-text-color-secondary;
-    
-    &:hover {
-      color: @el-text-color-primary;
-    }
-    
-    &.is-active {
-      color: @el-color-primary;
-      font-weight: 600;
-    }
-  }
-  
-  :deep(.el-tabs__active-bar) {
-    background-color: @el-color-primary;
-  }
 }
 
 // Table styles - using Element Plus theme
 :deep(.el-table) {
   font-size: @font-size-base;
-  
-  // Header styles
-  th.el-table__cell {
-    background-color: @el-fill-color-light;
-    color: @el-text-color-primary;
-    font-weight: 600;
-    border-bottom: 1px solid @el-border-color;
-  }
-  
-  // Body cell styles
-  td.el-table__cell {
-    color: @el-text-color-regular;
-    border-bottom: 1px solid @el-border-color-lighter;
-  }
-  
-  // Row hover effect
-  .el-table__row {
-    transition: @transition-all;
-    
-    &:hover > td.el-table__cell {
-      background-color: @el-fill-color-lighter !important;
-    }
-  }
-  
-  // Current row highlight
-  .el-table__body tr.current-row > td.el-table__cell {
-    background-color: @el-color-primary-light-9 !important;
-  }
-  
-  // Footer (summary) styles
-  .el-table__footer-wrapper {
-    background-color: @el-fill-color-light;
-    border-top: 2px solid @el-border-color;
-    
-    .el-table__cell {
-      background-color: @el-fill-color-light;
-      color: @el-text-color-primary;
-      font-weight: 600;
-    }
-  }
-}
-
-// Loading styles
-:deep(.el-loading-mask) {
-  background-color: @el-bg-color;
-  opacity: 0.9;
-  
-  .el-loading-spinner .circular circle {
-    stroke: @el-color-primary;
-  }
 }
 
 // Symbol info panel
 .symbol-info-panel {
   margin-top: @spacing-base;
-  border: 1px solid @el-border-color;
   border-radius: @border-radius-base;
-  background-color: @el-fill-color-lighter;
   overflow: hidden;
-  box-shadow: @box-shadow-lighter;
-  
+
   .symbol-info-header {
     .flex-between();
     padding: @spacing-sm @spacing-base;
-    background-color: @el-fill-color-light;
-    border-bottom: 1px solid @el-border-color-light;
-    
+
     span {
       .text-title();
       font-size: @font-size-medium;
     }
-    
-    // Close button using Element Plus text button style
-    .el-button.is-text {
-      color: @el-text-color-regular;
-      
-      &:hover {
-        color: @el-color-primary;
-        background-color: @el-color-primary-light-9;
-      }
-    }
   }
-  
+
   .symbol-info-content {
     padding: @spacing-base;
     max-height: 300px;
     overflow-y: auto;
-    background-color: @el-bg-color;
     .scrollbar-style();
-    
+
     pre {
       margin: 0;
       white-space: pre-wrap;
@@ -146,7 +57,6 @@
       font-family: 'Courier New', monospace;
       font-size: @font-size-small;
       line-height: @line-height-normal;
-      color: @el-text-color-regular;
     }
   }
 }
diff --git a/src/vue/analyze/main.ts b/src/vue/analyze/main.ts
index 6e88063..17c0cff 100644
--- a/src/vue/analyze/main.ts
+++ b/src/vue/analyze/main.ts
@@ -1,5 +1,7 @@
+import '../styles/global.less';
 import { createApp } from 'vue';
 import App from './App.vue';
 
 const app = createApp(App);
-app.mount('#app');
\ No newline at end of file
+app.mount('#app');
+
diff --git a/src/vue/components/Banner.less b/src/vue/components/Banner.less
index 861f46b..8db87d3 100644
--- a/src/vue/components/Banner.less
+++ b/src/vue/components/Banner.less
@@ -1,4 +1,4 @@
-// Banner component styles
+// Banner component styles - simplified
 @import '../styles/mixins.less';
 @import '../styles/variables.less';
 
@@ -6,10 +6,6 @@
   display: flex;
   padding: @spacing-lg;
   gap: @spacing-sm;
-  background-color: @el-bg-color;
-  color: @el-text-color-regular;
-  border-bottom: 1px solid @el-border-color-lighter;
-  box-shadow: @box-shadow-lighter;
 }
 
 .logo {
@@ -20,20 +16,18 @@
 .info {
   flex: 1;
   padding-top: 5px;
-  
+
   h1 {
     font-size: @font-size-medium;
     font-weight: 500;
-    color: @el-text-color-primary;
     margin: 0;
   }
-  
+
   p {
     font-size: @font-size-extra-small;
-    color: @el-text-color-secondary;
     margin: @spacing-xs 0 @spacing-sm;
   }
-  
+
   .bar {
     height: 3px;
     background: linear-gradient(90deg, #32B7BC, transparent);
diff --git a/src/vue/components/XTerminal.less b/src/vue/components/XTerminal.less
index 4f1899c..998801b 100644
--- a/src/vue/components/XTerminal.less
+++ b/src/vue/components/XTerminal.less
@@ -1,4 +1,4 @@
-// XTerminal component styles
+// XTerminal component styles - simplified
 @import '../styles/mixins.less';
 @import '../styles/variables.less';
 
@@ -16,25 +16,9 @@
 }
 
 :deep(.xterm-viewport) {
-  background-color: transparent !important;
   .scrollbar-style();
 }
 
 :deep(.xterm-screen) {
   height: 100% !important;
-}
-
-// Terminal cursor using Element Plus primary color
-:deep(.xterm-cursor-layer) {
-  .xterm-cursor {
-    background-color: @el-color-primary !important;
-  }
-}
-
-// Selection highlight
-:deep(.xterm-selection-layer) {
-  .xterm-selection {
-    background-color: @el-color-primary;
-    opacity: 0.3;
-  }
 }
\ No newline at end of file
diff --git a/src/vue/composables/useTheme.ts b/src/vue/composables/useTheme.ts
new file mode 100644
index 0000000..15650a6
--- /dev/null
+++ b/src/vue/composables/useTheme.ts
@@ -0,0 +1,319 @@
+import { computed, onBeforeUnmount, onMounted, reactive } from 'vue';
+
+type ThemeKind = 'light' | 'dark' | 'high-contrast';
+
+interface ThemePalette {
+  surface: string;
+  surfaceAlt: string;
+  surfaceMuted: string;
+  border: string;
+  borderStrong: string;
+  textPrimary: string;
+  textSecondary: string;
+  textTertiary: string;
+  textInverse: string;
+  accent: string;
+  accentHover: string;
+  link: string;
+  muted: string;
+  success: string;
+  warning: string;
+  danger: string;
+  scrollbar: string;
+  shadow: string;
+  fontFamily: string;
+}
+
+const paletteDefaults: Record<ThemeKind, ThemePalette> = {
+  light: {
+    surface: '#ffffff',
+    surfaceAlt: '#f6f8fa',
+    surfaceMuted: '#eaeef2',
+    border: '#d0d7de',
+    borderStrong: '#afb8c1',
+    textPrimary: '#24292f',
+    textSecondary: '#57606a',
+    textTertiary: '#6e7781',
+    textInverse: '#0d1117',
+    accent: '#007acc',
+    accentHover: '#005fa3',
+    link: '#0969da',
+    muted: 'rgba(0, 0, 0, 0.45)',
+    success: '#2da44e',
+    warning: '#bf8700',
+    danger: '#cf222e',
+    scrollbar: 'rgba(66, 66, 66, 0.35)',
+    shadow: 'rgba(15, 23, 42, 0.24)',
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  },
+  dark: {
+    surface: '#1e1e1e',
+    surfaceAlt: '#252526',
+    surfaceMuted: '#2d2d2d',
+    border: '#3c3c3c',
+    borderStrong: '#5a5a5a',
+    textPrimary: '#d4d4d4',
+    textSecondary: '#9da5b4',
+    textTertiary: 'rgba(212, 212, 212, 0.7)',
+    textInverse: '#0d1117',
+    accent: '#32B7BC',
+    accentHover: '#41cad0',
+    link: '#75beff',
+    muted: 'rgba(255, 255, 255, 0.45)',
+    success: '#4ec9b0',
+    warning: '#d7ba7d',
+    danger: '#f7768e',
+    scrollbar: 'rgba(255, 255, 255, 0.25)',
+    shadow: 'rgba(0, 0, 0, 0.35)',
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  },
+  'high-contrast': {
+    surface: '#000000',
+    surfaceAlt: '#111111',
+    surfaceMuted: '#1a1a1a',
+    border: '#ffffff',
+    borderStrong: '#ffffff',
+    textPrimary: '#ffffff',
+    textSecondary: '#d0d0d0',
+    textTertiary: '#bfbfbf',
+    textInverse: '#000000',
+    accent: '#ffcc00',
+    accentHover: '#ffd633',
+    link: '#40a9ff',
+    muted: 'rgba(255, 255, 255, 0.65)',
+    success: '#61d345',
+    warning: '#f0a732',
+    danger: '#ff6464',
+    scrollbar: 'rgba(255, 255, 255, 0.5)',
+    shadow: 'rgba(0, 0, 0, 0.7)',
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  },
+};
+
+const themeState = reactive({
+  kind: 'dark' as ThemeKind,
+  palette: { ...paletteDefaults.dark },
+});
+
+let initialized = false;
+let observer: MutationObserver | null = null;
+
+function readCssVar(variable: string, fallback: string): string {
+  if (typeof window === 'undefined') {
+    return fallback;
+  }
+  const styles = getComputedStyle(document.documentElement);
+  const value = styles.getPropertyValue(variable).trim();
+  if (value) {
+    return value;
+  }
+  const bodyValue = getComputedStyle(document.body).getPropertyValue(variable).trim();
+  return bodyValue || fallback;
+}
+
+function colorMix(base: string, mixWith: string, weight: number): string {
+  const clamped = Math.min(1, Math.max(0, weight));
+  const percent = Math.round(clamped * 100);
+  return `color-mix(in srgb, ${base} ${percent}%, ${mixWith})`;
+}
+
+function detectThemeKind(): ThemeKind {
+  if (typeof document === 'undefined') {
+    return 'light';
+  }
+  const classList = document.body.classList;
+  if ([...classList].some(cls => cls.includes('high-contrast'))) {
+    return 'high-contrast';
+  }
+  if (classList.contains('vscode-light')) {
+    return 'light';
+  }
+  if (classList.contains('vscode-dark')) {
+    return 'dark';
+  }
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+    return 'light';
+  }
+  return 'dark';
+}
+
+function mapThemeKind(input?: string): ThemeKind {
+  if (!input) {
+    return detectThemeKind();
+  }
+  if (input.includes('high') || input.includes('contrast')) {
+    return 'high-contrast';
+  }
+  if (input.includes('light')) {
+    return 'light';
+  }
+  return 'dark';
+}
+
+function buildPalette(kind: ThemeKind): ThemePalette {
+  const base = { ...paletteDefaults[kind] };
+  const overrides: Array<[keyof ThemePalette, string]> = [
+    ['surface', '--vscode-editor-background'],
+    ['surfaceAlt', '--vscode-sideBar-background'],
+    ['surfaceMuted', '--vscode-input-background'],
+    ['border', '--vscode-panel-border'],
+    ['textPrimary', '--vscode-editor-foreground'],
+    ['textSecondary', '--vscode-descriptionForeground'],
+    ['textTertiary', '--vscode-disabledForeground'],
+    ['accent', '--vscode-button-background'],
+    ['accentHover', '--vscode-button-hoverBackground'],
+    ['link', '--vscode-textLink-foreground'],
+    ['success', '--vscode-testing-iconPassed'],
+    ['warning', '--vscode-testing-iconQueued'],
+    ['danger', '--vscode-testing-iconFailed'],
+    ['scrollbar', '--vscode-scrollbarSlider-background'],
+    ['shadow', '--vscode-widget-shadow'],
+  ];
+
+  for (const [key, cssVar] of overrides) {
+    const value = readCssVar(cssVar, base[key]);
+    if (value) {
+      base[key] = value;
+    }
+  }
+
+  base.borderStrong = colorMix(base.border, base.textPrimary, 0.35);
+  base.accentHover = readCssVar('--vscode-button-hoverBackground', base.accentHover);
+  base.fontFamily = readCssVar('--vscode-editor-font-family', base.fontFamily);
+  return base;
+}
+
+function applyCssVariables(palette: ThemePalette, kind: ThemeKind) {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  const root = document.documentElement;
+  const rtVars: Record<string, string> = {
+    '--rt-font-family': palette.fontFamily,
+    '--rt-surface': palette.surface,
+    '--rt-surface-alt': palette.surfaceAlt,
+    '--rt-surface-muted': palette.surfaceMuted,
+    '--rt-border': palette.border,
+    '--rt-border-strong': palette.borderStrong,
+    '--rt-text-primary': palette.textPrimary,
+    '--rt-text-secondary': palette.textSecondary,
+    '--rt-text-tertiary': palette.textTertiary,
+    '--rt-text-inverse': palette.textInverse,
+    '--rt-link': palette.link,
+    '--rt-muted': palette.muted,
+    '--rt-accent': palette.accent,
+    '--rt-accent-hover': palette.accentHover,
+    '--rt-danger': palette.danger,
+    '--rt-warning': palette.warning,
+    '--rt-success': palette.success,
+    '--rt-scrollbar': palette.scrollbar,
+    '--rt-shadow': palette.shadow,
+  };
+
+  const elVars: Record<string, string> = {
+    '--el-bg-color': palette.surface,
+    '--el-bg-color-page': palette.surface,
+    '--el-bg-color-overlay': palette.surfaceAlt,
+    '--el-fill-color': palette.surfaceAlt,
+    '--el-fill-color-light': palette.surfaceMuted,
+    '--el-fill-color-lighter': palette.surfaceMuted,
+    '--el-fill-color-blank': palette.surface,
+    '--el-color-primary': palette.accent,
+    '--el-color-primary-light-3': colorMix(palette.accent, '#ffffff', 0.7),
+    '--el-color-primary-light-5': colorMix(palette.accent, '#ffffff', 0.55),
+    '--el-color-primary-light-7': colorMix(palette.accent, '#ffffff', 0.4),
+    '--el-color-primary-light-8': colorMix(palette.accent, '#ffffff', 0.3),
+    '--el-color-primary-light-9': colorMix(palette.accent, '#ffffff', 0.15),
+    '--el-color-primary-dark-2': colorMix(palette.accent, '#000000', 0.65),
+    '--el-color-success': palette.success,
+    '--el-color-warning': palette.warning,
+    '--el-color-danger': palette.danger,
+    '--el-color-info': palette.textSecondary,
+    '--el-text-color-primary': palette.textPrimary,
+    '--el-text-color-regular': palette.textPrimary,
+    '--el-text-color-secondary': palette.textSecondary,
+    '--el-text-color-placeholder': palette.textTertiary,
+    '--el-text-color-disabled': palette.textTertiary,
+    '--el-border-color': palette.border,
+    '--el-border-color-light': colorMix(palette.border, palette.surface, 0.75),
+    '--el-border-color-lighter': colorMix(palette.border, palette.surface, 0.85),
+    '--el-border-color-extra-light': colorMix(palette.border, palette.surface, 0.9),
+    '--el-border-color-dark': colorMix(palette.border, '#000000', 0.6),
+    '--el-border-color-darker': colorMix(palette.border, '#000000', 0.75),
+    '--el-box-shadow': `0 12px 28px 0 ${palette.shadow}`,
+    '--el-box-shadow-light': `0 12px 28px 0 ${palette.shadow}`,
+    '--el-box-shadow-lighter': `0 8px 20px 0 ${palette.shadow}`,
+  };
+
+  for (const [key, value] of Object.entries({ ...rtVars, ...elVars })) {
+    root.style.setProperty(key, value);
+  }
+
+  document.body.style.backgroundColor = palette.surface;
+  document.body.style.color = palette.textPrimary;
+  document.body.style.fontFamily = palette.fontFamily;
+  document.body.dataset.rtTheme = kind;
+  root.style.setProperty('color-scheme', kind === 'light' ? 'light' : 'dark');
+  root.dataset.rtTheme = kind;
+}
+
+function updateTheme(forcedKind?: ThemeKind) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  const nextKind = forcedKind ?? detectThemeKind();
+  const palette = buildPalette(nextKind);
+  themeState.kind = nextKind;
+  themeState.palette = palette;
+  applyCssVariables(palette, nextKind);
+}
+
+function handleThemeMessage(event: MessageEvent) {
+  const data = event.data as { type?: string; themeKind?: string };
+  if (data?.type === 'vscode:colorTheme') {
+    updateTheme(mapThemeKind(data.themeKind));
+  }
+}
+
+function initializeTheme() {
+  if (initialized || typeof window === 'undefined') {
+    return;
+  }
+  initialized = true;
+  updateTheme();
+  window.addEventListener('message', handleThemeMessage);
+  observer = new MutationObserver(() => updateTheme());
+  observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+}
+
+function teardownTheme() {
+  if (!initialized || typeof window === 'undefined') {
+    return;
+  }
+  window.removeEventListener('message', handleThemeMessage);
+  observer?.disconnect();
+  observer = null;
+  initialized = false;
+}
+
+export function useTheme() {
+  if (typeof window !== 'undefined') {
+    initializeTheme();
+  }
+
+  onMounted(() => {
+    initializeTheme();
+  });
+
+  onBeforeUnmount(() => {
+    // keep listeners alive for other consumers; teardown occurs only when explicitly called
+  });
+
+  return {
+    theme: computed(() => themeState.palette),
+    themeKind: computed(() => themeState.kind),
+    refreshTheme: () => updateTheme(),
+    teardown: teardownTheme,
+  };
+}
diff --git a/src/vue/create-project/App.vue b/src/vue/create-project/App.vue
index 2a3087d..03aa52c 100644
--- a/src/vue/create-project/App.vue
+++ b/src/vue/create-project/App.vue
@@ -1,145 +1,133 @@
 <template>
-    <div class="container">
-        <Banner sub-title="创建项目" />
-
-        <div class="content_area">
-            <div class="body-box">
-                <br></br>
-                <el-form :model="projectInfo" label-width="120">
-                    <el-form-item label="工程名称">
-                        <div class="row-box">
-                            <el-input v-model="projectInfo.name" placeholder="请输入内容" />
-                        </div>
-                    </el-form-item>
-                    <el-form-item label="空间路径">
-                        <div class="row-box">
-                            <el-input v-model="projectInfo.folder" placeholder="请输入内容" />
-                            <el-button type="primary" plain @click="getProjectFolderFunction">浏览</el-button>
-                        </div>
-                    </el-form-item>
-                    <el-form-item label="RT-Thread 基线">
-                        <div class="row-box">
-                            <el-select style="width: 40%" v-model="projectInfo.manufacturer" placeholder="请选择"
-                                @change="vendorChanged">
-                                <el-option v-for="item in projectInfo.projectList" :key="item.manufacturer" :label="item.manufacturer"
-                                    :value="item.manufacturer" />
-                            </el-select>
-                            <el-select style="width: 50%" v-model="projectInfo.board" placeholder="请选择"
-                                @change="boardChanged">
-                                <el-option v-for="item in projectInfo.projectList[vendorIndex].boards" :key="item"
-                                    :label="item" :value="item" />
-                            </el-select>
-                            <el-button type="primary" plain @click="createProject">创建</el-button>
-                        </div>
-                    </el-form-item>
-                    <el-form-item label="">
-                        <div class="row-box">
-                            <el-checkbox style="width: 40%" v-model="projectInfo.linkRTT" disabled>链接RT-Thread</el-checkbox>
-                            <el-checkbox style="width: 50%" v-model="projectInfo.linkDriver" disabled>链接驱动</el-checkbox>
-                            <p style="width: 98px"></p>
-                        </div>
-                    </el-form-item>
-                </el-form>
-                <div>
-                    <h3> 创建工程说明 </h3>
-                    请在工程名称中填写名称，它会在工程空间路径中创建这样名称的目录放置新创建的工程。
-                    <br><br>
-                    ⚠️ 请确保空间路径 + 工程名称的路径不存在；否则创建检查失败。
-                </div>
+  <div class="rt-page create-project-page">
+    <Banner sub-title="创建项目" />
+    <div class="rt-page__content rt-stack">
+      <div class="rt-card create-project-card">
+        <el-form :model="projectInfo" label-width="120">
+          <el-form-item label="工程名称">
+            <div class="create-project-row create-project-row--name">
+              <el-input v-model="projectInfo.name" :placeholder="'请输入工程名称'" />
+            </div>
+          </el-form-item>
+          <el-form-item label="空间路径">
+            <div class="create-project-row create-project-row--path">
+              <el-input v-model="projectInfo.folder" :placeholder="'请输入路径'" />
+              <el-button type="primary" plain @click="getProjectFolderFunction">浏览</el-button>
+            </div>
+          </el-form-item>
+          <el-form-item label="RT-Thread 基线">
+            <div class="create-project-row create-project-row--baseline">
+              <el-select class="create-project-select" v-model="projectInfo.manufacturer" :placeholder="'请选择'" @change="vendorChanged">
+                <el-option
+                  v-for="item in projectInfo.projectList"
+                  :key="item.manufacturer"
+                  :label="item.manufacturer"
+                  :value="item.manufacturer"
+                />
+              </el-select>
+              <el-select class="create-project-select" v-model="projectInfo.board" :placeholder="'请选择'" @change="boardChanged">
+                <el-option
+                  v-for="item in projectInfo.projectList[vendorIndex].boards"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+              <el-button type="primary" plain @click="createProject">创建</el-button>
             </div>
-        </div>
+          </el-form-item>
+          <el-form-item>
+            <div class="create-project-row">
+              <el-checkbox class="create-project-checkbox" v-model="projectInfo.linkRTT" disabled>链接RT-Thread</el-checkbox>
+              <el-checkbox class="create-project-checkbox" v-model="projectInfo.linkDriver" disabled>链接驱动</el-checkbox>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="rt-card create-project-note">
+        <h3 class="rt-section-title">创建工程说明</h3>
+        <p>请在工程名称中填写名称，它会在工程空间路径中创建这样名称的目录放置新创建的工程。</p>
+        <p class="create-project-warning">⚠️ 请确保空间路径 + 工程名称的路径不存在；否则创建检查失败。</p>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUpdated } from "vue";
-import { projectInfo, extensionInfo, envInfo } from "./data";
-import { sendCommand, sendCommandData } from "../api/vscode";
-import Banner from "../components/Banner.vue";
+import { computed, onMounted } from 'vue';
+import { projectInfo, extensionInfo, envInfo } from './data';
+import { sendCommand, sendCommandData } from '../api/vscode';
+import Banner from '../components/Banner.vue';
+import { useTheme } from '../composables/useTheme';
 
-onUpdated(() => {
-    console.log('CreateProject App updated');
-});
+useTheme();
 
 onMounted(() => {
-    sendCommand('getExtensionInfo');
-    window.addEventListener('message', event => {
-        const message = event.data;
-
-        switch (message.command) {
-            case 'extensionInfo':
-                extensionInfo.value.version = message.data.version;
-                projectInfo.value.projectList = message.data.projectList;
-
-                envInfo.value.version = message.data.env.version;
-                envInfo.value.path = message.data.env.path;
-                
-                // 设置RT-Thread配置数据
-                if (message.data.configInfo && message.data.configInfo.length > 0) {
-                    envInfo.value.rtConfig.path = message.data.configInfo[0].path || '';
-                }
-                break;
-
-            case 'setProjectFolder':
-                // message like {command: 'setProjectFolder', data: 'path'}
-                projectInfo.value.folder = message.data;
-                break;
-
-            default:
-                break;
+  sendCommand('getExtensionInfo');
+  window.addEventListener('message', event => {
+    const message = event.data;
+    switch (message.command) {
+      case 'extensionInfo':
+        extensionInfo.value.version = message.data.version;
+        projectInfo.value.projectList = message.data.projectList;
+        envInfo.value.version = message.data.env.version;
+        envInfo.value.path = message.data.env.path;
+        if (message.data.configInfo && message.data.configInfo.length > 0) {
+          envInfo.value.rtConfig.path = message.data.configInfo[0].path || '';
         }
-    });
+        break;
+      case 'setProjectFolder':
+        projectInfo.value.folder = message.data;
+        break;
+      default:
+        break;
+    }
+  });
 });
 
 const vendorIndex = computed(() => {
-    let current = 0;
-    projectInfo.value.projectList.filter((item: any, index: any) => {
-        if (item.manufacturer === projectInfo.value.manufacturer) {
-            current = index;
-        }
-    });
-    return current;
+  let current = 0;
+  projectInfo.value.projectList.filter((item: any, index: number) => {
+    if (item.manufacturer === projectInfo.value.manufacturer) {
+      current = index;
+    }
+  });
+  return current;
 });
 
 const vendorChanged = () => {
-    let current = 0;
-
-    // 当重新选择vendor时，对board进行重置
-    projectInfo.value.projectList.filter((item: any, index: any) => {
-        if (item.manufacturer === projectInfo.value.manufacturer) {
-            current = index;
-        }
-    });
-
-    if (current === -1) {
-        projectInfo.value.board = "";
-    }
-    else {
-        projectInfo.value.board = projectInfo.value.projectList[current].boards[0];
+  let current = -1;
+  projectInfo.value.projectList.filter((item: any, index: number) => {
+    if (item.manufacturer === projectInfo.value.manufacturer) {
+      current = index;
     }
+  });
+  if (current === -1) {
+    projectInfo.value.board = '';
+  } else {
+    projectInfo.value.board = projectInfo.value.projectList[current].boards[0];
+  }
 };
 
 const getProjectFolderFunction = () => {
-    sendCommandData("browseProjectFolder", projectInfo.value.folder);
-}
+  sendCommandData('browseProjectFolder', projectInfo.value.folder);
+};
 
-// 当选择board时，展示对应目录下的README.md文件
 const boardChanged = () => {
-}
+  // reserved for future behaviour
+};
 
 const createProject = () => {
-    let project = {name: "", folder: "", board: "", manufacturer: "", linkRTT: false, linkDriver: false};
-
-    project.name = projectInfo.value.name;
-    project.folder = projectInfo.value.folder;
-    project.board = projectInfo.value.board;
-    project.manufacturer  = projectInfo.value.manufacturer;
-    project.linkRTT = projectInfo.value.linkRTT;
-    project.linkDriver = projectInfo.value.linkDriver;
-
-    sendCommand("createProject", [project]);
-}
-
+  const project = {
+    name: projectInfo.value.name,
+    folder: projectInfo.value.folder,
+    board: projectInfo.value.board,
+    manufacturer: projectInfo.value.manufacturer,
+    linkRTT: projectInfo.value.linkRTT,
+    linkDriver: projectInfo.value.linkDriver,
+  };
+  sendCommand('createProject', [project]);
+};
 </script>
 
 <style scoped lang="less">
diff --git a/src/vue/create-project/index.less b/src/vue/create-project/index.less
index bbc25c5..9a97f95 100644
--- a/src/vue/create-project/index.less
+++ b/src/vue/create-project/index.less
@@ -1,150 +1,95 @@
-// Create Project page styles
 @import '../styles/mixins.less';
-@import '../styles/variables.less';
 
-.container {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  background-color: @el-bg-color;
-  color: @el-text-color-regular;
+.create-project-page {
+  .rt-page__content {
+    padding-top: @spacing-base;
+  }
 }
 
-.content_area {
-  width: 100%;
-  height: 100%;
-  background-color: @el-bg-color;
-  color: @el-text-color-regular;
-  padding: 0 @spacing-lg;
-
-  .body-box {
-    width: 80%;
-    min-width: 800px;
-    margin: 0 auto;
-
-    // Form styles using Element Plus theme
-    .el-form {
-      :deep(.el-form-item__label) {
-        justify-content: flex-start;
-        color: @el-text-color-regular;
-        font-size: @font-size-base;
-      }
-
-      .file-box {
-        width: 0;
-      }
-
-      .el-input {
-        height: 40px;
-        font-size: @font-size-base;
-      }
-
-      .el-form-item {
-        display: flex;
-        align-items: center;
-        margin-bottom: @spacing-lg;
-      }
-
-      .row-box {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        column-gap: @spacing-lg;
-
-        // Input fields
-        .el-input {
-          flex: 1;
-        }
-
-        // Select dropdowns with proper Element Plus styling
-        .el-select {
-          font-size: @font-size-base;
-        }
-
-        // Buttons using Element Plus primary style
-        .el-button {
-          min-width: 98px;
-        }
-
-        // Checkbox alignment
-        p {
-          margin: 0;
-        }
-      }
-
-      :deep(.el-checkbox) {
-        margin-right: 0;
-        
-        .el-checkbox__label {
-          color: @el-text-color-regular;
-          font-size: @font-size-base;
-        }
-        
-        &.is-disabled .el-checkbox__label {
-          color: @el-text-color-disabled;
-        }
-      }
-    }
-
-    // Description section
-    h3 {
-      .text-title();
-      margin-top: @spacing-xxl;
-      margin-bottom: @spacing-base;
+.create-project-card {
+  .el-form {
+    :deep(.el-form-item) {
+      margin-bottom: @spacing-lg;
     }
 
-    // Warning text styling
-    p, div {
-      color: @el-text-color-regular;
+    :deep(.el-form-item__label) {
+      justify-content: flex-start;
+      color: @color-text-secondary;
       font-size: @font-size-base;
-      line-height: @line-height-normal;
     }
+  }
+}
+
+.create-project-row {
+  display: flex;
+  align-items: center;
+  column-gap: @spacing-lg;
+
+  &--name,
+  &--path,
+  &--baseline {
+    // Grid keeps Browse/Create buttons aligned across rows
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
+    align-items: center;
+    column-gap: @spacing-lg;
+  }
 
-    .iframe-box {
+  &--name {
+    .el-input {
+      grid-column: 1 / -1;
       width: 100%;
-      height: auto;
+      min-width: 0;
     }
   }
-}
 
-// Form overrides for better Element Plus integration
-:deep(.el-form) {
-  .el-form-item {
-    border: none;
-    
-    &__content {
-      line-height: 40px;
+  &--path {
+    .el-input {
+      grid-column: 1 / span 2;
+      width: 100%;
+      min-width: 0;
     }
   }
 
-  // Primary button style
-  .el-button--primary {
-    background-color: @el-color-primary;
-    border-color: @el-color-primary;
-    
-    &:hover {
-      background-color: @el-color-primary-light-3;
-      border-color: @el-color-primary-light-3;
-    }
-    
-    &.is-plain {
-      color: @el-color-primary;
-      background-color: @el-color-primary-light-9;
-      border-color: @el-color-primary-light-5;
-      
-      &:hover {
-        background-color: @el-color-primary;
-        border-color: @el-color-primary;
-        color: white;
-      }
+  &--baseline {
+    .create-project-select {
+      width: 100%;
+      min-width: 0;
     }
   }
+}
 
-  // Input and Select focus states
-  .el-input__wrapper,
-  .el-select .el-input.is-focus .el-input__wrapper {
-    box-shadow: 0 0 0 1px @el-color-primary inset;
+
+.create-project-select {
+  min-width: 220px;
+}
+
+.create-project-checkbox {
+  flex: 1;
+}
+
+.create-project-note {
+  p {
+    margin: 0 0 @spacing-sm;
+    color: @color-text-secondary;
   }
-}
\ No newline at end of file
+}
+
+.create-project-warning {
+  margin: 0;
+  color: @color-warning;
+  font-weight: 500;
+}
+
+.create-project-card :deep(.el-input) {
+  height: 40px;
+}
+
+.create-project-card :deep(.el-checkbox__label) {
+  font-size: @font-size-base;
+}
+
+.create-project-card :deep(.el-button) {
+  min-width: 100px;
+}
diff --git a/src/vue/create-project/main.ts b/src/vue/create-project/main.ts
index 515eee6..cbdef49 100644
--- a/src/vue/create-project/main.ts
+++ b/src/vue/create-project/main.ts
@@ -1,9 +1,10 @@
-import { createApp } from 'vue';
+import { createApp } from 'vue';
 import App from './App.vue';
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
-import '../styles/theme.css';
+import '../styles/global.less';
 
 const app = createApp(App);
 app.use(ElementPlus);
 app.mount('#app');
+
diff --git a/src/vue/projects/App.vue b/src/vue/projects/App.vue
index 962c77c..66738c4 100644
--- a/src/vue/projects/App.vue
+++ b/src/vue/projects/App.vue
@@ -1,93 +1,90 @@
 <template>
-    <div class="container">
-        <Banner sub-title="项目" />
-
-        <div class="content_area">
-            <br>
-            可以在感兴趣的BSP/工程项上✔，然后保存配置，将会在侧边栏中显示对应列表。<br>
-            <hr>
-
-            <div style="text-align: right; margin-bottom: 10px;">
-                <el-button @click="reloadBSPProjects" style="display: none;">加载列表</el-button>
-                <el-button @click="collapseAll">折叠全部列表</el-button>
-                <el-button type="primary" @click="saveBSPProjects">保存列表配置</el-button>
-            </div>
-
-            <el-table ref="tableRef" v-loading="loading" :data="tableData" style="width: 100%" row-key="id" 
-                :expand-row-keys="expandedRowKeys">
-                <el-table-column type="selection" width="32"></el-table-column>
-                <el-table-column prop="name" label="名称" width="300"></el-table-column>
-                <el-table-column prop="path" label="路径" width="500"></el-table-column>
-            </el-table>
+  <div class="rt-page projects-page">
+    <Banner sub-title="项目" />
+    <div class="rt-page__content">
+      <div class="rt-card projects-card">
+        <p class="projects-tip">
+          可以在感兴趣的BSP/工程项上✔，然后保存配置，将会在侧边栏中显示对应列表。
+        </p>
+        <div class="projects-actions">
+          <el-button @click="reloadBSPProjects" style="display: none;">加载列表</el-button>
+          <el-button @click="collapseAll">折叠全部列表</el-button>
+          <el-button type="primary" @click="saveBSPProjects">保存列表配置</el-button>
         </div>
+        <el-table
+          ref="tableRef"
+          v-loading="loading"
+          :data="tableData"
+          row-key="id"
+          :expand-row-keys="expandedRowKeys"
+          style="width: 100%"
+        >
+          <el-table-column type="selection" width="32"></el-table-column>
+          <el-table-column prop="name" label="名称" width="300"></el-table-column>
+          <el-table-column prop="path" label="路径" width="500"></el-table-column>
+        </el-table>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref, nextTick } from 'vue';
 import type { ElTable } from 'element-plus';
-import { imgUrl } from '../assets/img';
 import { sendCommand } from '../api/vscode';
-import { extensionInfo } from '../setting/data';
 import Banner from '../components/Banner.vue';
+import { useTheme } from '../composables/useTheme';
 
-const loading = ref(false); // 是否加载中
+useTheme();
+
+const loading = ref(false);
+const expandedRowKeys = ref<string[]>([]);
 
-const expandedRowKeys = ref([]); // 默认全部折叠
 const collapseAll = () => {
-    expandedRowKeys.value = []; // 清空展开的行
+  expandedRowKeys.value = [];
 };
 
 const tableRef = ref<InstanceType<typeof ElTable>>();
-const tableData = ref([
-    { id: "1", name: 'qemu-virt64-riscv', path: 'qemu-virt64-riscv'}
-]);
+const tableData = ref([{ id: '1', name: 'qemu-virt64-riscv', path: 'qemu-virt64-riscv' }]);
 
 const reloadBSPProjects = () => {
-    sendCommand('searchBSPProjects', ['bsp']);
+  sendCommand('searchBSPProjects', ['bsp']);
 };
 
 const saveBSPProjects = () => {
-    let args: string[] = [];
-    if (tableRef.value) {
-        const selectedRows = (tableRef.value as any).getSelectionRows();
-        if (selectedRows.length > 0) {
-            args = selectedRows.map((row: any) => row.path);
-        }
+  let args: string[] = [];
+  if (tableRef.value) {
+    const selectedRows = (tableRef.value as any).getSelectionRows();
+    if (selectedRows.length > 0) {
+      args = selectedRows.map((row: any) => row.path);
     }
-
-    sendCommand('saveBSPProjects', [args]);
+  }
+  sendCommand('saveBSPProjects', [args]);
 };
 
 onMounted(() => {
-    sendCommand('searchBSPProjects', ['bsp']);
-    loading.value = true; // 开始加载动画
-
-    window.addEventListener('message', event => {
-        const message = event.data;
-
-        switch (message.command) {
-            case 'updateProjects':
-                tableData.value = message.data.dirs;
-                let stars: string[] = message.data.stars;
-
-                nextTick(() => {
-                    tableData.value.forEach((item: any, index: number) => {
-                        if (stars.includes(item.path)) {
-                            if (tableRef.value) {
-                                (tableRef.value as any).toggleRowSelection(item, true);
-                            }
-                        }
-                    });
-                });
-
-                loading.value = false; // 停止加载动画
-                break;
-
-            default:
-                break;
-        }
-    });
+  sendCommand('searchBSPProjects', ['bsp']);
+  loading.value = true;
+
+  window.addEventListener('message', event => {
+    const message = event.data;
+    switch (message.command) {
+      case 'updateProjects':
+        tableData.value = message.data.dirs;
+        const stars: string[] = message.data.stars;
+        nextTick(() => {
+          tableData.value.forEach((item: any) => {
+            if (stars.includes(item.path) && tableRef.value) {
+              (tableRef.value as any).toggleRowSelection(item, true);
+            }
+          });
+        });
+        loading.value = false;
+        break;
+      default:
+        break;
+    }
+  });
 });
 </script>
 
diff --git a/src/vue/projects/index.less b/src/vue/projects/index.less
index 6860846..3cdac49 100644
--- a/src/vue/projects/index.less
+++ b/src/vue/projects/index.less
@@ -1,99 +1,39 @@
-// Projects page styles
 @import '../styles/mixins.less';
-@import '../styles/variables.less';
 
-.container {
-  .container-base();
-  padding: 0;
+.projects-page {
+  .rt-page__content {
+    padding-top: @spacing-base;
+  }
 }
 
-.content_area {
-  padding: @spacing-lg;
-  background-color: @el-bg-color;
-  color: @el-text-color-regular;
-  
-  // Description text
-  > br + text,
-  > text {
-    color: @el-text-color-regular;
-    font-size: @font-size-base;
-    line-height: @line-height-normal;
-  }
-  
-  hr {
-    margin: @spacing-base 0;
-    border: none;
-    border-top: 1px solid @el-border-color-lighter;
-  }
-  
-  // Button container
-  > div[style*="text-align: right"] {
-    text-align: right;
-    margin-bottom: @spacing-md;
-    
-    .el-button {
-      margin-left: @spacing-sm;
-    }
-  }
+.projects-card {
+  display: flex;
+  flex-direction: column;
+  row-gap: @spacing-lg;
 }
 
-// Table styles using Element Plus theme
-.el-table {
+.projects-tip {
+  margin: 0;
+  color: @color-text-secondary;
+  line-height: @line-height-normal;
+}
+
+.projects-actions {
+  display: flex;
+  justify-content: flex-end;
+  column-gap: @spacing-sm;
+}
+
+.projects-card .el-table {
   .table-container();
-  
-  :deep(.el-table__header-wrapper) {
-    th {
-      background-color: @el-fill-color-light;
-      color: @el-text-color-primary;
-      font-weight: 500;
-    }
+  border: none;
+  background-color: transparent;
+
+  :deep(.el-table__header th) {
+    background-color: @color-surface-muted;
   }
-  
+
   :deep(.el-table__body-wrapper) {
-    td {
-      color: @el-text-color-regular;
-    }
-    
-    .el-table__row:hover {
-      > td {
-        background-color: @el-fill-color-lighter;
-      }
-    }
-    
-    // Selection checkbox column
-    .el-table-column--selection {
-      .el-checkbox {
-        .el-checkbox__input.is-checked {
-          .el-checkbox__inner {
-            background-color: @el-color-primary;
-            border-color: @el-color-primary;
-          }
-        }
-      }
-    }
+    .scrollbar-style();
   }
-  
-  // Loading overlay
-  :deep(.el-loading-mask) {
-    background-color: rgba(255, 255, 255, 0.9);
-    
-    .el-loading-spinner {
-      .circular circle {
-        stroke: @el-color-primary;
-      }
-    }
-  }
-  
-  // Expand icon
-  :deep(.el-table__expand-icon) {
-    color: @el-text-color-secondary;
-    
-    &:hover {
-      color: @el-color-primary;
-    }
-    
-    &.el-table__expand-icon--expanded {
-      transform: rotate(90deg);
-    }
-  }
-}
\ No newline at end of file
+}
diff --git a/src/vue/projects/main.ts b/src/vue/projects/main.ts
index 2cb4a0e..cbdef49 100644
--- a/src/vue/projects/main.ts
+++ b/src/vue/projects/main.ts
@@ -1,9 +1,10 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import '../styles/theme.css'
+import { createApp } from 'vue';
+import App from './App.vue';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import '../styles/global.less';
+
+const app = createApp(App);
+app.use(ElementPlus);
+app.mount('#app');
 
-const app = createApp(App)
-app.use(ElementPlus)
-app.mount('#app')
\ No newline at end of file
diff --git a/src/vue/setting/App.vue b/src/vue/setting/App.vue
index 1604c71..0f89edf 100644
--- a/src/vue/setting/App.vue
+++ b/src/vue/setting/App.vue
@@ -1,14 +1,17 @@
 <template>
-    <div>
+    <div class="rt-page setting-page">
         <router-view></router-view>
     </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUpdated } from 'vue';
+import { useTheme } from '../composables/useTheme';
 import { extensionInfo, envInfo } from "./data";
 import { sendCommand } from '../api/vscode';
 
+useTheme();
+
 onUpdated(() => {
     console.log('App updated');
 });
diff --git a/src/vue/setting/main.ts b/src/vue/setting/main.ts
index 72203e2..7429d17 100644
--- a/src/vue/setting/main.ts
+++ b/src/vue/setting/main.ts
@@ -1,11 +1,12 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import '../styles/theme.css'
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import '../styles/global.less';
+
+const app = createApp(App);
+app.use(router);
+app.use(ElementPlus);
+app.mount('#app');
 
-const app = createApp(App)
-app.use(router)
-app.use(ElementPlus)
-app.mount('#app')
diff --git a/src/vue/setting/view/environment/index.less b/src/vue/setting/view/environment/index.less
index ae2c3a5..c049c4e 100644
--- a/src/vue/setting/view/environment/index.less
+++ b/src/vue/setting/view/environment/index.less
@@ -1,269 +1,234 @@
+@import '../../../styles/mixins.less';
+
 .content {
+  width: 100%;
+  height: 100%;
+  padding-bottom: @spacing-xl;
+
+  .body-box {
     width: 100%;
-    height: 100%;
-    background-color: var(--app-bg);
-    color: var(--app-fg);
-
-    .body-box {
-        width: 100%;
-        min-width: 800px;
-
-        .rt-config-box {
-            margin-bottom: 20px;
-
-            .config-card {
-                background-color: var(--app-panel-bg);
-                border: 1px solid var(--app-border);
-                border-radius: 6px;
-                padding: 20px;
-
-                .card-header {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: flex-start;
-                    margin-bottom: 16px;
-
-                    .card-title {
-                        margin: 0;
-                        font-size: 16px;
-                        font-weight: bold;
-                        color: var(--app-fg);
-                        padding-top: 10px;
-                    }
-                    
-                    .el-button {
-                        min-width: 120px;
-                    }
-                }
-
-                .config-content {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 8px;
-
-                    .config-item {
-                        display: flex;
-                        align-items: center;
-                        font-size: 14px;
-
-                        label {
-                            width: 80px;
-                            font-weight: 500;
-                            color: var(--app-fg-secondary);
-                        }
-
-                        span {
-                            color: var(--app-fg);
-                            flex: 1;
-                        }
-                    }
-                }
-            }
+    min-width: 800px;
+    display: flex;
+    flex-direction: column;
+    row-gap: @spacing-xl;
+  }
+}
+
+.rt-config-box {
+  .config-card {
+    .card-container();
+
+    .card-header {
+      .card-header();
+      margin-bottom: @spacing-base;
+
+      .card-title {
+        .text-title();
+        padding-top: @spacing-sm;
+      }
+
+      .el-button {
+        min-width: 100px;
+        width: 100px;
+      }
+    }
+
+    .config-content {
+      display: flex;
+      flex-direction: column;
+      row-gap: @spacing-sm;
+
+      .config-item {
+        display: flex;
+        align-items: center;
+        column-gap: @spacing-sm;
+        font-size: @font-size-base;
+        color: @color-text-primary;
+
+        label {
+          width: 80px;
+          font-weight: 500;
+          color: @color-text-secondary;
         }
 
-        .env-status-box {
-            background-color: var(--app-panel-bg);
-            border: 1px solid var(--app-border);
-            border-radius: 6px;
-            padding: 20px;
-            margin-bottom: 20px;
-
-            .status-header {
-                display: flex;
-                justify-content: space-between;
-                align-items: flex-start;
-                font-size: 14px;
-                color: var(--app-fg);
-
-                .info-content {
-                    flex: 1;
-                    padding-top: 10px;
-
-                    .status-title {
-                        width: 100%;
-                        margin-bottom: 8px;
-                        font-weight: bold;
-                        color: var(--app-fg);
-                    }
-
-                    .info-text {
-                        display: flex;
-                        flex-direction: column;
-                        row-gap: 4px;
-                        list-style: none;
-                        margin-left: 16px;
-                        color: var(--app-fg);
-                    }
-                }
-
-                .env-actions {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 10px;
-                    min-width: 120px;
-                    
-                    .el-button {
-                        min-width: 120px;
-                    }
-                }
-            }
-
-            .progress-box {
-                width: 100%;
-                display: flex;
-                flex-direction: column;
-                margin-top: 16px;
-
-                .progress-status {
-                    font-weight: bold;
-                    color: var(--app-info);
-                    margin-bottom: 8px;
-                }
-
-                .progress-log {
-                    background-color: var(--app-input-bg);
-                    border: 1px solid var(--app-border);
-                    border-radius: 4px;
-                    padding: 8px;
-                    font-family: monospace;
-                    font-size: 12px;
-
-                    .log-title {
-                        font-weight: bold;
-                        color: var(--app-fg);
-                        margin-bottom: 8px;
-                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-                    }
-
-                    .log-header {
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-                        margin-bottom: 8px;
-
-                        .log-title {
-                            margin-bottom: 0;
-                        }
-
-                        .log-actions {
-                            display: flex;
-                            gap: 8px;
-                            align-items: center;
-                        }
-                    }
-
-                    .log-content {
-                        max-height: 200px;
-                        overflow-y: auto;
-                        border: 1px solid var(--app-border);
-                        border-radius: 3px;
-                        padding: 8px;
-                        background-color: var(--app-bg);
-                    }
-
-                    .log-message {
-                        margin-bottom: 2px;
-                        color: var(--app-fg-secondary);
-                        white-space: pre-wrap;
-                        line-height: 1.4;
-                        
-                        &:last-child {
-                            margin-bottom: 0;
-                        }
-                    }
-
-                    .terminal-container {
-                        height: 400px;
-                        border: 1px solid #ddd;
-                        border-radius: 3px;
-                        overflow: hidden;
-                        background-color: #1e1e1e;
-                        
-                        :deep(.xterm) {
-                            padding: 8px;
-                            height: 100%;
-                        }
-
-                        :deep(.xterm-viewport) {
-                            overflow-y: auto;
-                        }
-                        
-                        :deep(.xterm-screen) {
-                            height: 100%;
-                        }
-                    }
-                }
-
-                :deep(.el-progress__text) {
-                    color: var(--app-fg);
-                }
-            }
+        span {
+          flex: 1;
         }
+      }
     }
-
-    .form-box {
-        width: 100%;
-        margin-bottom: 30px;
-        padding: 24px 24px 0 0;
-        box-sizing: border-box;
-        background-color: var(--app-panel-bg);
-
-        .row-box {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            column-gap: 14px;
-
-            .el-input {
-                flex: 1;
-            }
+  }
+}
+
+.env-status-box {
+  .card-container();
+  display: flex;
+  flex-direction: column;
+  row-gap: @spacing-lg;
+
+  .status-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: @spacing-xl;
+    font-size: @font-size-base;
+    color: @color-text-secondary;
+
+    .info-content {
+      flex: 1;
+      padding-top: @spacing-sm;
+
+      .status-title {
+        margin: 0 0 @spacing-xs;
+        font-weight: 600;
+        color: @color-text-primary;
+      }
+
+      .info-text {
+        .tag-list();
+        margin-left: 0;
+
+        li {
+          color: @color-text-secondary;
         }
+      }
+    }
 
-        .el-input {
-            height: 40px;
-        }
+    .env-actions {
+      display: flex;
+      align-items: center;
+
+      .el-button {
+        min-width: 120px;
+      }
+
+      .env-actions-group {
+        display: flex;
+        gap: @spacing-sm;
 
-        .el-input__wrapper {
-            background-color: var(--app-input-bg) !important;
-            border-color: var(--app-input-border) !important;
-            box-shadow: none !important;
-            
-            &:hover {
-                border-color: var(--app-link) !important;
-            }
+        .el-button {
+          min-width: 100px;
         }
-        
-        .el-input__inner {
-            background-color: transparent !important;
-            color: var(--app-fg) !important;
+      }
+    }
+  }
+
+  .progress-box {
+    display: flex;
+    flex-direction: column;
+    row-gap: @spacing-sm;
+
+    .progress-status {
+      font-weight: 600;
+      color: @color-text-primary;
+    }
+
+    .progress-log {
+      .surface-muted(@spacing-sm);
+      display: flex;
+      flex-direction: column;
+      row-gap: @spacing-sm;
+      font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
+      font-size: @font-size-extra-small;
+
+      .log-header {
+        .flex-between();
+        align-items: center;
+
+        .log-title {
+          margin: 0;
+          font-weight: 600;
+          color: @color-text-primary;
         }
 
-        .el-input.is-disabled .el-input__wrapper {
-            background-color: var(--app-hover-bg) !important;
-            cursor: not-allowed;
+        .log-actions {
+          display: flex;
+          column-gap: @spacing-sm;
+          align-items: center;
+        }
+      }
+
+      .log-content {
+        max-height: 200px;
+        overflow-y: auto;
+        padding: @spacing-sm;
+        border-radius: @border-radius-small;
+        background-color: @color-surface;
+        .scrollbar-style();
+      }
+
+      .log-message {
+        margin: 0;
+        white-space: pre-wrap;
+        line-height: 1.4;
+      }
+
+      .terminal-container {
+        height: 400px;
+        border-radius: @border-radius-base;
+        overflow: hidden;
+        background-color: @color-surface;
+
+        :deep(.xterm) {
+          padding: @spacing-sm;
+          height: 100%;
         }
 
-        .el-input.is-disabled .el-input__inner {
-            color: var(--app-fg-disabled) !important;
-            cursor: not-allowed;
+        :deep(.xterm-viewport) {
+          overflow-y: auto;
         }
 
-        :deep(.el-form-item__label) {
-            justify-content: flex-start;
-            color: var(--app-fg) !important;
-            font-weight: 500;
+        :deep(.xterm-screen) {
+          height: 100%;
         }
+      }
     }
+  }
+}
+
+.form-box {
+  .card-container();
+  margin-bottom: @spacing-xl;
+  padding: @spacing-xl;
+  display: flex;
+  flex-direction: column;
+  row-gap: @spacing-base;
+
+  .row-box {
+    display: flex;
+    align-items: center;
+    column-gap: @spacing-base;
+    width: 100%;
 
-    .dialog-footer {
-        display: flex;
-        justify-content: flex-end;
-        column-gap: 14px;
+    .el-input {
+      flex: 1;
     }
 
     .el-button {
-        min-width: 120px;
-        height: 40px;
-        margin: 0;
+      min-width: 80px;
     }
-}
\ No newline at end of file
+  }
+
+  :deep(.el-input) {
+    height: 40px;
+  }
+
+  :deep(.el-form-item__label) {
+    justify-content: flex-start;
+    font-weight: 500;
+    color: @color-text-secondary;
+  }
+
+  :deep(.el-form-item__content) {
+    flex: 1;
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  column-gap: @spacing-base;
+}
+
+.el-button {
+  min-width: 120px;
+}
diff --git a/src/vue/setting/view/environment/index.vue b/src/vue/setting/view/environment/index.vue
index 6f600a1..cb418d8 100644
--- a/src/vue/setting/view/environment/index.vue
+++ b/src/vue/setting/view/environment/index.vue
@@ -31,11 +31,11 @@
                     <div class="info-content">
                         <p class="status-title">RT-Thread Env 状态：</p>
                         <ul class="info-text">
-                            <li v-if="envInfo.envStatus.installed" style="color: #67c23a;">
-                                ✅ 已安装 - 版本 {{ envInfo.envStatus.envVersion || 'Unknown' }}
+                            <li v-if="envInfo.envStatus.installed">
+                                <el-tag type="success" effect="plain">✅ 已安装 - 版本 {{ envInfo.envStatus.envVersion || 'Unknown' }}</el-tag>
                             </li>
-                            <li v-else style="color: #e6a23c;">
-                                ❌ 未安装
+                            <li v-else>
+                                <el-tag type="warning" effect="plain">❌ 未安装</el-tag>
                             </li>
                             <li>安装路径: {{ envInfo.envStatus.path }}</li>
                             <li v-if="envInfo.envStatus.envGitRev">
@@ -46,29 +46,29 @@
 
                     <!-- Env 操作按钮区域 -->
                     <div class="env-actions">
-                        <el-button 
-                            v-if="!envInfo.envStatus.installed" 
-                            type="primary" 
+                        <el-button
+                            v-if="!envInfo.envStatus.installed"
+                            type="primary"
                             :loading="envInfo.isInstalling"
                             @click="installEnvFunction">
                             {{ envInfo.isInstalling ? '安装中...' : '安装 Env' }}
                         </el-button>
-                        <template v-else>
-                            <el-button 
-                                type="primary" 
-                                plain 
+                        <div v-else class="env-actions-group">
+                            <el-button
+                                type="primary"
+                                plain
                                 :disabled="envInfo.isInstalling"
                                 @click="updateEnvFunction">
                                 更新 Env
                             </el-button>
-                            <el-button 
-                                type="danger" 
-                                plain 
+                            <el-button
+                                type="danger"
+                                plain
                                 :disabled="envInfo.isInstalling"
                                 @click="deleteEnvFunction">
                                 删除 Env
                             </el-button>
-                        </template>
+                        </div>
                     </div>
                 </div>
 
diff --git a/src/vue/setting/view/layout/index.less b/src/vue/setting/view/layout/index.less
index 4583725..794069f 100644
--- a/src/vue/setting/view/layout/index.less
+++ b/src/vue/setting/view/layout/index.less
@@ -1,97 +1,49 @@
-.common-layout {
-    background-color: var(--app-bg);
-    color: var(--app-fg);
-    min-height: 100vh;
-
-    .header_box {
-        display: flex;
-        align-items: center;
-        background: var(--app-bg);
-        height: 86px;
-        border-bottom: 1px solid var(--app-border);
-
-        .header_logo {
-            display: flex;
-            align-items: center;
-            column-gap: 12px;
-            font-size: 18px;
-            color: var(--app-fg);
-
-            .logo_img {
-                width: 228px;
-                height: 68px;
-            }
-
-            .logo_text {
-                color: var(--app-fg);
-                padding-top: 15px;
-
-                p {
-                    font-size: 18px;
-                    color: var(--app-fg);
-                }
-
-                span {
-                    font-size: 12px;
-                    color: var(--app-fg-secondary);
-                }
-            }
-        }
+@import '../../../styles/mixins.less';
 
+.common-layout {
+  min-height: 100vh;
+  background-color: @color-surface;
+  color: @color-text-primary;
+
+  .el-aside {
+    width: 100%;
+    padding: 0 @spacing-xxl;
+    transition: @transition-all;
+
+    .el-menu {
+      background-color: transparent;
+      border: none !important;
+      color: @color-text-secondary;
     }
 
-    .el-aside {
-        width: 100%;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 300ms;
-        background: var(--app-bg);
-        padding: 0 55px;
-        border-bottom: 1px solid var(--app-border);
-
-        .el-menu {
-            background-color: transparent !important;
-            border: none !important;
-        }
-
-        .el-menu-item {
-            color: var(--app-fg) !important;
-            background: transparent !important;
-            transition: all 0.2s;
-
-            .title {
-                font-size: 14px;
-                color: inherit;
-            }
-
-            &:hover {
-                background: var(--app-hover-bg) !important;
-                color: var(--app-link) !important;
-            }
-
-            &.is-active {
-                background: var(--app-selection-bg) !important;
-                color: var(--app-link) !important;
-                font-weight: 500;
-                
-                .title {
-                    color: var(--app-link) !important;
-                }
-            }
-        }
-
+    .el-menu-item {
+      transition: @transition-all;
+      border-radius: @border-radius-base;
+      color: @color-text-secondary;
+
+      .title {
+        font-size: @font-size-base;
+      }
+
+      &:hover {
+        background-color: @color-surface-muted;
+        color: @color-text-primary;
+      }
+
+      &.is-active {
+        font-weight: 600;
+        color: @color-accent;
+        background-color: color-mix(in srgb, @color-accent 12%, transparent);
+      }
     }
+  }
 
-    .container_main {
-        width: 100%;
-        background: var(--app-bg);
-
-        .main_box {
-            width: 100%;
-            background: var(--app-bg);
-            padding: 14px 55px;
-            color: var(--app-fg);
-        }
+  .container_main {
+    width: 100%;
 
+    .main_box {
+      width: 100%;
+      padding: @spacing-lg @spacing-xxl;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/vue/setting/view/layout/index.vue b/src/vue/setting/view/layout/index.vue
index 7d3d55b..4cabea9 100644
--- a/src/vue/setting/view/layout/index.vue
+++ b/src/vue/setting/view/layout/index.vue
@@ -7,15 +7,15 @@
           :collapse="isSidebarOpen"
           :collapse-transition="false"
           router
-          :default-active="defaultActive"
+          :default-active="activeMenu"
           style="border: none"
           mode="horizontal"
         >
           <el-menu-item
             v-for="item in list"
             :key="item.path"
-            :index="item.path"
-            :route="item.path"
+            :index="item.redirect || item.path"
+            :route="item.redirect || item.path"
           >
             <span class="title">{{ item.meta.title }}</span>
           </el-menu-item>
@@ -37,10 +37,10 @@ import { imgUrl } from '../../../assets/img'
 import Banner from '../../../components/Banner.vue';
 
 interface MenuRoute {
-  path: string
-  redirect?: string
-  children: any
-  meta: any
+    path: string
+    redirect?: string
+    children: any
+    meta: any
 }
 
 const route = useRoute()
@@ -49,59 +49,56 @@ const isSidebarOpen = ref(false)
 
 type ListItemType = MenuRoute & { icon?: string }
 const list: any = computed(() => {
-  return getMenuList(routes)
+    return getMenuList(routes)
 })
 
-// 使用 ref 来存储当前激活的菜单项
-const activeMenu = ref('')
+const activeMenu = ref('/environment')
 
-// 计算默认激活的菜单项
-const defaultActive = computed(() => {
-  return activeMenu.value || route.path || '/environment'
-})
+const resolveActivePath = (path?: string): string => {
+    if (!path || path === '/') {
+        return '/environment'
+    }
+    return path
+}
 
-// 在组件挂载后设置默认激活菜单
 onMounted(() => {
-  // 如果当前路径是根路径或没有路径，设置为环境工具
-  if (!route.path || route.path === '/') {
-    activeMenu.value = '/environment'
-    // 确保路由也跳转到环境工具
-    router.push('/environment')
-  } else {
-    activeMenu.value = route.path
-  }
+    const resolvedPath = resolveActivePath(route.path)
+    activeMenu.value = resolvedPath
+    if (resolvedPath !== route.path) {
+        router.replace(resolvedPath)
+    }
 })
 
-// 监听路由变化，同步更新激活菜单
-watch(() => route.path, (newPath) => {
-  if (newPath) {
-    activeMenu.value = newPath
-  }
-})
+watch(
+    () => route.path,
+    (newPath) => {
+        activeMenu.value = resolveActivePath(newPath)
+    }
+)
 
 const getMenuList = (list: MenuRoute[], basePath?: string): ListItemType[] => {
-  if (!list || list.length === 0) {
-    return []
-  }
-  list.sort((a, b) => {
-    return (a.meta?.orderNo || 0) - (b.meta?.orderNo || 0)
-  })
-  return list
-    .map((item) => {
-      const path =
-        basePath && !item.path.includes(basePath)
-          ? `${basePath}/${item.path}`
-          : item.path
-      return {
-        path,
-        title: item.meta?.title,
-        icon: item.meta?.icon,
-        children: getMenuList(item.children, path),
-        meta: item.meta,
-        redirect: item.redirect
-      }
+    if (!list || list.length === 0) {
+        return []
+    }
+    list.sort((a, b) => {
+        return (a.meta?.orderNo || 0) - (b.meta?.orderNo || 0)
     })
-    .filter((item) => item.meta && item.meta.hidden !== true)
+    return list
+        .map((item) => {
+            const path =
+                basePath && !item.path.includes(basePath)
+                    ? `${basePath}/${item.path}`
+                    : item.path
+            return {
+                path,
+                title: item.meta?.title,
+                icon: item.meta?.icon,
+                children: getMenuList(item.children, path),
+                meta: item.meta,
+                redirect: item.redirect
+            }
+        })
+        .filter((item) => item.meta && item.meta.hidden !== true)
 }
 </script>
 
diff --git a/src/vue/setting/view/sdk/index.less b/src/vue/setting/view/sdk/index.less
index 52f484c..21362e1 100644
--- a/src/vue/setting/view/sdk/index.less
+++ b/src/vue/setting/view/sdk/index.less
@@ -1,304 +1,226 @@
-/* SDK管理页面样式 */
+@import '../../../styles/mixins.less';
+
 .sdk-container {
-    width: 100%;
-    height: 100%;
-    padding: 20px;
-    background-color: var(--app-bg);
-    color: var(--app-fg);
-    box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: @spacing-xl;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  row-gap: @spacing-lg;
 }
 
-/* 页面头部 */
 .sdk-header {
-    background-color: var(--app-panel-bg);
-    border-radius: 8px 8px 0 0;
-    padding: 20px 24px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border: 1px solid var(--app-border);
-    border-bottom: 1px solid var(--app-border);
-}
-
-.sdk-title {
-    font-size: 20px;
-    font-weight: 600;
-    color: var(--app-fg);
+  .card-container();
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: @spacing-lg;
+  padding: @spacing-lg @spacing-xl;
+
+  .sdk-title {
+    .text-title();
     margin: 0;
-}
+  }
 
-.sdk-actions {
+  .sdk-actions {
     display: flex;
-    gap: 12px;
+    column-gap: @spacing-sm;
+  }
 }
 
-/* SDK内容区域 */
 .sdk-content {
-    background-color: var(--app-panel-bg);
-    border-radius: 0 0 8px 8px;
-    overflow: hidden;
-}
+  .table-container();
+  padding: 0;
 
-/* 表格样式 */
-.el-table {
-    font-size: 14px;
+  .el-table {
     background-color: transparent;
-    color: var(--app-fg);
-    
-    .el-table__header {
-        th {
-            background-color: var(--app-table-header-bg);
-            color: var(--app-fg);
-            font-weight: 600;
-            border-bottom: 1px solid var(--app-table-border);
-        }
-    }
-    
-    .el-table__row {
-        background-color: transparent;
-        color: var(--app-fg);
-        
-        &:hover {
-            background-color: var(--app-table-row-hover);
-        }
-    }
-    
-    .el-table__cell {
-        border-color: var(--app-table-border);
-    }
-    
-    // 隐藏默认的展开图标
+
     .el-table__expand-icon {
-        display: none;
+      display: none;
     }
+  }
 }
 
-/* SDK名称样式 */
 .sdk-name {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    
-    .expand-icon {
-        font-size: 12px;
-        color: var(--app-fg-secondary);
-        transition: transform 0.3s;
-        
-        &.el-icon-arrow-down {
-            transform: rotate(90deg);
-        }
-    }
-    
-    span {
-        color: var(--app-fg);
-        font-weight: 500;
+  display: flex;
+  align-items: center;
+  column-gap: @spacing-sm;
+  cursor: pointer;
+  color: @color-text-primary;
+
+  .expand-icon {
+    font-size: @font-size-small;
+    transition: transform @transition-duration ease;
+
+    &.el-icon-arrow-down {
+      transform: rotate(90deg);
     }
+  }
+
+  span {
+    font-weight: 500;
+  }
 }
 
-/* 安装状态样式 */
 .install-status {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    
-    .el-tag {
-        min-width: 60px;
-    }
-    
-    .installed-version {
-        color: var(--app-success);
-        font-weight: 500;
-    }
-    
-    .selected-version {
-        color: var(--app-warning);
-        font-weight: 500;
-    }
+  display: flex;
+  align-items: center;
+  column-gap: @spacing-sm;
+
+  .el-tag {
+    min-width: 60px;
+  }
+
+  .installed-version,
+  .selected-version {
+    font-weight: 500;
+    color: @color-text-secondary;
+  }
 }
 
-/* 展开内容区域 */
 .sdk-expand-content {
-    padding: 20px 40px;
-    background-color: var(--app-hover-bg);
-    border-top: 1px solid var(--app-border);
+  padding: @spacing-lg @spacing-xl;
+  background-color: @color-surface;
 }
 
 .sdk-versions {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    
-    .version-radio-item {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        padding: 4px 8px;
-        border-radius: 4px;
-        transition: background-color 0.2s;
-        
-        &:hover {
-            background-color: var(--app-table-row-hover);
-        }
-        
-        input[type="radio"] {
-            width: 16px;
-            height: 16px;
-            margin: 0;
-            cursor: pointer;
-            accent-color: var(--app-info);
-        }
-        
-        label {
-            margin-left: 8px;
-            font-size: 14px;
-            color: var(--app-fg);
-            cursor: pointer;
-            user-select: none;
-        }
-        
-        input[type="radio"]:checked + label {
-            color: var(--app-link);
-            font-weight: 500;
-        }
-    }
-}
+  display: flex;
+  flex-direction: column;
+  row-gap: @spacing-sm;
 
-/* 空数据状态 */
-.el-table__empty-text {
-    color: var(--app-fg-secondary);
-    font-size: 14px;
-    padding: 40px 0;
-}
+  .version-radio-item {
+    display: flex;
+    align-items: center;
+    column-gap: @spacing-sm;
+    cursor: pointer;
+    padding: @spacing-xs @spacing-sm;
+    border-radius: @border-radius-base;
+    transition: background-color @transition-duration-fast ease;
 
-/* 响应式设计 */
-@media (max-width: 768px) {
-    .sdk-container {
-        padding: 12px;
-    }
-    
-    .sdk-header {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 16px;
-        padding: 16px;
+    &:hover {
+      background-color: @color-surface-muted;
     }
-    
-    .sdk-title {
-        font-size: 18px;
+
+    input[type='radio'] {
+      width: 16px;
+      height: 16px;
+      margin: 0;
+      cursor: pointer;
     }
-    
-    .sdk-actions {
-        width: 100%;
-        
-        .el-button {
-            flex: 1;
-        }
+
+    label {
+      margin-left: @spacing-xs;
+      font-size: @font-size-base;
+      cursor: pointer;
+      user-select: none;
     }
-    
-    .sdk-expand-content {
-        padding: 16px 20px;
+
+    input[type='radio']:checked + label {
+      font-weight: 600;
+      color: @color-accent;
     }
+  }
+}
+
+.el-table__empty-text {
+  font-size: @font-size-base;
+  padding: @spacing-xxl 0;
+  color: @color-text-secondary;
 }
 
-/* 日志模态窗口样式 */
 .sdk-log-dialog {
-    max-width: 1200px;
-    
-    .el-dialog__header {
-        padding: 0;
-        background-color: var(--app-panel-bg);
-        border-bottom: 1px solid var(--app-border);
-    }
-    
-    .el-dialog__body {
-        padding: 0;
-        background-color: var(--app-panel-bg);
-    }
-    
-    .el-dialog__footer {
-        background-color: var(--app-panel-bg);
-        border-top: 1px solid var(--app-border);
-    }
+  max-width: 1200px;
 }
 
 .log-dialog-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
-    
-    .dialog-title {
-        font-size: 18px;
-        font-weight: 600;
-        color: var(--app-fg);
-    }
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: @spacing-lg;
+
+  .dialog-title {
+    .text-title();
+    font-size: @font-size-large;
+  }
 }
 
 .log-container {
-    background-color: #1e1e1e;
-    border-radius: 4px;
-    padding: 0;
-    height: 60vh;
-    max-height: 600px;
-    min-height: 400px;
-    overflow: hidden;
-    position: relative;
-    box-shadow: var(--app-shadow);
+  border-radius: @border-radius-base;
+  height: 60vh;
+  max-height: 600px;
+  min-height: 400px;
+  overflow: hidden;
+  position: relative;
+  background-color: @color-surface;
 }
 
 .terminal-content {
+  height: 100%;
+  width: 100%;
+
+  .xterm {
     height: 100%;
-    width: 100%;
-    
-    // xterm.js 终端样式
-    .xterm {
-        height: 100%;
-        padding: 10px;
-    }
-    
-    .xterm-viewport {
-        overflow-y: auto !important;
-        
-        &::-webkit-scrollbar {
-            width: 10px;
-        }
-        
-        &::-webkit-scrollbar-track {
-            background: #2d2d30;
-            border-radius: 4px;
-        }
-        
-        &::-webkit-scrollbar-thumb {
-            background: #424242;
-            border-radius: 4px;
-            
-            &:hover {
-                background: #4e4e52;
-            }
-        }
-    }
+    padding: @spacing-sm;
+  }
+
+  .xterm-viewport {
+    overflow-y: auto !important;
+  }
 }
 
 .log-dialog-footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-    padding: 20px;
-    
-    .update-status {
-        padding: 10px 20px;
-        font-size: 14px;
-        
-        i {
-            margin-right: 8px;
-            animation: rotate 1s linear infinite;
-        }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: @spacing-base;
+  padding: @spacing-lg;
+
+  .update-status {
+    padding: @spacing-sm @spacing-base;
+    font-size: @font-size-base;
+
+    i {
+      margin-right: @spacing-xs;
+      animation: rotate 1s linear infinite;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .sdk-container {
+    padding: @spacing-lg;
+  }
+
+  .sdk-header {
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: @spacing-sm;
+    padding: @spacing-lg;
+  }
+
+  .sdk-title {
+    font-size: @font-size-large;
+  }
+
+  .sdk-actions {
+    width: 100%;
+
+    .el-button {
+      flex: 1;
     }
+  }
+
+  .sdk-expand-content {
+    padding: @spacing-lg;
+  }
 }
 
 @keyframes rotate {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-}
\ No newline at end of file
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/vue/setting/view/toolchains/index.less b/src/vue/setting/view/toolchains/index.less
index 8e03f19..068f40a 100644
--- a/src/vue/setting/view/toolchains/index.less
+++ b/src/vue/setting/view/toolchains/index.less
@@ -1,204 +1,124 @@
-/* 工具链管理页面样式 */
+@import '../../../styles/mixins.less';
+
 .content {
-    padding: 20px;
-    height: 100%;
-    box-sizing: border-box;
-    background-color: var(--app-bg);
-    color: var(--app-fg);
+  padding: @spacing-xl;
+  height: 100%;
+  box-sizing: border-box;
 }
 
 .body-box {
-    background-color: var(--app-panel-bg);
-    border-radius: 8px;
-    padding: 24px;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    box-shadow: var(--app-shadow);
-    border: 1px solid var(--app-border);
+  .card-container();
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  row-gap: @spacing-lg;
 }
 
-/* 页面头部 */
 .header-section {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 24px;
-    padding-bottom: 16px;
-    border-bottom: 1px solid var(--app-border);
+  .card-header();
+  margin-bottom: 0;
+  padding-bottom: @spacing-base;
+  border-bottom: 1px solid @color-border;
 }
 
 .page-title {
-    font-size: 20px;
-    font-weight: 600;
-    color: var(--app-fg);
-    margin: 0;
+  .text-title();
+  margin: 0;
 }
 
 .header-actions {
-    display: flex;
-    gap: 12px;
+  display: flex;
+  column-gap: @spacing-sm;
 }
 
-/* 表格容器 */
 .table-container {
-    flex: 1;
-    overflow: auto;
-    margin-bottom: 20px;
+  .table-container();
+  flex: 1;
+  overflow: auto;
 }
 
-/* 自定义表格样式 */
 .el-table {
-    font-size: 14px;
-    background-color: transparent;
-    
-    .el-table__header {
-        th {
-            background-color: var(--app-table-header-bg);
-            color: var(--app-fg);
-            font-weight: 600;
-            border-color: var(--app-table-border);
-        }
-    }
-    
-    .el-table__row {
-        background-color: transparent;
-        color: var(--app-fg);
-        
-        &:hover {
-            background-color: var(--app-table-row-hover);
-        }
-    }
-    
-    .el-table__cell {
-        border-color: var(--app-table-border);
-    }
+  font-size: @font-size-base;
+  background-color: transparent;
 }
 
-/* 操作按钮样式 */
-.el-button--primary.is-link {
-    color: var(--app-link);
-    
-    &:hover {
-        color: var(--app-link-hover);
-    }
-}
+.toolchain-form {
+  padding: @spacing-base 0;
+
+  .el-form-item {
+    margin-bottom: @spacing-xl;
 
-.el-button--danger.is-link {
-    color: var(--app-error);
-    
-    &:hover {
-        opacity: 0.8;
+    &:last-child {
+      margin-bottom: 0;
     }
-}
+  }
 
+  .el-form-item__label {
+    font-weight: 500;
+    color: @color-text-secondary;
+  }
 
-/* 对话框表单样式 */
-.toolchain-form {
-    padding: 16px 0;
-    
-    .el-form-item {
-        margin-bottom: 24px;
-        
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-    
-    .el-form-item__label {
-        font-weight: 500;
-        color: var(--app-fg) !important;
-    }
-    
-    .el-input__wrapper {
-        background-color: var(--app-input-bg) !important;
-        border-color: var(--app-input-border) !important;
-        box-shadow: none !important;
-        
-        &:hover {
-            border-color: var(--app-link) !important;
-        }
-    }
-    
-    .el-input__inner {
-        height: 36px;
-        background-color: transparent !important;
-        color: var(--app-fg) !important;
-    }
-    
-    .el-textarea__inner {
-        font-family: inherit;
-        line-height: 1.5;
-        background-color: var(--app-input-bg) !important;
-        color: var(--app-fg) !important;
-        border-color: var(--app-input-border) !important;
-        
-        &:hover {
-            border-color: var(--app-link) !important;
-        }
-        
-        &:focus {
-            border-color: var(--app-link) !important;
-            outline: none;
-        }
-    }
+  .el-input__inner {
+    height: 36px;
+  }
+
+  .el-textarea__inner {
+    font-family: inherit;
+    line-height: @line-height-normal;
+  }
 }
 
-/* 路径输入组 */
 .path-input-group {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    
-    .el-input {
-        flex: 1;
-    }
-    
-    .el-button {
-        min-width: 80px;
-    }
+  display: flex;
+  column-gap: @spacing-sm;
+  align-items: center;
+
+  .el-input {
+    flex: 1;
+  }
+
+  .el-button {
+    min-width: 80px;
+  }
 }
 
-/* 对话框底部 */
 .dialog-footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
+  display: flex;
+  justify-content: flex-end;
+  column-gap: @spacing-sm;
 }
 
-/* 空数据状态 */
 .el-table__empty-text {
-    color: var(--app-fg-secondary);
-    font-size: 14px;
-    padding: 40px 0;
+  font-size: @font-size-base;
+  padding: @spacing-xxl 0;
+  color: @color-text-secondary;
 }
 
-/* 响应式设计 */
 @media (max-width: 768px) {
-    .content {
-        padding: 12px;
-    }
-    
-    .body-box {
-        padding: 16px;
-    }
-    
-    .header-section {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 12px;
-    }
-    
-    .page-title {
-        font-size: 18px;
-    }
-    
-    .header-actions {
-        width: 100%;
-        flex-direction: column;
-        
-        .el-button {
-            width: 100%;
-        }
+  .content {
+    padding: @spacing-lg;
+  }
+
+  .body-box {
+    padding: @spacing-lg;
+  }
+
+  .header-section {
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: @spacing-sm;
+  }
+
+  .page-title {
+    font-size: @font-size-large;
+  }
+
+  .header-actions {
+    width: 100%;
+    flex-direction: column;
+
+    .el-button {
+      width: 100%;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/vue/styles/global.less b/src/vue/styles/global.less
new file mode 100644
index 0000000..b1bbf4f
--- /dev/null
+++ b/src/vue/styles/global.less
@@ -0,0 +1,143 @@
+@import './variables.less';
+@import './mixins.less';
+
+:root {
+  font-family: @font-family-base;
+  color-scheme: light dark;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background-color: @color-surface;
+  color: @color-text-primary;
+  font-family: @font-family-base;
+  font-size: @font-size-base;
+  line-height: @line-height-normal;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+#app {
+  min-height: 100vh;
+}
+
+a {
+  color: @color-link;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background-color: @color-border;
+  margin: @spacing-lg 0;
+}
+
+code,
+pre {
+  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier New', monospace;
+}
+
+.rt-page {
+  .container-base();
+  padding: 0;
+  min-height: 100vh;
+}
+
+.rt-page__content {
+  padding: @spacing-xl;
+  color: @color-text-primary;
+}
+
+.rt-stack {
+  display: flex;
+  flex-direction: column;
+  row-gap: @spacing-lg;
+}
+
+.rt-card {
+  background-color: @color-surface-alt;
+  border: 1px solid @color-border;
+  border-radius: @border-radius-base;
+  padding: @spacing-lg;
+  // box-shadow: 0 12px 28px 0 @shadow-soft;
+}
+
+.rt-card--muted {
+  background-color: @color-surface-muted;
+}
+
+.rt-section-title {
+  .text-title();
+  margin-bottom: @spacing-sm;
+}
+
+.rt-section-subtitle {
+  .text-subtitle();
+  margin-bottom: @spacing-base;
+}
+
+.el-button--primary {
+  background-color: @color-accent;
+  border-color: @color-accent;
+  color: @color-text-inverse;
+  transition: @transition-all;
+
+  &:hover,
+  &:focus-visible {
+    background-color: @color-accent-hover;
+    border-color: @color-accent-hover;
+  }
+}
+
+.el-button.is-plain.el-button--primary {
+  color: @color-accent;
+  background-color: color-mix(in srgb, @color-accent 12%, transparent);
+  border-color: color-mix(in srgb, @color-accent 35%, @color-border);
+
+  &:hover {
+    background-color: color-mix(in srgb, @color-accent 18%, transparent);
+  }
+}
+
+.el-input__wrapper,
+.el-input,
+.el-select {
+  background-color: @color-surface-muted;
+  color: @color-text-primary;
+}
+
+.el-table {
+  background-color: @color-surface-alt;
+  color: @color-text-primary;
+}
+
+.el-table__header th {
+  background-color: @color-surface-muted;
+  color: @color-text-secondary;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: @color-scrollbar;
+  border-radius: @border-radius-base;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
diff --git a/src/vue/styles/mixins.less b/src/vue/styles/mixins.less
index c5d1afc..7698584 100644
--- a/src/vue/styles/mixins.less
+++ b/src/vue/styles/mixins.less
@@ -1,9 +1,9 @@
 // Global Less Mixins for VSCode RT-Smart Extension
-// Reusable style patterns and utilities
+// Reusable style patterns and utilities with theme-aware tokens
 
 @import './variables.less';
 
-// Flexbox mixins
+// Flexbox helpers
 .flex-center() {
   display: flex;
   align-items: center;
@@ -27,36 +27,84 @@
   flex-direction: column;
 }
 
-// Container mixins
+// Layout scaffolding
 .container-base() {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  background-color: @el-bg-color;
-  color: @el-text-color-regular;
+  background-color: @color-surface;
+  color: @color-text-primary;
 }
 
-.panel-container() {
-  padding: @spacing-lg;
-  background-color: @el-bg-color;
-  border: 1px solid @el-border-color-lighter;
+.surface-card(@padding: @spacing-lg) {
+  background-color: @color-surface-alt;
+  border: 1px solid @color-border;
   border-radius: @border-radius-base;
-  box-shadow: @box-shadow-lighter;
+  padding: @padding;
+  // box-shadow: 0 12px 28px 0 @shadow-soft;
 }
 
-.card-container() {
-  padding: @spacing-lg;
-  background-color: @el-bg-color;
-  border: 1px solid @el-border-color-lighter;
+.surface-muted(@padding: @spacing-base) {
+  background-color: @color-surface-muted;
   border-radius: @border-radius-base;
-  transition: @transition-all;
-  
-  &:hover {
-    box-shadow: @box-shadow-light;
-  }
+  padding: @padding;
+}
+
+.section-spacing(@gap: @spacing-xl) {
+  margin-bottom: @gap;
+}
+
+.section-title() {
+  font-size: @font-size-large;
+  font-weight: 600;
+  line-height: @line-height-tight;
+  color: @color-text-primary;
+}
+
+.section-subtitle() {
+  font-size: @font-size-base;
+  font-weight: 400;
+  line-height: @line-height-normal;
+  color: @color-text-secondary;
 }
 
-// Text mixins
+.card-header(@gap: @spacing-lg) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  column-gap: @gap;
+}
+
+.card-title() {
+  .section-title();
+  margin: 0;
+}
+
+.card-actions(@gap: @spacing-sm) {
+  display: flex;
+  align-items: center;
+  column-gap: @gap;
+}
+
+.tag-list(@gap: @spacing-xs) {
+  display: flex;
+  flex-direction: column;
+  row-gap: @gap;
+  margin: 0;
+  padding-left: @spacing-base;
+  list-style: none;
+}
+
+.panel-container() {
+  .surface-card();
+}
+
+.card-container() {
+  .surface-card();
+  transition: all @transition-duration ease;
+}
+
+// Text helpers
 .text-ellipsis() {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -72,39 +120,33 @@
 }
 
 .text-primary() {
-  color: @el-text-color-primary;
+  color: @color-text-primary;
   font-size: @font-size-base;
   line-height: @line-height-normal;
 }
 
 .text-secondary() {
-  color: @el-text-color-secondary;
+  color: @color-text-secondary;
   font-size: @font-size-small;
   line-height: @line-height-normal;
 }
 
 .text-title() {
-  color: @el-text-color-primary;
-  font-size: @font-size-large;
-  font-weight: 500;
-  line-height: @line-height-tight;
+  .section-title();
 }
 
 .text-subtitle() {
-  color: @el-text-color-regular;
-  font-size: @font-size-medium;
-  font-weight: 400;
-  line-height: @line-height-normal;
+  .section-subtitle();
 }
 
-// Button mixins
+// Buttons
 .button-base() {
   padding: @spacing-sm @spacing-base;
   font-size: @font-size-base;
   border-radius: @border-radius-base;
   cursor: pointer;
-  transition: @transition-all;
-  
+  transition: all @transition-duration ease;
+
   &:disabled {
     cursor: not-allowed;
     opacity: 0.6;
@@ -113,41 +155,41 @@
 
 .button-primary() {
   .button-base();
-  background-color: @el-color-primary;
-  color: white;
-  border: 1px solid @el-color-primary;
-  
+  background-color: @color-accent;
+  color: @color-text-inverse;
+  border: 1px solid @color-accent;
+
   &:hover:not(:disabled) {
-    background-color: @el-color-primary-light-3;
-    border-color: @el-color-primary-light-3;
+    background-color: @color-accent-hover;
+    border-color: @color-accent-hover;
   }
-  
+
   &:active:not(:disabled) {
-    background-color: @el-color-primary-dark-2;
-    border-color: @el-color-primary-dark-2;
+    background-color: color-mix(in srgb, @color-accent 65%, #000000);
+    border-color: color-mix(in srgb, @color-accent 65%, #000000);
   }
 }
 
 .button-default() {
   .button-base();
-  background-color: @el-bg-color;
-  color: @el-text-color-regular;
-  border: 1px solid @el-border-color;
-  
+  background-color: @color-surface;
+  color: @color-text-primary;
+  border: 1px solid @color-border;
+
   &:hover:not(:disabled) {
-    color: @el-color-primary;
-    border-color: @el-color-primary-light-7;
-    background-color: @el-color-primary-light-9;
+    color: @color-accent;
+    border-color: color-mix(in srgb, @color-accent 35%, @color-border);
+    background-color: color-mix(in srgb, @color-accent 12%, transparent);
   }
 }
 
-// Form mixins
+// Forms
 .form-item() {
   margin-bottom: @spacing-lg;
-  
+
   .el-form-item__label {
-    color: @el-text-color-regular;
     font-size: @font-size-base;
+    color: @color-text-secondary;
   }
 }
 
@@ -155,138 +197,136 @@
   width: 100%;
   padding: @spacing-sm @spacing-md;
   font-size: @font-size-base;
-  color: @el-text-color-regular;
-  background-color: @el-bg-color;
-  border: 1px solid @el-border-color;
+  color: @color-text-primary;
+  background-color: @color-surface;
+  border: 1px solid @color-border;
   border-radius: @border-radius-base;
-  transition: @transition-border;
-  
+  transition: border-color @transition-duration-fast ease;
+
   &:focus {
     outline: none;
-    border-color: @el-color-primary;
+    border-color: @color-accent;
   }
-  
+
   &:disabled {
-    background-color: @el-fill-color-lighter;
-    color: @el-text-color-placeholder;
+    background-color: @color-surface-muted;
+    color: @color-text-tertiary;
     cursor: not-allowed;
   }
-  
+
   &::placeholder {
-    color: @el-text-color-placeholder;
+    color: @color-text-tertiary;
   }
 }
 
-// Table mixins
+// Tables
 .table-container() {
   width: 100%;
-  background-color: @el-bg-color;
-  border: 1px solid @el-border-color-lighter;
+  background-color: @color-surface-alt;
+  border: 1px solid @color-border;
   border-radius: @border-radius-base;
   overflow: hidden;
-  
+
   .el-table {
     font-size: @font-size-base;
-    
+    background-color: transparent;
+
     th {
-      background-color: @el-fill-color-light;
-      color: @el-text-color-primary;
+      background-color: @color-surface-muted;
+      color: @color-text-secondary;
       font-weight: 500;
     }
-    
+
     td {
-      color: @el-text-color-regular;
+      color: @color-text-primary;
     }
-    
+
     .el-table__row:hover {
-      background-color: @el-fill-color-lighter;
+      background-color: color-mix(in srgb, @color-surface-muted 65%, transparent);
     }
   }
 }
 
-// Dialog mixins
+// Dialogs
 .dialog-container() {
   .el-dialog__header {
     padding: @spacing-lg;
-    border-bottom: 1px solid @el-border-color-lighter;
-    
+    border-bottom: 1px solid @color-border;
+
     .el-dialog__title {
-      color: @el-text-color-primary;
       font-size: @font-size-large;
       font-weight: 500;
+      color: @color-text-primary;
     }
   }
-  
+
   .el-dialog__body {
     padding: @spacing-lg;
-    color: @el-text-color-regular;
+    color: @color-text-primary;
   }
-  
+
   .el-dialog__footer {
     padding: @spacing-md @spacing-lg;
-    border-top: 1px solid @el-border-color-lighter;
+    border-top: 1px solid @color-border;
   }
 }
 
-// List mixins
+// Lists
 .list-container() {
   width: 100%;
-  background-color: @el-bg-color;
+  background-color: @color-surface-alt;
   border-radius: @border-radius-base;
+  border: 1px solid @color-border;
 }
 
 .list-item() {
   padding: @spacing-md @spacing-base;
-  border-bottom: 1px solid @el-border-color-lighter;
-  transition: @transition-all;
+  border-bottom: 1px solid @color-border;
+  transition: background-color @transition-duration-fast ease;
   cursor: pointer;
-  
+
   &:last-child {
     border-bottom: none;
   }
-  
+
   &:hover {
-    background-color: @el-fill-color-lighter;
+    background-color: @color-surface-muted;
   }
-  
+
   &.active {
-    background-color: @el-color-primary-light-9;
-    color: @el-color-primary;
+    background-color: color-mix(in srgb, @color-accent 15%, transparent);
+    color: @color-accent;
   }
 }
 
-// Scrollbar mixins
+// Scrollbars
 .scrollbar-style() {
   &::-webkit-scrollbar {
     width: 8px;
     height: 8px;
   }
-  
+
   &::-webkit-scrollbar-track {
-    background-color: @el-fill-color-lighter;
+    background-color: transparent;
     border-radius: @border-radius-base;
   }
-  
+
   &::-webkit-scrollbar-thumb {
-    background-color: @el-border-color;
+    background-color: @color-scrollbar;
     border-radius: @border-radius-base;
-    
-    &:hover {
-      background-color: @el-border-color-dark;
-    }
   }
 }
 
-// Animation mixins
+// Animations
 .fade-transition() {
-  transition: opacity @transition-duration @transition-function-ease-in-out-bezier;
+  transition: opacity @transition-duration ease-in-out;
 }
 
 .slide-transition() {
-  transition: transform @transition-duration @transition-function-fast-bezier;
+  transition: transform @transition-duration ease;
 }
 
-// Responsive mixins
+// Responsive helpers
 .responsive-hide-mobile() {
   @media (max-width: 768px) {
     display: none;
@@ -299,7 +339,7 @@
   }
 }
 
-// VSCode specific mixins (for compatibility)
+// VS Code compatibility
 .vscode-panel() {
   background-color: @vscode-panel-background;
   border: 1px solid @vscode-panel-border;
@@ -311,7 +351,7 @@
   color: @vscode-sideBar-foreground;
 }
 
-// Utility mixins
+// Utilities
 .clearfix() {
   &::after {
     content: '';
@@ -334,4 +374,4 @@
   -webkit-backface-visibility: hidden;
   perspective: 1000px;
   -webkit-perspective: 1000px;
-}
\ No newline at end of file
+}
diff --git a/src/vue/styles/theme.css b/src/vue/styles/theme.css
deleted file mode 100644
index 45812da..0000000
--- a/src/vue/styles/theme.css
+++ /dev/null
@@ -1,393 +0,0 @@
-/* VS Code Theme Variables Mapping for Vue Components */
-:root {
-  /* Background colors */
-  --app-bg: var(--vscode-editor-background);
-  --app-sidebar-bg: var(--vscode-sideBar-background);
-  --app-panel-bg: var(--vscode-panel-background);
-  --app-input-bg: var(--vscode-input-background);
-  --app-dropdown-bg: var(--vscode-dropdown-background);
-  --app-hover-bg: var(--vscode-list-hoverBackground);
-  --app-selection-bg: var(--vscode-list-activeSelectionBackground);
-  
-  /* Foreground colors */
-  --app-fg: var(--vscode-editor-foreground);
-  --app-fg-secondary: var(--vscode-descriptionForeground);
-  --app-fg-disabled: var(--vscode-disabledForeground);
-  
-  /* Border colors */
-  --app-border: var(--vscode-panel-border, var(--vscode-editorGroup-border));
-  --app-border-light: var(--vscode-widget-border);
-  --app-input-border: var(--vscode-input-border);
-  
-  /* Button colors */
-  --app-button-bg: var(--vscode-button-background);
-  --app-button-fg: var(--vscode-button-foreground);
-  --app-button-hover-bg: var(--vscode-button-hoverBackground);
-  --app-button-secondary-bg: var(--vscode-button-secondaryBackground);
-  --app-button-secondary-fg: var(--vscode-button-secondaryForeground);
-  --app-button-secondary-hover-bg: var(--vscode-button-secondaryHoverBackground);
-  
-  /* Status colors */
-  --app-success: var(--vscode-terminal-ansiGreen, #67c23a);
-  --app-warning: var(--vscode-terminal-ansiYellow, #e6a23c);
-  --app-error: var(--vscode-terminal-ansiRed, #f56c6c);
-  --app-info: var(--vscode-terminal-ansiBlue, #409eff);
-  
-  /* Table colors */
-  --app-table-header-bg: var(--vscode-editor-background);
-  --app-table-row-hover: var(--vscode-list-hoverBackground);
-  --app-table-border: var(--vscode-widget-border);
-  
-  /* Link colors */
-  --app-link: var(--vscode-textLink-foreground);
-  --app-link-hover: var(--vscode-textLink-activeForeground);
-  
-  /* Shadow */
-  --app-shadow: var(--vscode-widget-shadow);
-}
-
-:root {
-  --el-bg-color: var(--app-bg);
-  --el-text-color-primary: var(--app-fg);
-  --el-text-color-regular: var(--app-fg-secondary);
-
-  --el-fill-color-light: var(--app-bg)
-  --el-color-primary: var(--app-fg);
-}
-
-/* Common styles for all components */
-body {
-  background-color: var(--app-bg);
-  color: var(--app-fg);
-  margin: 0;
-  padding: 0;
-}
-
-/* Force apply theme to body and all elements */
-* {
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
-}
-
-/* Element Plus theme overrides */
-
-.el-input__wrapper {
-  background-color: var(--app-input-bg);
-  border-color: var(--app-input-border);
-  box-shadow: none;
-}
-
-.el-input__inner {
-  color: var(--app-fg);
-  background-color: transparent;
-}
-
-.el-input__wrapper:hover {
-  border-color: var(--app-link);
-}
-
-.el-select {
-  --el-select-input-color: var(--app-fg);
-  --el-select-border-color-hover: var(--app-link);
-  --el-select-disabled-border: var(--app-border);
-}
-
-.el-select__wrapper {
-  background-color: var(--app-input-bg) !important;
-  border-color: var(--app-input-border) !important;
-  box-shadow: none !important;
-}
-
-.el-select__wrapper:hover {
-  border-color: var(--app-link) !important;
-}
-
-.el-select__placeholder {
-  color: var(--app-fg-disabled);
-}
-
-.el-select__caret {
-  color: var(--app-fg-secondary);
-}
-
-.el-select-dropdown {
-  background-color: var(--app-dropdown-bg);
-  border-color: var(--app-border);
-}
-
-.el-select-dropdown__item {
-  color: var(--app-fg);
-}
-
-.el-select-dropdown__item:hover {
-  background-color: var(--app-hover-bg);
-}
-
-.el-select-dropdown__item.selected {
-  color: var(--app-link);
-  font-weight: 500;
-}
-
-.el-table {
-  --el-table-bg-color: var(--app-bg);
-  --el-table-text-color: var(--app-fg);
-  --el-table-header-bg-color: var(--app-table-header-bg);
-  --el-table-header-text-color: var(--app-fg);
-  --el-table-row-hover-bg-color: var(--app-table-row-hover);
-  --el-table-border-color: var(--app-table-border);
-  background-color: transparent;
-}
-
-.el-table th.el-table__cell {
-  background-color: var(--app-table-header-bg);
-  color: var(--app-fg);
-}
-
-.el-table tr {
-  background-color: transparent;
-}
-
-.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
-  background-color: var(--app-table-row-hover);
-}
-
-.el-dialog {
-  --el-dialog-bg-color: var(--app-panel-bg);
-  --el-dialog-title-text-color: var(--app-fg);
-  --el-dialog-box-shadow: var(--app-shadow);
-  background-color: var(--app-panel-bg) !important;
-  border: 1px solid var(--app-border);
-  color: var(--app-fg);
-}
-
-.el-dialog__wrapper {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.el-overlay {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-/* Light theme specific dialog overlay */
-body:has(.light-theme) .el-overlay,
-body.light-theme .el-overlay {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-/* Dialog input styles in dialog context */
-.el-dialog .el-input__wrapper {
-  background-color: var(--app-input-bg) !important;
-  border-color: var(--app-input-border) !important;
-}
-
-.el-dialog .el-input__inner {
-  color: var(--app-fg) !important;
-  background-color: transparent !important;
-}
-
-.el-dialog .el-textarea__inner {
-  background-color: var(--app-input-bg) !important;
-  color: var(--app-fg) !important;
-  border-color: var(--app-input-border) !important;
-}
-
-/* Dialog button styles */
-.el-dialog .el-button--default {
-  background-color: var(--app-button-secondary-bg) !important;
-  color: var(--app-button-secondary-fg) !important;
-  border-color: var(--app-border) !important;
-}
-
-.el-dialog .el-button--default:hover {
-  background-color: var(--app-button-secondary-hover-bg) !important;
-  border-color: var(--app-border) !important;
-}
-
-.el-dialog .el-button--primary {
-  background-color: var(--app-button-bg) !important;
-  color: var(--app-button-fg) !important;
-  border-color: var(--app-button-bg) !important;
-}
-
-.el-dialog .el-button--primary:hover {
-  background-color: var(--app-button-hover-bg) !important;
-  border-color: var(--app-button-hover-bg) !important;
-}
-
-.el-dialog .el-button--primary.is-plain {
-  background-color: var(--app-button-secondary-bg) !important;
-  color: var(--app-link) !important;
-  border-color: var(--app-link) !important;
-}
-
-.el-dialog .el-button--primary.is-plain:hover {
-  background-color: var(--app-link) !important;
-  color: var(--app-button-fg) !important;
-  border-color: var(--app-link) !important;
-}
-
-.el-dialog__header {
-  border-bottom: 1px solid var(--app-border);
-  padding: 20px;
-  background-color: var(--app-panel-bg);
-}
-
-.el-dialog__title {
-  color: var(--app-fg) !important;
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.el-dialog__headerbtn {
-  top: 20px;
-  right: 20px;
-  font-size: 20px;
-  color: var(--app-fg-secondary);
-}
-
-.el-dialog__headerbtn:hover {
-  color: var(--app-fg);
-}
-
-.el-dialog__body {
-  color: var(--app-fg);
-  background-color: var(--app-panel-bg);
-  padding: 20px;
-}
-
-.el-dialog__footer {
-  padding: 20px;
-  border-top: 1px solid var(--app-border);
-  background-color: var(--app-panel-bg);
-}
-
-.el-form-item__label {
-  color: var(--app-fg);
-}
-
-.el-checkbox {
-  --el-checkbox-text-color: var(--app-fg);
-  --el-checkbox-checked-text-color: var(--app-fg);
-  --el-checkbox-checked-bg-color: var(--app-info);
-  --el-checkbox-checked-input-border-color: var(--app-info);
-}
-
-.el-checkbox__label {
-  color: var(--app-fg) !important;
-}
-
-.el-checkbox__input.is-checked .el-checkbox__inner {
-  background-color: var(--app-info);
-  border-color: var(--app-info);
-}
-
-.el-checkbox__input.is-disabled .el-checkbox__inner {
-  background-color: var(--app-input-bg);
-  border-color: var(--app-border);
-}
-
-.el-checkbox__input.is-disabled .el-checkbox__label {
-  color: var(--app-fg-disabled);
-}
-
-.el-tag--success {
-  --el-tag-bg-color: var(--app-success);
-  --el-tag-text-color: white;
-  opacity: 0.9;
-}
-
-.el-tag--warning {
-  --el-tag-bg-color: var(--app-warning);
-  --el-tag-text-color: white;
-  opacity: 0.9;
-}
-
-.el-tag--danger {
-  --el-tag-bg-color: var(--app-error);
-  --el-tag-text-color: white;
-  opacity: 0.9;
-}
-
-.el-tag--info {
-  --el-tag-bg-color: var(--app-info);
-  --el-tag-text-color: white;
-  opacity: 0.9;
-}
-
-.el-loading-mask {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-/* Popper and dropdown styles */
-.el-popper {
-  background-color: var(--app-dropdown-bg) !important;
-  border: 1px solid var(--app-border) !important;
-  color: var(--app-fg) !important;
-}
-
-.el-popper__arrow::before {
-  background-color: var(--app-dropdown-bg) !important;
-  border-color: var(--app-border) !important;
-}
-
-/* Message box styles */
-.el-message-box {
-  background-color: var(--app-panel-bg);
-  border: 1px solid var(--app-border);
-}
-
-.el-message-box__header {
-  color: var(--app-fg);
-}
-
-.el-message-box__content {
-  color: var(--app-fg);
-}
-
-.el-message-box__btns .el-button {
-  background-color: var(--app-button-secondary-bg);
-  color: var(--app-button-secondary-fg);
-  border-color: var(--app-border);
-}
-
-.el-message-box__btns .el-button--primary {
-  background-color: var(--app-button-bg);
-  color: var(--app-button-fg);
-  border-color: var(--app-button-bg);
-}
-
-/* Menu styles */
-.el-menu {
-  --el-menu-bg-color: transparent;
-  --el-menu-text-color: var(--app-fg);
-  --el-menu-active-color: var(--app-link);
-  --el-menu-hover-bg-color: var(--app-hover-bg);
-  --el-menu-hover-text-color: var(--app-link);
-  background-color: transparent !important;
-}
-
-.el-menu-item {
-  color: var(--app-fg) !important;
-  background-color: transparent !important;
-}
-
-.el-menu-item:hover {
-  background-color: var(--app-hover-bg) !important;
-  color: var(--app-link) !important;
-}
-
-.el-menu-item.is-active {
-  background-color: var(--app-selection-bg) !important;
-  color: var(--app-link) !important;
-}
-
-.el-menu--horizontal {
-  border-bottom: none !important;
-}
-
-.el-menu--horizontal .el-menu-item {
-  border-bottom: 2px solid transparent;
-}
-
-.el-menu--horizontal .el-menu-item.is-active {
-  border-bottom-color: var(--app-link) !important;
-}
\ No newline at end of file
diff --git a/src/vue/styles/variables.less b/src/vue/styles/variables.less
index 53305e0..1e2d7e5 100644
--- a/src/vue/styles/variables.less
+++ b/src/vue/styles/variables.less
@@ -119,4 +119,25 @@
 @vscode-input-border: var(--vscode-input-border);
 @vscode-button-background: var(--vscode-button-background);
 @vscode-button-foreground: var(--vscode-button-foreground);
-@vscode-button-hoverBackground: var(--vscode-button-hoverBackground);
\ No newline at end of file
+@vscode-button-hoverBackground: var(--vscode-button-hoverBackground);
+
+// Theme tokens synchronized with useTheme palette
+@font-family-base: var(--rt-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+@color-surface: var(--rt-surface, @vscode-editor-background);
+@color-surface-alt: var(--rt-surface-alt, @el-bg-color);
+@color-surface-muted: var(--rt-surface-muted, @el-fill-color-light);
+@color-border: var(--rt-border, @el-border-color-lighter);
+@color-border-strong: var(--rt-border-strong, @el-border-color);
+@color-text-primary: var(--rt-text-primary, @el-text-color-primary);
+@color-text-secondary: var(--rt-text-secondary, @el-text-color-secondary);
+@color-text-tertiary: var(--rt-text-tertiary, @el-text-color-placeholder);
+@color-text-inverse: var(--rt-text-inverse, #111111);
+@color-link: var(--rt-link, var(--vscode-textLink-foreground, #4fc1ff));
+@color-muted: var(--rt-muted, rgba(255, 255, 255, 0.45));
+@color-accent: var(--rt-accent, var(--vscode-button-background, @el-color-primary));
+@color-accent-hover: var(--rt-accent-hover, var(--vscode-button-hoverBackground, @el-color-primary-light-3));
+@color-danger: var(--rt-danger, var(--vscode-inputValidation-errorBackground, @el-color-danger));
+@color-warning: var(--rt-warning, var(--vscode-inputValidation-warningBackground, @el-color-warning));
+@color-success: var(--rt-success, var(--vscode-inputValidation-infoBackground, @el-color-success));
+@color-scrollbar: var(--rt-scrollbar, var(--vscode-scrollbarSlider-background, rgba(255, 255, 255, 0.25)));
+@shadow-soft: var(--rt-shadow, rgba(0, 0, 0, 0.24));