From 158a26cac826947545eea27b370a1f1fa3fa0718 Mon Sep 17 00:00:00 2001
From: LIghtJUNction <lightjunction.me@gmail.com>
Date: Sun, 29 Mar 2026 18:16:07 +0800
Subject: [PATCH] fix(dashboard): improve sidebar styling and dark mode SCSS
 overrides

---
 dashboard/src/components/shared/ReactorBg.vue |   7 +-
 dashboard/src/scss/_override.scss             | 993 ++++++++++++++++--
 dashboard/src/scss/layout/_sidebar.scss       |  34 +-
 dashboard/src/stores/customizer.ts            |  14 +-
 4 files changed, 953 insertions(+), 95 deletions(-)

diff --git a/dashboard/src/components/shared/ReactorBg.vue b/dashboard/src/components/shared/ReactorBg.vue
index b1fc2dadb..91b5e3e34 100644
--- a/dashboard/src/components/shared/ReactorBg.vue
+++ b/dashboard/src/components/shared/ReactorBg.vue
@@ -33,7 +33,7 @@ function draw() {
   const isDark = customizer.isDarkTheme;
 
   // Background
-  ctx.fillStyle = isDark ? "#0A0A0C" : "#F0F4F8";
+  ctx.fillStyle = isDark ? "#050507" : "#F2F5F8";
   ctx.fillRect(0, 0, W, H);
 
   const cols = Math.ceil(W / GRID) + 1;
@@ -45,7 +45,7 @@ function draw() {
   // Grid lines — dark mode: faint white, light mode: faint deep-blue
   ctx.strokeStyle = isDark
     ? "rgba(255, 255, 255, 0.025)"
-    : "rgba(26, 46, 60, 0.06)";
+    : "rgba(26, 46, 60, 0.04)";
   ctx.lineWidth = 0.5;
   for (let x = 0; x <= W; x += GRID) {
     ctx.beginPath();
@@ -81,10 +81,11 @@ function draw() {
       let crossAlpha = isDark ? 0.04 : 0.06;
       let crossScale = 1.0;
       let accent = 0; // 0=neutral, 1=cyan dark, 2=blue light
+      let eased = 0;
 
       if (dist < ENERGY_RADIUS) {
         const t = 1 - dist / ENERGY_RADIUS;
-        const eased = t * t * (3 - 2 * t);
+        eased = t * t * (3 - 2 * t);
 
         if (isDark) {
           // Dark mode: crosses glow cyan (Cherenkov)
diff --git a/dashboard/src/scss/_override.scss b/dashboard/src/scss/_override.scss
index 2990efd4a..557cc75cc 100644
--- a/dashboard/src/scss/_override.scss
+++ b/dashboard/src/scss/_override.scss
@@ -59,109 +59,940 @@ pre, code, .markdown pre, .markdown code, .release-notes pre, .release-notes cod
 }
 
 /* ============================================================
-   REACTOR FORM CONTROLS — Industrial precision overrides
+   REACTOR FORM CONTROLS — Dark mode industrial overrides
    ============================================================ */
 
-/* === Switch: MD3 rectangle with Cherenkov glow === */
-.v-switch {
-  .v-switch__track {
-    border-radius: 4px !important;
-    opacity: 1 !important;
+// Global dark mode — forces visible text on dark bubbles
+.v-theme--bluebusinessdarktheme {
+  .user-bubble,
+  .user-bubble pre,
+  .user-bubble span,
+  .user-bubble p {
+    color: rgba(228, 225, 230, 0.9) !important;
   }
-  &.v-switch--inset .v-switch__track {
-    height: 20px !important;
-    width: 36px !important;
+  .bot-bubble,
+  .bot-bubble pre,
+  .bot-bubble span,
+  .bot-bubble p {
+    color: rgba(228, 225, 230, 0.85) !important;
   }
 }
 
-.v-switch--inset .v-switch__thumb {
-  width: 14px !important;
-  height: 14px !important;
-}
+.v-theme--bluebusinessdarktheme {
+  /* === Switch: MD3 rectangle with Cherenkov glow === */
+  .v-switch {
+    .v-switch__track {
+      border-radius: 4px !important;
+      opacity: 1 !important;
+    }
+    &.v-switch--inset .v-switch__track {
+      height: 20px !important;
+      width: 36px !important;
+    }
+  }
 
-/* === Text fields: transparent glass === */
-.v-field--variant-outlined {
-  .v-field__outline__start,
-  .v-field__outline__end {
-    border-color: rgba(0, 242, 255, 0.12) !important;
+  .v-switch--inset .v-switch__thumb {
+    width: 14px !important;
+    height: 14px !important;
   }
-  .v-field__outline__start {
-    border-radius: 8px 0 0 8px !important;
-  }
-  .v-field__outline__end {
-    border-radius: 0 8px 8px 0 !important;
-  }
-  &:hover .v-field__outline__start,
-  &:hover .v-field__outline__end,
-  &.v-field--focused .v-field__outline__start,
-  &.v-field--focused .v-field__outline__end {
-    border-color: rgba(0, 242, 255, 0.4) !important;
-  }
-  .v-field--focused .v-field__outline__start,
-  .v-field--focused .v-field__outline__end {
-    border-color: #00F2FF !important;
-    box-shadow: 0 0 8px rgba(0, 242, 255, 0.25) !important;
-  }
-}
 
-/* === Select / combobox: glass with bottom line === */
-.v-select__selection-text,
-.v-combobox .v-field__input {
-  font-family: "JetBrains Mono", "Fira Code", monospace;
-  font-size: 13px;
-}
+  /* === Text fields: transparent glass === */
+  .v-field--variant-outlined {
+    .v-field__outline__start,
+    .v-field__outline__end {
+      border-color: rgba(0, 242, 255, 0.12) !important;
+    }
+    .v-field__outline__start {
+      border-radius: 8px 0 0 8px !important;
+    }
+    .v-field__outline__end {
+      border-radius: 0 8px 8px 0 !important;
+    }
+    &:hover .v-field__outline__start,
+    &:hover .v-field__outline__end,
+    &.v-field--focused .v-field__outline__start,
+    &.v-field--focused .v-field__outline__end {
+      border-color: rgba(0, 242, 255, 0.4) !important;
+    }
+    .v-field--focused .v-field__outline__start,
+    .v-field--focused .v-field__outline__end {
+      border-color: #00F2FF !important;
+      box-shadow: 0 0 8px rgba(0, 242, 255, 0.25) !important;
+    }
+  }
 
-/* === Config tabs: reactor styling === */
-.config-tabs {
-  .v-tab {
-    font-family: "JetBrains Mono", monospace;
+  /* === Search field: dark glass (replaces white solo-filled) === */
+  .v-text-field--variant-solo-filled {
+    background: rgba(15, 15, 22, 0.5) !important;
+    backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(0, 242, 255, 0.08) !important;
+    border-radius: 8px !important;
+    .v-field {
+      background: transparent !important;
+    }
+    &:focus-within {
+      border-color: rgba(0, 242, 255, 0.3) !important;
+      box-shadow: 0 0 12px rgba(0, 242, 255, 0.1) !important;
+    }
+  }
+
+  /* === Select / combobox: glass with bottom line === */
+  .v-select__selection-text,
+  .v-combobox .v-field__input {
+    font-family: "JetBrains Mono", "Fira Code", monospace;
     font-size: 13px;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
-    color: rgba(228, 225, 230, 0.5) !important;
-    border-bottom: 2px solid transparent;
-    transition: all 0.25s ease;
+  }
+
+  /* === Config tabs: reactor styling === */
+  .config-tabs {
+    .v-tab {
+      font-family: "JetBrains Mono", monospace;
+      font-size: 13px;
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+      color: rgba(228, 225, 230, 0.5) !important;
+      border-bottom: 2px solid transparent;
+      transition: all 0.25s ease;
+      &:hover {
+        color: rgba(0, 242, 255, 0.7) !important;
+        background: rgba(0, 242, 255, 0.04);
+      }
+      &.v-tab--selected {
+        color: #00F2FF !important;
+        border-bottom-color: #00F2FF;
+        box-shadow: 0 2px 8px rgba(0, 242, 255, 0.3);
+      }
+    }
+    .v-tabs__content {
+      background: transparent;
+    }
+  }
+
+  /* === Config section dividers === */
+  .config-tabs-window {
+    background: transparent !important;
+  }
+
+  /* === Checkbox: hollow rectangle with cyan check === */
+  .v-checkbox .v-selection-control {
+    .v-icon {
+      color: rgba(0, 242, 255, 0.3) !important;
+      border: 1px solid rgba(0, 242, 255, 0.25);
+      border-radius: 3px;
+    }
+    &.mdi-checkbox-blank-outline .v-icon {
+      color: transparent !important;
+    }
+  }
+
+  /* === Slider: thin track with cyan thumb === */
+  .v-slider .v-slider-thumb {
+    &::before {
+      box-shadow: 0 0 10px rgba(0, 242, 255, 0.6) !important;
+    }
+  }
+  .v-slider .v-slider-track__fill {
+    background: #00F2FF !important;
+  }
+
+  /* ============================================================
+     PLUGIN TABLE — Industrial dark glass overrides
+     ============================================================ */
+
+  /* === Table card: dark glass container === */
+  .plugin-list-table {
+    background: rgba(15, 15, 22, 0.4) !important;
+    backdrop-filter: blur(16px) saturate(1.2) !important;
+    border: 1px solid rgba(0, 242, 255, 0.08) !important;
+    border-radius: 16px !important;
+    overflow: hidden;
+
+    .v-data-table__thead {
+      background: rgba(15, 15, 22, 0.6) !important;
+      th {
+        color: rgba(228, 225, 230, 0.6) !important;
+        font-family: "JetBrains Mono", monospace !important;
+        font-size: 11px !important;
+        font-weight: 600 !important;
+        letter-spacing: 0.5px !important;
+        text-transform: uppercase !important;
+        border-bottom: 1px solid rgba(0, 242, 255, 0.1) !important;
+      }
+    }
+
+    .v-data-table__tbody tr {
+      background: transparent !important;
+      &:hover > td {
+        background: rgba(0, 242, 255, 0.04) !important;
+      }
+    }
+
+    td {
+      background: transparent !important;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
+      color: rgba(228, 225, 230, 0.85) !important;
+      font-size: 13px !important;
+    }
+
+    .v-data-table__td--grow {
+      max-width: 320px !important;
+    }
+  }
+
+  /* === Enable/disable buttons: industrial outlined (no cheap pills) === */
+  .table-action-btn {
+    min-height: 30px !important;
+    font-size: 11px !important;
+    font-family: "JetBrains Mono", monospace !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.3px !important;
+    border-radius: 6px !important;
+    border: 1px solid rgba(0, 242, 255, 0.2) !important;
+    background: rgba(0, 242, 255, 0.05) !important;
+    color: rgba(0, 242, 255, 0.7) !important;
+    transition: all 0.2s ease !important;
     &:hover {
-      color: rgba(0, 242, 255, 0.7) !important;
-      background: rgba(0, 242, 255, 0.04);
-    }
-    &.v-tab--selected {
+      background: rgba(0, 242, 255, 0.12) !important;
+      border-color: rgba(0, 242, 255, 0.4) !important;
       color: #00F2FF !important;
-      border-bottom-color: #00F2FF;
-      box-shadow: 0 2px 8px rgba(0, 242, 255, 0.3);
+      box-shadow: 0 0 8px rgba(0, 242, 255, 0.2) !important;
+    }
+    &.bg-error,
+    &.color-error {
+      border-color: rgba(255, 59, 48, 0.2) !important;
+      background: rgba(255, 59, 48, 0.05) !important;
+      color: rgba(255, 59, 48, 0.8) !important;
+      &:hover {
+        background: rgba(255, 59, 48, 0.12) !important;
+        border-color: rgba(255, 59, 48, 0.4) !important;
+        color: #FF3B30 !important;
+        box-shadow: 0 0 8px rgba(255, 59, 48, 0.2) !important;
+      }
     }
   }
-  .v-tabs__content {
-    background: transparent;
+
+  /* === Table action row icon buttons: thin-line industrial === */
+  .table-action-row .v-btn--icon {
+    border: 1px solid rgba(0, 242, 255, 0.15) !important;
+    background: rgba(0, 242, 255, 0.04) !important;
+    color: rgba(0, 242, 255, 0.5) !important;
+    &:hover {
+      background: rgba(0, 242, 255, 0.1) !important;
+      border-color: rgba(0, 242, 255, 0.35) !important;
+      color: #00F2FF !important;
+      box-shadow: 0 0 8px rgba(0, 242, 255, 0.25) !important;
+    }
+  }
+
+  /* === Status chips: hollow outlined industrial === */
+  .v-chip {
+    font-family: "JetBrains Mono", monospace !important;
+    font-size: 10px !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.3px !important;
+    border-radius: 4px !important;
+    border: 1px solid !important;
+    &.bg-success,
+    &.color-success {
+      background: transparent !important;
+      border-color: rgba(0, 199, 190, 0.3) !important;
+      color: rgba(0, 199, 190, 0.8) !important;
+    }
+    &.bg-error,
+    &.color-error {
+      background: transparent !important;
+      border-color: rgba(255, 59, 48, 0.3) !important;
+      color: rgba(255, 59, 48, 0.9) !important;
+    }
+    &.bg-warning,
+    &.color-warning {
+      background: transparent !important;
+      border-color: rgba(255, 149, 0, 0.3) !important;
+      color: rgba(255, 149, 0, 0.9) !important;
+    }
+    &.bg-info,
+    &.color-info {
+      background: transparent !important;
+      border-color: rgba(0, 242, 255, 0.3) !important;
+      color: rgba(0, 242, 255, 0.8) !important;
+    }
+  }
+
+  /* === Plugin name: monospace === */
+  .plugin-list-table .text-h5 {
+    font-family: "JetBrains Mono", "Fira Code", monospace !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    color: rgba(228, 225, 230, 0.9) !important;
+  }
+
+  /* === Installed toolbar: glass panel === */
+  .installed-toolbar {
+    background: rgba(15, 15, 22, 0.3) !important;
+    backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(0, 242, 255, 0.06) !important;
+    border-radius: 12px !important;
+    padding: 12px !important;
+  }
+
+  /* === Installed status toggle: outlined pills === */
+  .installed-status-toggle ::v-deep(.v-btn) {
+    min-height: 32px !important;
+    font-family: "JetBrains Mono", monospace !important;
+    font-size: 11px !important;
+    font-weight: 500 !important;
+    border-radius: 6px !important;
+    border: 1px solid rgba(0, 242, 255, 0.15) !important;
+    background: rgba(0, 242, 255, 0.04) !important;
+    color: rgba(228, 225, 230, 0.5) !important;
+    text-transform: none !important;
+    &:hover {
+      background: rgba(0, 242, 255, 0.1) !important;
+      color: rgba(0, 242, 255, 0.8) !important;
+    }
+    &.v-btn--active {
+      background: rgba(0, 242, 255, 0.12) !important;
+      border-color: rgba(0, 242, 255, 0.35) !important;
+      color: #00F2FF !important;
+    }
+  }
+
+  /* === Pinned plugin card: glass === */
+  .installed-toolbar + .v-row .v-card {
+    background: rgba(15, 15, 22, 0.4) !important;
+    backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(0, 242, 255, 0.08) !important;
+    border-radius: 12px !important;
+  }
+
+  /* === ChatUI chat-page-card: dark glass === */
+  .chat-page-card {
+    background: rgba(10, 10, 15, 0.6) !important;
+    backdrop-filter: blur(16px) saturate(1.2) !important;
+    border: 1px solid rgba(0, 242, 255, 0.06) !important;
+  }
+
+  /* === ChatUI message-list-wrapper: dark === */
+  .message-list-wrapper {
+    background: transparent !important;
+  }
+
+  /* === ConversationSidebar in ChatUI === */
+  .conversation-sidebar,
+  .chat-conversation-list {
+    background: rgba(10, 10, 15, 0.4) !important;
+  }
+
+  /* === ChatInput panel === */
+  .chat-input-panel,
+  .chat-input-container {
+    background: rgba(10, 10, 15, 0.6) !important;
+    border-top: 1px solid rgba(0, 242, 255, 0.08) !important;
+  }
+
+  /* === Settings / v-list items: opaque dark glass (fixes switch track bleed-through) === */
+  .v-theme--bluebusinessdarktheme {
+    .v-list-item {
+      background: rgba(15, 15, 22, 0.3) !important;
+      &:hover {
+        background: rgba(15, 15, 22, 0.5) !important;
+      }
+    }
+    .v-list {
+      background: transparent !important;
+    }
+    .v-list-subheader {
+      background: transparent !important;
+      color: rgba(0, 242, 255, 0.4) !important;
+      font-family: "JetBrains Mono", monospace !important;
+      font-size: 11px !important;
+      letter-spacing: 0.5px !important;
+      text-transform: uppercase !important;
+    }
+    .v-card-text {
+      background: transparent !important;
+    }
+    // Ensure btn-toggle covers switch track
+    .v-btn-toggle {
+      background: rgba(15, 15, 22, 0.8) !important;
+      border: 1px solid rgba(0, 242, 255, 0.1) !important;
+      border-radius: 8px !important;
+    }
+    .v-btn-toggle .v-btn {
+      background: transparent !important;
+      color: rgba(228, 225, 230, 0.5) !important;
+      &.v-btn--active {
+        background: rgba(0, 242, 255, 0.12) !important;
+        color: #00F2FF !important;
+      }
+    }
+  }
+
+  /* === Welcome page: glass cards (no solid gray blocks) === */
+  .welcome-card {
+    background: rgba(15, 15, 22, 0.4) !important;
+    backdrop-filter: blur(20px) saturate(1.2) !important;
+    border: 1px solid rgba(0, 242, 255, 0.08) !important;
+    box-shadow: none !important;
+    // L-shaped corner markers (industrial precision)
+    position: relative;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      border-color: rgba(0, 242, 255, 0.4) !important;
+      border-style: solid;
+      pointer-events: none;
+    }
+    &::before {
+      top: 6px;
+      left: 6px;
+      border-width: 1px 0 0 1px;
+    }
+    &::after {
+      top: 6px;
+      right: 6px;
+      border-width: 1px 1px 0 0;
+    }
+    .v-card {
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+    }
+  }
+
+  /* === Welcome resource cards: glass + industrial === */
+  .welcome-card {
+    // Use :deep() to pierce into nested v-card components
+    :deep(.v-card) {
+      background: rgba(15, 15, 22, 0.5) !important;
+      backdrop-filter: blur(16px) saturate(1.2) !important;
+      border: 1px solid rgba(0, 242, 255, 0.08) !important;
+      border-radius: 12px !important;
+      transition: all 0.25s ease !important;
+      box-shadow: none !important;
+      &:hover {
+        background: rgba(15, 15, 22, 0.65) !important;
+        border-color: rgba(0, 242, 255, 0.2) !important;
+        box-shadow: 0 0 16px rgba(0, 242, 255, 0.1) !important;
+      }
+      .v-icon {
+        color: rgba(0, 242, 255, 0.7) !important;
+      }
+      .v-card-title {
+        color: rgba(228, 225, 230, 0.9) !important;
+        font-family: "JetBrains Mono", monospace !important;
+        font-size: 0.9rem !important;
+      }
+      .text-medium-emphasis {
+        color: rgba(228, 225, 230, 0.5) !important;
+      }
+    }
+  }
+
+  /* === Sidebar icons: Cherenkov glow === */
+  .leftSidebar {
+    .v-list-item .v-icon,
+    .nav-icon {
+      filter: drop-shadow(0 0 4px rgba(0, 242, 255, 0.4)) !important;
+      color: rgba(0, 242, 255, 0.6) !important;
+      transition: filter 0.2s ease !important;
+    }
+    .v-list-item:hover .v-icon,
+    .v-list-item:hover .nav-icon {
+      filter: drop-shadow(0 0 6px rgba(0, 242, 255, 0.7)) !important;
+      color: #00F2FF !important;
+    }
+  }
+
+  /* === Timeline in welcome page === */
+  .welcome-timeline {
+    .v-timeline-item__dot {
+      background: rgba(0, 242, 255, 0.15) !important;
+      border: 1px solid rgba(0, 242, 255, 0.3) !important;
+      box-shadow: 0 0 8px rgba(0, 242, 255, 0.2) !important;
+    }
+    .v-timeline-item__body {
+      color: rgba(228, 225, 230, 0.8) !important;
+    }
+  }
+
+  /* === Provider Sources Panel: glass dark === */
+  .provider-sources-panel {
+    background: rgba(15, 15, 22, 0.4) !important;
+    backdrop-filter: blur(16px) saturate(1.2) !important;
+    border: 1px solid rgba(0, 242, 255, 0.08) !important;
+  }
+
+  /* === Provider source list item: active = cyan accent === */
+  .provider-source-list-item--active {
+    background: rgba(0, 242, 255, 0.1) !important;
+    border: 1px solid rgba(0, 242, 255, 0.2) !important;
+  }
+
+  /* === Provider config card: glass dark === */
+  .provider-config-card {
+    background: rgba(15, 15, 22, 0.4) !important;
+    backdrop-filter: blur(16px) saturate(1.2) !important;
+    border: 1px solid rgba(0, 242, 255, 0.08) !important;
+    .v-card-title {
+      color: rgba(228, 225, 230, 0.9) !important;
+      font-family: "JetBrains Mono", monospace !important;
+      border-bottom: 1px solid rgba(0, 242, 255, 0.06) !important;
+    }
+    .v-card-text {
+      color: rgba(228, 225, 230, 0.8) !important;
+    }
+    // "请选择一个提供商" placeholder
+    .text-grey {
+      color: rgba(228, 225, 230, 0.4) !important;
+    }
+    .text-grey-lighten-1 {
+      color: rgba(228, 225, 230, 0.3) !important;
+    }
+  }
+
+  /* === Provider models panel: search field === */
+  .provider-models-panel,
+  .mt-4:has(.text-h5) {
+    .v-text-field--variant-solo-filled {
+      background: rgba(15, 15, 22, 0.5) !important;
+      backdrop-filter: blur(12px) !important;
+      border: 1px solid rgba(0, 242, 255, 0.08) !important;
+    }
+  }
+
+  /* === Provider page: btn-tonal industrial === */
+  .provider-config-card {
+    .v-btn--variant-tonal {
+      background: rgba(0, 242, 255, 0.05) !important;
+      border: 1px solid rgba(0, 242, 255, 0.15) !important;
+      color: rgba(0, 242, 255, 0.7) !important;
+      border-radius: 6px !important;
+      &:hover {
+        background: rgba(0, 242, 255, 0.12) !important;
+        border-color: rgba(0, 242, 255, 0.35) !important;
+        color: #00F2FF !important;
+      }
+    }
+  }
+
+  /* === Config dialog: glass dark === */
+  .v-dialog > .v-card {
+    background: rgba(15, 15, 22, 0.6) !important;
+    backdrop-filter: blur(24px) saturate(1.2) !important;
+    border: 1px solid rgba(0, 242, 255, 0.08) !important;
+    .v-card-title {
+      color: rgba(228, 225, 230, 0.9) !important;
+      font-family: "JetBrains Mono", monospace !important;
+    }
+    .v-card-text {
+      color: rgba(228, 225, 230, 0.8) !important;
+    }
+  }
+
+  /* === AstrBotConfig reactor card === */
+  .config-reactor-card {
+    background: rgba(15, 15, 22, 0.4) !important;
+    backdrop-filter: blur(20px) saturate(1.2) !important;
+    border: 1px solid rgba(0, 242, 255, 0.08) !important;
   }
 }
 
-/* === Config section dividers === */
-.config-tabs-window {
-  background: transparent !important;
-}
+/* ============================================================
+   BLUEPRINT FORM CONTROLS — Light mode industrial overrides
+   Deep indigo (#1A2B3C) replaces Cherenkov blue (#00F2FF)
+   ============================================================ */
 
-/* === Checkbox: hollow rectangle with cyan check === */
-.v-checkbox .v-selection-control {
-  .v-icon {
-    color: rgba(0, 242, 255, 0.3) !important;
-    border: 1px solid rgba(0, 242, 255, 0.25);
-    border-radius: 3px;
+.v-theme--bluebusinesstheme {
+  /* === App-bar: blueprint glass === */
+  .v-app-bar {
+    background: rgba(240, 244, 248, 0.8) !important;
+    backdrop-filter: blur(20px) saturate(1.3) !important;
+    border-bottom: 1px solid rgba(26, 46, 80, 0.12) !important;
+    box-shadow: none !important;
   }
-  &.mdi-checkbox-blank-outline .v-icon {
-    color: transparent !important;
+
+  /* === Switch: indigo rectangle === */
+  .v-switch {
+    .v-switch__track {
+      border-radius: 4px !important;
+      opacity: 1 !important;
+      background: rgba(26, 46, 80, 0.2) !important;
+      border: 1px solid rgba(26, 46, 80, 0.25) !important;
+    }
+    &.v-switch--inset .v-switch__track {
+      height: 20px !important;
+      width: 36px !important;
+    }
+  }
+
+  .v-switch--inset .v-switch__thumb {
+    width: 14px !important;
+    height: 14px !important;
+  }
+
+  /* === Text fields: blueprint glass === */
+  .v-field--variant-outlined {
+    .v-field__outline__start,
+    .v-field__outline__end {
+      border-color: rgba(26, 46, 80, 0.15) !important;
+    }
+    .v-field__outline__start {
+      border-radius: 8px 0 0 8px !important;
+    }
+    .v-field__outline__end {
+      border-radius: 0 8px 8px 0 !important;
+    }
+    &:hover .v-field__outline__start,
+    &:hover .v-field__outline__end,
+    &.v-field--focused .v-field__outline__start,
+    &.v-field--focused .v-field__outline__end {
+      border-color: rgba(26, 46, 80, 0.4) !important;
+    }
+    .v-field--focused .v-field__outline__start,
+    .v-field--focused .v-field__outline__end {
+      border-color: #1A2B3C !important;
+      box-shadow: 0 0 8px rgba(26, 46, 80, 0.15) !important;
+    }
+  }
+
+  /* === Select / combobox === */
+  .v-select__selection-text,
+  .v-combobox .v-field__input {
+    font-family: "JetBrains Mono", "Fira Code", monospace;
+    font-size: 13px;
+  }
+
+  /* === Config tabs: blueprint styling === */
+  .config-tabs {
+    .v-tab {
+      font-family: "JetBrains Mono", monospace;
+      font-size: 13px;
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+      color: rgba(26, 46, 80, 0.5) !important;
+      border-bottom: 2px solid transparent;
+      transition: all 0.25s ease;
+      &:hover {
+        color: rgba(26, 46, 80, 0.8) !important;
+        background: rgba(26, 46, 80, 0.04);
+      }
+      &.v-tab--selected {
+        color: #1A2B3C !important;
+        border-bottom-color: #1A2B3C;
+        box-shadow: 0 2px 8px rgba(26, 46, 80, 0.15);
+      }
+    }
+    .v-tabs__content {
+      background: transparent;
+    }
+  }
+
+  /* === Config section dividers === */
+  .config-tabs-window {
+    background: transparent !important;
+  }
+
+  /* === Checkbox: indigo rectangle === */
+  .v-checkbox .v-selection-control {
+    .v-icon {
+      color: rgba(26, 46, 80, 0.3) !important;
+      border: 1px solid rgba(26, 46, 80, 0.25) !important;
+      border-radius: 3px;
+    }
+    &.mdi-checkbox-blank-outline .v-icon {
+      color: transparent !important;
+    }
+  }
+
+  /* === Slider: indigo track === */
+  .v-slider .v-slider-thumb {
+    &::before {
+      box-shadow: 0 0 8px rgba(26, 46, 80, 0.4) !important;
+    }
+  }
+  .v-slider .v-slider-track__fill {
+    background: #1A2B3C !important;
+  }
+
+  /* ============================================================
+     PLUGIN TABLE & CARDS — Blueprint light glass overrides
+     ============================================================ */
+
+  /* === Search field: blueprint glass === */
+  .v-text-field--variant-solo-filled {
+    background: rgba(228, 233, 242, 0.5) !important;
+    backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(26, 46, 80, 0.1) !important;
+    border-radius: 8px !important;
+    .v-field {
+      background: transparent !important;
+    }
+    &:focus-within {
+      border-color: rgba(26, 46, 80, 0.3) !important;
+      box-shadow: 0 0 12px rgba(26, 46, 80, 0.08) !important;
+    }
+  }
+
+  /* === Table card: blueprint glass container === */
+  .plugin-list-table {
+    background: rgba(228, 233, 242, 0.5) !important;
+    backdrop-filter: blur(16px) saturate(1.2) !important;
+    border: 1px solid rgba(26, 46, 80, 0.1) !important;
+    border-radius: 16px !important;
+    overflow: hidden;
+
+    .v-data-table__thead {
+      background: rgba(228, 233, 242, 0.7) !important;
+      th {
+        color: rgba(26, 46, 80, 0.6) !important;
+        font-family: "JetBrains Mono", monospace !important;
+        font-size: 11px !important;
+        font-weight: 600 !important;
+        letter-spacing: 0.5px !important;
+        text-transform: uppercase !important;
+        border-bottom: 1px solid rgba(26, 46, 80, 0.12) !important;
+      }
+    }
+
+    .v-data-table__tbody tr {
+      background: transparent !important;
+      &:hover > td {
+        background: rgba(26, 46, 80, 0.04) !important;
+      }
+    }
+
+    td {
+      background: transparent !important;
+      border-bottom: 1px solid rgba(26, 46, 80, 0.06) !important;
+      color: rgba(26, 46, 80, 0.8) !important;
+      font-size: 13px !important;
+    }
+  }
+
+  /* === Enable/disable buttons: industrial outlined (no cheap pills) === */
+  .table-action-btn {
+    min-height: 30px !important;
+    font-size: 11px !important;
+    font-family: "JetBrains Mono", monospace !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.3px !important;
+    border-radius: 6px !important;
+    border: 1px solid rgba(26, 46, 80, 0.2) !important;
+    background: rgba(26, 46, 80, 0.04) !important;
+    color: rgba(26, 46, 80, 0.7) !important;
+    transition: all 0.2s ease !important;
+    &:hover {
+      background: rgba(26, 46, 80, 0.1) !important;
+      border-color: rgba(26, 46, 80, 0.4) !important;
+      color: #1A2B3C !important;
+      box-shadow: 0 0 8px rgba(26, 46, 80, 0.1) !important;
+    }
+    &.bg-error,
+    &.color-error {
+      border-color: rgba(186, 26, 26, 0.2) !important;
+      background: rgba(186, 26, 26, 0.04) !important;
+      color: rgba(186, 26, 26, 0.7) !important;
+      &:hover {
+        background: rgba(186, 26, 26, 0.08) !important;
+        border-color: rgba(186, 26, 26, 0.4) !important;
+        color: #BA1A1A !important;
+        box-shadow: 0 0 8px rgba(186, 26, 26, 0.1) !important;
+      }
+    }
+  }
+
+  /* === Table action row icon buttons: thin-line industrial === */
+  .table-action-row .v-btn--icon {
+    border: 1px solid rgba(26, 46, 80, 0.15) !important;
+    background: rgba(26, 46, 80, 0.04) !important;
+    color: rgba(26, 46, 80, 0.5) !important;
+    &:hover {
+      background: rgba(26, 46, 80, 0.08) !important;
+      border-color: rgba(26, 46, 80, 0.3) !important;
+      color: #1A2B3C !important;
+      box-shadow: 0 0 8px rgba(26, 46, 80, 0.1) !important;
+    }
+  }
+
+  /* === Status chips: hollow outlined industrial === */
+  .v-chip {
+    font-family: "JetBrains Mono", monospace !important;
+    font-size: 10px !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.3px !important;
+    border-radius: 4px !important;
+    border: 1px solid !important;
+    &.bg-success,
+    &.color-success {
+      background: transparent !important;
+      border-color: rgba(0, 199, 190, 0.3) !important;
+      color: rgba(0, 150, 140, 0.9) !important;
+    }
+    &.bg-error,
+    &.color-error {
+      background: transparent !important;
+      border-color: rgba(139, 0, 0, 0.3) !important;
+      color: rgba(139, 0, 0, 0.9) !important;
+    }
+    &.bg-warning,
+    &.color-warning {
+      background: transparent !important;
+      border-color: rgba(255, 149, 0, 0.3) !important;
+      color: rgba(180, 105, 0, 0.9) !important;
+    }
+    &.bg-info,
+    &.color-info {
+      background: transparent !important;
+      border-color: rgba(0, 107, 156, 0.3) !important;
+      color: rgba(0, 107, 156, 0.9) !important;
+    }
+  }
+
+  /* === Plugin name: monospace === */
+  .plugin-list-table .text-h5 {
+    font-family: "JetBrains Mono", "Fira Code", monospace !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    color: rgba(26, 46, 80, 0.9) !important;
+  }
+
+  /* === Installed toolbar: blueprint glass panel === */
+  .installed-toolbar {
+    background: rgba(228, 233, 242, 0.5) !important;
+    backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(26, 46, 80, 0.1) !important;
+    border-radius: 12px !important;
+    padding: 12px !important;
+  }
+
+  /* === Installed status toggle: outlined pills === */
+  .installed-status-toggle ::v-deep(.v-btn) {
+    min-height: 32px !important;
+    font-family: "JetBrains Mono", monospace !important;
+    font-size: 11px !important;
+    font-weight: 500 !important;
+    border-radius: 6px !important;
+    border: 1px solid rgba(26, 46, 80, 0.15) !important;
+    background: rgba(26, 46, 80, 0.04) !important;
+    color: rgba(26, 46, 80, 0.5) !important;
+    text-transform: none !important;
+    &:hover {
+      background: rgba(26, 46, 80, 0.08) !important;
+      color: rgba(26, 46, 80, 0.8) !important;
+    }
+    &.v-btn--active {
+      background: rgba(26, 46, 80, 0.1) !important;
+      border-color: rgba(26, 46, 80, 0.3) !important;
+      color: #1A2B3C !important;
+    }
+  }
+
+  /* === Pinned plugin card: blueprint glass === */
+  .installed-toolbar + .v-row .v-card {
+    background: rgba(228, 233, 242, 0.5) !important;
+    backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(26, 46, 80, 0.1) !important;
+    border-radius: 12px !important;
+  }
+
+  /* === Extension cards: blueprint glass === */
+  .mcpCardBg,
+  [style*="mcpCardBg"] {
+    background: rgba(228, 233, 242, 0.5) !important;
+    backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(26, 46, 80, 0.1) !important;
+    border-radius: 12px !important;
+  }
+
+  /* === VCard base: blueprint glass === */
+  .v-card {
+    background: rgba(228, 233, 242, 0.5) !important;
+    backdrop-filter: blur(12px) saturate(1.2) !important;
+    border: 1px solid rgba(26, 46, 80, 0.1) !important;
+    box-shadow: none !important;
+  }
+
+  /* === Market plugin cards: blueprint glass === */
+  .market-plugin-card,
+  .extension-card {
+    background: rgba(228, 233, 242, 0.5) !important;
+    backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(26, 46, 80, 0.1) !important;
+    border-radius: 12px !important;
+  }
+
+  /* === V-btn tonal in light: subtle outline === */
+  .v-btn--variant-tonal {
+    background: rgba(26, 46, 80, 0.05) !important;
+    border: 1px solid rgba(26, 46, 80, 0.15) !important;
+    color: rgba(26, 46, 80, 0.7) !important;
+    &:hover {
+      background: rgba(26, 46, 80, 0.1) !important;
+      border-color: rgba(26, 46, 80, 0.3) !important;
+      color: #1A2B3C !important;
+    }
+  }
+
+  /* === VDataTable footer / pagination: blueprint glass === */
+  .v-data-table-footer {
+    background: rgba(228, 233, 242, 0.6) !important;
+    border-top: 1px solid rgba(26, 46, 80, 0.1) !important;
+    padding: 8px 16px !important;
+  }
+
+  .v-data-table__td--footer {
+    background: rgba(228, 233, 242, 0.6) !important;
+    border-top: 1px solid rgba(26, 46, 80, 0.1) !important;
+  }
+
+  /* === Pagination: indigo industrial === */
+  .v-pagination {
+    .v-pagination__item {
+      font-family: "JetBrains Mono", monospace !important;
+      font-size: 12px !important;
+      border: 1px solid rgba(26, 46, 80, 0.15) !important;
+      background: rgba(26, 46, 80, 0.04) !important;
+      color: rgba(26, 46, 80, 0.6) !important;
+      &:hover {
+        background: rgba(26, 46, 80, 0.1) !important;
+        border-color: rgba(26, 46, 80, 0.3) !important;
+        color: #1A2B3C !important;
+      }
+      &.v-pagination__item--is-active {
+        background: rgba(26, 46, 80, 0.12) !important;
+        border-color: #1A2B3C !important;
+        color: #1A2B3C !important;
+        font-weight: 600 !important;
+      }
+    }
+    .v-pagination__prev,
+    .v-pagination__next {
+      border: 1px solid rgba(26, 46, 80, 0.15) !important;
+      background: rgba(26, 46, 80, 0.04) !important;
+      color: rgba(26, 46, 80, 0.5) !important;
+      &:hover {
+        background: rgba(26, 46, 80, 0.1) !important;
+        color: #1A2B3C !important;
+      }
+      &.v-pagination__btn--disabled {
+        opacity: 0.35 !important;
+      }
+    }
+  }
+
+  /* === V-select in table footer === */
+  .v-data-table-footer .v-select {
+    .v-field {
+      background: rgba(26, 46, 80, 0.05) !important;
+      border: 1px solid rgba(26, 46, 80, 0.12) !important;
+      border-radius: 6px !important;
+    }
   }
 }
 
-/* === Slider: thin track with cyan thumb === */
-.v-slider .v-slider-thumb {
-  &::before {
-    box-shadow: 0 0 10px rgba(0, 242, 255, 0.6) !important;
-  }
-}
-.v-slider .v-slider-track__fill {
-  background: #00F2FF !important;
-}
-
 
 
diff --git a/dashboard/src/scss/layout/_sidebar.scss b/dashboard/src/scss/layout/_sidebar.scss
index b646c598a..10b4bcac4 100644
--- a/dashboard/src/scss/layout/_sidebar.scss
+++ b/dashboard/src/scss/layout/_sidebar.scss
@@ -9,11 +9,39 @@
   backdrop-filter: blur(16px) saturate(1.2);
 }
 
-/* Light mode: keep sidebar as dark blueprint panel */
+/* Light mode: blueprint glass sidebar — light content + deep indigo border */
 .v-theme--light {
   .leftSidebar {
-    background: rgba(12, 18, 28, 0.92) !important;
-    border-right-color: rgba(0, 200, 255, 0.08) !important;
+    background: rgba(228, 233, 242, 0.7) !important;
+    backdrop-filter: blur(20px) saturate(1.3);
+    border-right: 1px solid rgba(26, 46, 80, 0.15) !important;
+    box-shadow: 2px 0 12px rgba(26, 46, 80, 0.08) !important;
+  }
+
+  .listitem {
+    .v-list-item {
+      color: rgba(26, 46, 80, 0.7) !important;
+      &:hover {
+        background: rgba(26, 46, 80, 0.05) !important;
+        color: #1A2B3C !important;
+      }
+      &.v-list-item--active {
+        background: rgba(26, 46, 80, 0.08) !important;
+        color: #1A2B3C !important;
+        border-left: 3px solid #1A2B3C;
+      }
+    }
+    .v-list-item-title {
+      color: inherit !important;
+    }
+    .v-icon {
+      color: rgba(26, 46, 80, 0.6) !important;
+    }
+  }
+
+  .sidebar-footer-btn {
+    color: rgba(26, 46, 80, 0.7) !important;
+    border-color: rgba(26, 46, 80, 0.2) !important;
   }
 }
 
diff --git a/dashboard/src/stores/customizer.ts b/dashboard/src/stores/customizer.ts
index 05613bb23..2a35ae237 100644
--- a/dashboard/src/stores/customizer.ts
+++ b/dashboard/src/stores/customizer.ts
@@ -40,19 +40,17 @@ export const useCustomizerStore = defineStore("customizer", {
       this.autoSwitchTheme = payload;
       localStorage.setItem("autoSwitchTheme", String(payload));
     },
-    // 新增：手动切换主题（同时关闭自动同步）
-    // 工业精密风格仅支持暗色主题，强制锁定暗色模式
+    // 手动切换主题（同时关闭自动同步）
     TOGGLE_DARK_MODE() {
       this.SET_AUTO_SYNC(false);
-      // Force lock to dark theme — industrial aesthetic is dark-only
-      this.SET_UI_THEME(DARK_THEME_NAME);
+      const newTheme = this.isDarkTheme ? LIGHT_THEME_NAME : DARK_THEME_NAME;
+      this.SET_UI_THEME(newTheme);
     },
-    // 新增：应用系统主题（用于自动同步）
-    // 工业精密风格仅支持暗色主题，强制锁定暗色模式
+    // 应用系统主题（用于自动同步）
     APPLY_SYSTEM_THEME() {
       if (typeof window === "undefined") return;
-      // Always lock to dark regardless of system preference
-      this.SET_UI_THEME(DARK_THEME_NAME);
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      this.SET_UI_THEME(prefersDark ? DARK_THEME_NAME : LIGHT_THEME_NAME);
     },
     TOGGLE_CHAT_SIDEBAR() {
       this.chatSidebarOpen = !this.chatSidebarOpen;