From 5e73e1a2b6f92bb77875a254c5bc95f71315a825 Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Thu, 15 Jan 2026 10:39:50 +0800
Subject: [PATCH] :sparkles: Feature(custom): avoide overwrite css file if
 already exist

---
 src/main/apis/app/theme/index.ts              |  23 +-
 src/main/utils/beforeOpen.ts                  |   2 -
 .../components/css/ImageProcessSetting.css    |  93 +----
 .../components/css/NavigationPage.css         |   4 +-
 src/renderer/pages/PicGoSetting.vue           |  24 +-
 src/renderer/pages/css/PicgoSetting.css       | 351 +++---------------
 src/renderer/pages/css/PluginPage.css         |   1 +
 src/renderer/pages/css/ShortKey.css           |  18 +-
 src/renderer/pages/css/ToolboxPage.css        |  19 +-
 src/renderer/pages/css/UploadPage.css         |   2 +-
 10 files changed, 109 insertions(+), 428 deletions(-)

diff --git a/src/main/apis/app/theme/index.ts b/src/main/apis/app/theme/index.ts
index 92ccc703..1bdc444a 100644
--- a/src/main/apis/app/theme/index.ts
+++ b/src/main/apis/app/theme/index.ts
@@ -21,14 +21,14 @@ export async function resolveThemes(): Promise<{ key: string; label: string }[]>
   const result: string[] = []
   files.forEach(item => {
     if (item.stats?.isFile()) {
-      result.push(item.path.replace(themesDir() + '/', ''))
+      result.push(path.basename(item.path))
     }
   })
   const themes = await Promise.all(
     result
       .filter(file => file.endsWith('.css'))
       .map(async file => {
-        const css = (await fs.readFile(file, 'utf-8')) || ''
+        const css = (await fs.readFile(path.join(themesDir(), file), 'utf-8')) || ''
         let name = file
         if (css.startsWith('/*')) {
           name = css.split('\n')[0].replace('/*', '').replace('*/', '').trim() || file
@@ -44,13 +44,17 @@ export async function resolveThemes(): Promise<{ key: string; label: string }[]>
 }
 
 export async function fetchThemes(): Promise<void> {
-  const zipUrl = 'https://github.com/Kuingsmile/piclist-themeHub/releases/download/latest/themes.zip'
-  const zipData = await axios.get(zipUrl, {
-    responseType: 'arraybuffer',
-    headers: { 'Content-Type': 'application/octet-stream' },
-  })
-  const zip = new AdmZip(zipData.data as Buffer)
-  zip.extractAllTo(themesDir(), true)
+  try {
+    const zipUrl = 'https://github.com/Kuingsmile/piclist-themeHub/releases/download/latest/themes.zip'
+    const zipData = await axios.get(zipUrl, {
+      responseType: 'arraybuffer',
+      headers: { 'Content-Type': 'application/octet-stream' },
+    })
+    const zip = new AdmZip(zipData.data as Buffer)
+    zip.extractAllTo(themesDir(), true)
+  } catch (_e) {
+    console.error('Failed to fetch themes from remote.')
+  }
 }
 
 export async function importThemes(files: string[]): Promise<void> {
@@ -68,7 +72,6 @@ export async function readTheme(theme: string): Promise<string> {
 
 export async function applyTheme(theme: string): Promise<void> {
   theme = path.basename(theme)
-  console.log('Applying theme:', theme)
   const css = await readTheme(theme)
   if (windowManager.has(IWindowList.SETTING_WINDOW)) {
     try {
diff --git a/src/main/utils/beforeOpen.ts b/src/main/utils/beforeOpen.ts
index 9e82c03f..ca69b40c 100644
--- a/src/main/utils/beforeOpen.ts
+++ b/src/main/utils/beforeOpen.ts
@@ -126,8 +126,6 @@ function resolveCss() {
       const dest = path.join(themesDir(), path.basename(item))
       if (!fs.pathExistsSync(dest)) {
         fs.copyFileSync(item, dest)
-      } else {
-        diffFilesAndUpdate(item, dest)
       }
     })
   } catch (e) {
diff --git a/src/renderer/components/css/ImageProcessSetting.css b/src/renderer/components/css/ImageProcessSetting.css
index de1603cc..3316bb22 100644
--- a/src/renderer/components/css/ImageProcessSetting.css
+++ b/src/renderer/components/css/ImageProcessSetting.css
@@ -122,36 +122,11 @@
   border-radius: 10px;
   width: 30px;
   height: 30px;
-  color: #409eff;
-  background: linear-gradient(135deg, #409eff15 0%, #409eff25 100%);
+  color: var(--color-accent);
+  background: var(--color-background-secondary);
   flex-shrink: 0;
 }
 
-.section-icon.watermark-icon {
-  color: #67c23a;
-  background: linear-gradient(135deg, #67c23a15 0%, #67c23a25 100%);
-}
-
-.section-icon.transform-icon {
-  color: #e6a23c;
-  background: linear-gradient(135deg, #e6a23c15 0%, #e6a23c25 100%);
-}
-
-.section-icon.rotate-icon {
-  color: #909399;
-  background: linear-gradient(135deg, #e6a23c15 0%, #e6a23c25 100%);
-}
-
-.section-icon.resize-icon {
-  color: #f56c6c;
-  background: linear-gradient(135deg, #f56c6c15 0%, #f56c6c25 100%);
-}
-
-.section-icon.percent-icon {
-  color: #b37feb;
-  background: linear-gradient(135deg, #b37feb15 0%, #b37feb25 100%);
-}
-
 .section-title-group h2 {
   margin: 0 0 0.25rem;
   font-size: 1.125rem;
@@ -212,12 +187,12 @@
 
 .form-input:hover,
 .form-textarea:hover {
-  border-color: var(--color-border-hover, #c0c4cc);
+  border-color: var(--color-border-secondary);
 }
 
 .form-input:focus,
 .form-textarea:focus {
-  border-color: #409eff;
+  border-color: var(--color-accent);
   outline: none;
   box-shadow: 0 0 0 3px rgb(64 158 255 / 15%);
 }
@@ -234,18 +209,18 @@
   border-radius: 4px;
   width: 100%;
   height: 8px;
-  background: linear-gradient(90deg, #409eff 0%, #e4e7ed 0%);
+  background: linear-gradient(90deg, var(--color-accent) 0%, #e4e7ed 0%);
   outline: none;
   appearance: none;
   transition: background 0.15s ease;
 }
 
 .form-range::-webkit-slider-thumb {
-  border: 3px solid #ffffff;
+  border: 2px solid var(--color-border);
   border-radius: 50%;
   width: 22px;
   height: 22px;
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  background: var(--color-accent);
   box-shadow:
     0 2px 8px rgb(64 158 255 / 40%),
     0 1px 2px rgb(0 0 0 / 10%);
@@ -262,11 +237,11 @@
 }
 
 .form-range::-moz-range-thumb {
-  border: 3px solid #ffffff;
+  border: 2px solid var(--color-border);
   border-radius: 50%;
   width: 22px;
   height: 22px;
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  background: var(--color-accent);
   box-shadow:
     0 2px 8px rgb(64 158 255 / 40%),
     0 1px 2px rgb(0 0 0 / 10%);
@@ -285,7 +260,7 @@
   font-weight: 600;
   text-align: center;
   color: white;
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  background: var(--color-accent);
   box-shadow: 0 2px 6px rgb(64 158 255 / 30%);
 }
 
@@ -303,12 +278,12 @@
 }
 
 .form-color:hover {
-  border-color: #409eff;
+  border-color: var(--color-accent);
   box-shadow: 0 0 0 3px rgb(64 158 255 / 15%);
 }
 
 .form-color:focus {
-  border-color: #409eff;
+  border-color: var(--color-accent);
   outline: none;
   box-shadow: 0 0 0 3px rgb(64 158 255 / 20%);
 }
@@ -345,7 +320,7 @@
 }
 
 .switch-label:hover {
-  border-color: #409eff;
+  border-color: var(--color-accent);
   background: var(--color-surface);
   box-shadow: 0 2px 8px rgb(64 158 255 / 10%);
 }
@@ -493,16 +468,16 @@
 }
 
 .position-button:hover {
-  border-color: #409eff;
+  border-color: var(--color-accent);
   color: var(--color-text-primary);
   background: rgb(64 158 255 / 8%);
   transform: translateY(-1px);
 }
 
 .position-button.active {
-  border-color: #409eff;
+  border-color: var(--color-accent);
   color: white;
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  background: var(--color-background-secondary);
   box-shadow: 0 4px 12px rgb(64 158 255 / 35%);
   transform: translateY(-1px);
 }
@@ -525,36 +500,11 @@
 }
 
 .btn:hover {
-  border-color: #409eff;
+  border-color: var(--color-accent);
   background: var(--color-background-secondary);
   transform: translateY(-1px);
 }
 
-.btn-primary {
-  border-color: #409eff;
-  color: white;
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-  box-shadow: 0 2px 8px rgb(64 158 255 / 30%);
-}
-
-.btn-primary:hover {
-  border-color: #66b1ff;
-  background: linear-gradient(135deg, #66b1ff 0%, #79bbff 100%);
-  box-shadow: 0 4px 12px rgb(64 158 255 / 40%);
-}
-
-.btn-secondary {
-  border-color: var(--color-border);
-  color: var(--color-text-secondary);
-  background: var(--color-background-primary);
-}
-
-.btn-secondary:hover {
-  border-color: var(--color-border-secondary);
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-}
-
 /* ==================== Small Text / Hints ==================== */
 small {
   display: block;
@@ -628,7 +578,7 @@ small {
   }
 
   .tab-button.active {
-    background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+    background: var(--color-accent);
   }
 
   .form-grid {
@@ -717,8 +667,8 @@ small {
   font-family: 'SF Mono', Monaco, Menlo, 'Ubuntu Mono', monospace;
   font-weight: 600;
   text-align: center;
-  color: white;
-  background: var(--color-blue-common);
+  color: var(--color-text-primary);
+  background: var(--color-background-secondary);
   box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
   letter-spacing: 0.02em;
   flex-shrink: 0;
@@ -775,6 +725,3 @@ small {
   color: var(--color-accent);
 }
 
-.section-icon.rename-icon {
-  background: linear-gradient(135deg, #52c41a25 0%, #52c41a35 100%);
-}
diff --git a/src/renderer/components/css/NavigationPage.css b/src/renderer/components/css/NavigationPage.css
index 83bea1e2..679dd7db 100644
--- a/src/renderer/components/css/NavigationPage.css
+++ b/src/renderer/components/css/NavigationPage.css
@@ -274,7 +274,7 @@
   border-radius: 16px;
   width: 100%;
   max-width: 500px;
-  background: var(--color-background-secondary);
+  background: var(--color-background-tertiary);
   box-shadow: var(--shadow-md);
 }
 
@@ -348,7 +348,7 @@
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
   max-height: 300px;
-  background: var(--color-background-primary);
+  background: var(--color-background-tertiary);
   box-shadow: var(--shadow-md);
 }
 
diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index 7e5f66e6..5584e603 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -448,7 +448,7 @@
             <!-- Processing Action Cards -->
             <div class="processing-actions-grid">
               <div class="processing-action-card" @click="advancedRenameVisible = true">
-                <div class="processing-action-icon rename">
+                <div class="processing-action-icon">
                   <Edit :size="15" />
                 </div>
                 <div class="processing-action-info">
@@ -458,7 +458,7 @@
               </div>
 
               <div class="processing-action-card" @click="imageProcessDialogVisible = true">
-                <div class="processing-action-icon image">
+                <div class="processing-action-icon">
                   <ImageIcon :size="20" />
                 </div>
                 <div class="processing-action-info">
@@ -859,14 +859,11 @@
               <div class="input-with-icon">
                 <input
                   v-model.trim="formOfSetting.aesPassword"
-                  :type="apiKeyVisible ? 'text' : 'password'"
+                  type="text"
                   class="form-input"
                   :placeholder="t('pages.settings.advanced.serverEncryptionKey')"
                   @change="handleAesPasswordChange(formOfSetting.aesPassword)"
                 />
-                <div class="icon-btn" @click="apiKeyVisible = !apiKeyVisible">
-                  <component :is="apiKeyVisible ? Eye : EyeOff" :size="16" />
-                </div>
               </div>
             </div>
           </div>
@@ -1031,7 +1028,7 @@
         <div class="dialog-content">
           <div class="proxy-config-grid">
             <div class="proxy-config-card">
-              <div class="proxy-config-icon upload">
+              <div class="proxy-config-icon">
                 <CloudUpload :size="18" />
               </div>
               <div class="proxy-config-field">
@@ -1040,7 +1037,7 @@
               </div>
             </div>
             <div class="proxy-config-card">
-              <div class="proxy-config-icon plugin">
+              <div class="proxy-config-icon">
                 <Settings :size="18" />
               </div>
               <div class="proxy-config-field">
@@ -1054,7 +1051,7 @@
               </div>
             </div>
             <div class="proxy-config-card full-width">
-              <div class="proxy-config-icon mirror">
+              <div class="proxy-config-icon">
                 <Globe :size="18" />
               </div>
               <div class="proxy-config-field">
@@ -1430,13 +1427,10 @@
               <div class="input-with-icon">
                 <input
                   v-model="formOfSetting.serverKey"
-                  :type="serverKeyVisible ? 'text' : 'password'"
+                  type="text"
                   class="form-input"
                   :placeholder="t('pages.settings.advanced.serverKeyPlaceholder')"
                 />
-                <div class="icon-btn" @click="serverKeyVisible = !serverKeyVisible">
-                  <component :is="serverKeyVisible ? Eye : EyeOff" :size="16" />
-                </div>
               </div>
             </div>
           </div>
@@ -1798,8 +1792,6 @@ import {
   CloudUpload,
   Download,
   Edit,
-  Eye,
-  EyeOff,
   FileText,
   FolderOpen,
   GitBranch,
@@ -2045,8 +2037,6 @@ const logFileVisible = ref(false)
 const customLinkVisible = ref(false)
 const checkUpdateVisible = ref(false)
 const serverVisible = ref(false)
-const serverKeyVisible = ref(false)
-const apiKeyVisible = ref(false)
 const webServerVisible = ref(false)
 const syncVisible = ref(false)
 const upDownConfigVisible = ref(false)
diff --git a/src/renderer/pages/css/PicgoSetting.css b/src/renderer/pages/css/PicgoSetting.css
index acfcf779..0cc18840 100644
--- a/src/renderer/pages/css/PicgoSetting.css
+++ b/src/renderer/pages/css/PicgoSetting.css
@@ -146,7 +146,7 @@
   width: 100%;
   font-size: 0.875rem;
   color: var(--color-text-primary);
-  background: var(--color-surface);
+  background: var(--color-background-tertiary);
   transition: all 0.2s ease;
   box-sizing: border-box;
 }
@@ -158,52 +158,6 @@
   outline: none;
 }
 
-.form-textarea {
-  min-height: 80px;
-  resize: vertical;
-}
-
-.form-range {
-  margin-bottom: 0.5rem;
-  border-radius: 3px;
-  width: 100%;
-  height: 6px;
-  background: #e4e7ed;
-  outline: none;
-  appearance: none;
-}
-
-.form-range::-webkit-slider-thumb {
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  background: #409eff;
-  appearance: none;
-  cursor: pointer;
-}
-
-.form-range::-moz-range-thumb {
-  border: none;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  background: #409eff;
-  cursor: pointer;
-}
-
-.range-value {
-  font-size: 0.875rem;
-  text-align: center;
-  color: var(--color-text-secondary);
-}
-
-/* Grid Layout */
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1.5rem;
-}
-
 /* Switch Component */
 .switch-label {
   display: flex;
@@ -272,66 +226,6 @@
   color: var(--color-text-secondary);
 }
 
-/* Radio Group */
-.radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.radio-option {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: 8px;
-  padding: 0.75rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.2s ease;
-  gap: 0.75rem;
-  cursor: pointer;
-}
-
-.radio-option:hover {
-  border-color: var(--color-border);
-  background: var(--color-background-secondary);
-}
-
-.radio-input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.radio-indicator {
-  position: relative;
-  border: 2px solid var(--color-border);
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-}
-
-.radio-input:checked + .radio-indicator {
-  border-color: #409eff;
-}
-
-.radio-input:checked + .radio-indicator::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  border-radius: 50%;
-  width: 10px;
-  height: 10px;
-  background: #409eff;
-  content: '';
-  transform: translate(-50%, -50%);
-}
-
-.radio-label {
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
 /* Buttons */
 .btn {
   display: flex;
@@ -364,7 +258,7 @@
 }
 
 .btn-primary:hover:not(:disabled) {
-  background: #66b1ff;
+  background: var(--color-accent-hover);
 }
 
 .btn-secondary {
@@ -377,15 +271,6 @@
   background: var(--color-background-secondary);
 }
 
-.btn-danger {
-  color: white;
-  background: #f56c6c;
-}
-
-.btn-danger:hover:not(:disabled) {
-  background: #f78989;
-}
-
 /* Checkbox Group */
 .checkbox-group {
   display: flex;
@@ -426,8 +311,8 @@
 }
 
 .checkbox-input:checked + .checkbox-indicator {
-  border-color: #409eff;
-  background: #409eff;
+  border-color: var(--color-accent);
+  background: var(--color-accent);
 }
 
 .checkbox-input:checked + .checkbox-indicator::after {
@@ -481,7 +366,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: rgb(0 0 0 / 80%);
+  background: rgb(0 0 0 / 50%);
 }
 
 .dialog {
@@ -492,8 +377,8 @@
   width: 85vw;
   max-width: 90vw;
   max-height: 85vh;
-  background: var(--color-surface);
-   box-shadow: var(--shadow-xl);
+  background: var(--color-background-tertiary);
+  box-shadow: var(--shadow-xl);
   box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
 }
 
@@ -520,14 +405,14 @@
   height: 32px;
   font-size: 1.5rem;
   color: var(--color-text-secondary);
-  background: none;
+  background: var(--color-surface);
   transition: all 0.2s ease;
   cursor: pointer;
 }
 
 .dialog-close:hover {
   color: var(--color-text-primary);
-  background: var(--color-background-secondary);
+  background: var(--color-surface-elevated);
 }
 
 .dialog-content {
@@ -558,17 +443,6 @@
   flex: 1;
 }
 
-/* Notice Text */
-.notice-text {
-  margin-bottom: 1rem;
-  border-radius: 8px;
-  padding: 1rem;
-  font-size: 0.925rem;
-  text-align: center;
-  color: #1c2630ff;
-  background: rgb(0 128 255 / 10%);
-}
-
 /* Small text */
 small {
   font-size: 0.75rem;
@@ -661,8 +535,8 @@ small {
   font-family: 'SF Mono', Monaco, Menlo, 'Ubuntu Mono', monospace;
   font-weight: 600;
   text-align: center;
-  color: white;
-  background: var(--color-blue-common);
+  color: var(--color-text-primary);
+  background: var(--color-background-secondary);
   box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
   letter-spacing: 0.02em;
   flex-shrink: 0;
@@ -722,7 +596,7 @@ small {
   overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: 12px;
-  background: var(--color-surface);
+  background: var(--color-background-secondary);
   box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
 }
 
@@ -732,7 +606,7 @@ small {
   align-items: center;
   border-bottom: 1px solid var(--color-border);
   padding: 1rem 1.5rem;
-  background: var(--color-background);
+  background: var(--color-background-secondary);
 }
 
 .release-notes-header h3 {
@@ -769,7 +643,7 @@ small {
 .release-notes-content {
   overflow-y: auto;
   max-height: 400px;
-  background: var(--color-background);
+  background: var(--color-background-secondary);
   scrollbar-width: thin;
 }
 
@@ -997,7 +871,7 @@ small {
   width: 46px;
   height: 46px;
   color: white;
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  background: var(--color-accent);
   box-shadow: 0 4px 12px rgb(64 158 255 / 30%);
 }
 
@@ -1023,8 +897,8 @@ small {
   padding: 0.2rem 0.5rem;
   font-size: 0.75rem;
   font-weight: 600;
-  color: #409eff;
-  background: rgb(64 158 255 / 15%);
+  color: var(--color-primary);
+  background: var(--color-surface-elevated);
   letter-spacing: 0.02em;
 }
 
@@ -1103,11 +977,11 @@ small {
 }
 
 .sync-action-icon.upload {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  background: var(--color-accent);
 }
 
 .sync-action-icon.migrate {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
+  background: var(--color-accent);
 }
 
 .sync-action-content {
@@ -1254,9 +1128,9 @@ small {
 }
 
 .sync-type-btn.active {
-  border-color: #409eff;
-  color: #409eff;
-  background: rgb(64 158 255 / 12%);
+  border-color: var(--color-border);
+  color: var(--color-accent);
+  background: var(--color-surface);
   box-shadow: 0 0 0 3px rgb(64 158 255 / 15%);
 }
 
@@ -1267,13 +1141,13 @@ small {
 
 .sync-type-btn.active svg,
 .sync-type-btn:hover svg {
-  color: #409eff;
+  color: var(--color-accent);
 }
 
 .sync-type-btn span {
   font-size: 0.75rem;
   font-weight: 600;
-  color: inherit;
+  color: var(--color-text-primary);
 }
 
 /* Sync Config Fields */
@@ -1349,31 +1223,7 @@ small {
   height: 44px;
   color: var(--color-surface);
   flex-shrink: 0;
-}
-
-.section-icon-wrapper.small-icon {
-  width: 34px;
-  height: 34px;
-}
-
-.section-icon-wrapper.log {
-  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
-}
-
-.section-icon-wrapper.network {
-  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
-}
-
-.section-icon-wrapper.server {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-}
-
-.section-icon-wrapper.update {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.section-icon-wrapper.notes {
-  background: linear-gradient(135deg, #909399 0%, #b1b3b8 100%);
+  background: var(--color-accent);
 }
 
 /* Advanced Action Grid */
@@ -1485,14 +1335,7 @@ small {
   width: 36px;
   height: 36px;
   color: white;
-}
-
-.server-config-icon.web {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.server-config-icon.api {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  background: var(--color-accent);
 }
 
 .server-config-badge {
@@ -1541,7 +1384,7 @@ small {
   border-radius: 8px;
   width: 32px;
   height: 32px;
-  color: #e6a23c;
+  color: var(--color-accent);
   background: rgb(230 162 60 / 15%);
   flex-shrink: 0;
 }
@@ -1581,8 +1424,7 @@ small {
   width: 44px;
   height: 44px;
   color: white;
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-  box-shadow: 0 4px 12px rgb(103 194 58 / 30%);
+  background: var(--color-accent);
   flex-shrink: 0;
 }
 
@@ -1608,8 +1450,8 @@ small {
   padding: 0.3rem 0.75rem;
   font-size: 0.875rem;
   font-weight: 600;
-  color: #67c23a;
-  background: rgb(103 194 58 / 15%);
+  color: var(--color-success);
+  background: var(--color-background-secondary);
 }
 
 .version-label {
@@ -1636,12 +1478,11 @@ small {
   background: transparent;
 }
 
-/* Enhanced Release Notes */
 .release-notes-card.enhanced {
   overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: 16px;
-  background: var(--color-surface);
+  background: var(--color-background-secondary);
   box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
 }
 
@@ -1680,7 +1521,7 @@ small {
 .release-notes-card.enhanced .release-notes-content {
   overflow-y: auto;
   max-height: 400px;
-  background: var(--color-background-primary);
+  background: var(--color-background-secondary);
 }
 
 .release-notes-loading {
@@ -1741,7 +1582,7 @@ small {
   align-items: center;
   border-top: 1px solid var(--color-border);
   padding: 0.75rem 1.5rem;
-  background: var(--color-background-tertiary);
+  background: var(--color-background-secondary);
 }
 
 /* Responsive for Advanced & Update */
@@ -1830,7 +1671,7 @@ small {
   width: 25px;
   height: 25px;
   color: white;
-  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
+  background: var(--color-accent);
   flex-shrink: 0;
 }
 
@@ -1983,7 +1824,7 @@ small {
   width: 44px;
   height: 44px;
   color: white;
-  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
+  background: var(--color-accent);
   flex-shrink: 0;
 }
 
@@ -2015,33 +1856,6 @@ small {
   transform: translateX(4px);
 }
 
-/* ==================== Upload Settings Panel ==================== */
-
-/* Section Icon Wrapper - Upload Colors */
-.section-icon-wrapper.upload {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-}
-
-.section-icon-wrapper.processing {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.section-icon-wrapper.clipboard {
-  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
-}
-
-.section-icon-wrapper.link {
-  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
-}
-
-.section-icon-wrapper.picbed {
-  background: linear-gradient(135deg, #f56c6c 0%, #f89898 100%);
-}
-
-.section-icon-wrapper.gallery {
-  background: linear-gradient(135deg, #b37feb 0%, #d3adf7 100%);
-}
-
 /* Upload Behavior Grid */
 .upload-behavior-grid {
   display: grid;
@@ -2173,14 +1987,7 @@ small {
   height: 30px;
   color: white;
   flex-shrink: 0;
-}
-
-.processing-action-icon.rename {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-}
-
-.processing-action-icon.image {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
+  background: var(--color-accent);
 }
 
 .processing-action-info {
@@ -2254,7 +2061,7 @@ small {
   width: 30px;
   height: 30px;
   color: white;
-  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
+  background: var(--color-accent);
   flex-shrink: 0;
 }
 
@@ -2360,26 +2167,7 @@ small {
   height: 40px;
   color: white;
   flex-shrink: 0;
-}
-
-.dialog-icon-wrapper.link {
-  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
-}
-
-.dialog-icon-wrapper.network {
-  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
-}
-
-.dialog-icon-wrapper.window {
-  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
-}
-
-.dialog-icon-wrapper.update {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.dialog-icon-wrapper.rename {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  background: var(--color-accent);
 }
 
 /* Placeholder Info Card */
@@ -2420,13 +2208,14 @@ small {
 
 .placeholder-info-item code {
   border-radius: 6px;
+  border: 1px solid var(--color-border);
   padding: 0.25rem 0.5rem;
   min-width: 80px;
   font-family: 'SF Mono', Monaco, Menlo, monospace;
   font-weight: 600;
   text-align: center;
-  color: white;
-  background: var(--color-accent);
+  color: var(--color-text-primary);
+  background: var(--color-background-secondary);
 }
 
 .placeholder-info-item span {
@@ -2462,18 +2251,7 @@ small {
   height: 36px;
   color: white;
   flex-shrink: 0;
-}
-
-.proxy-config-icon.upload {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-}
-
-.proxy-config-icon.plugin {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.proxy-config-icon.mirror {
-  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
+  background: var(--color-accent);
 }
 
 .proxy-config-field {
@@ -2540,7 +2318,7 @@ small {
 }
 
 .version-card.latest.has-update {
-  border-color: #67c23a;
+  border-color: var(--color-success);
   background: rgb(103 194 58 / 10%);
 }
 
@@ -2558,7 +2336,7 @@ small {
 }
 
 .version-card.latest.has-update .version-card-value {
-  color: #67c23a;
+  color: var(--color-success);
 }
 
 .version-arrow {
@@ -2574,7 +2352,7 @@ small {
   padding: 1rem;
   font-size: 0.875rem;
   font-weight: 500;
-  color: #67c23a;
+  color: var(--color-success);
   background: rgb(103 194 58 / 12%);
   gap: 0.5rem;
 }
@@ -2615,10 +2393,6 @@ small {
   max-width: 600px;
 }
 
-.dialog-icon-wrapper.log {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
 .log-files-section {
   margin-bottom: 1.5rem;
 }
@@ -2672,7 +2446,7 @@ small {
   width: 42px;
   height: 42px;
   color: white;
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
+  background: var(--color-accent);
 }
 
 .log-file-info {
@@ -2706,14 +2480,6 @@ small {
   max-width: 550px;
 }
 
-.dialog-icon-wrapper.server {
-  background: linear-gradient(135deg, #409eff 0%, #79bbff 100%);
-}
-
-.dialog-icon-wrapper.webserver {
-  background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%);
-}
-
 .server-notice-card {
   display: flex;
   align-items: flex-start;
@@ -2864,7 +2630,7 @@ small {
   margin-top: 1.25rem;
   margin-bottom: 0.5rem;
   font-weight: 700;
-  color: #1e293b;
+  color: var(--color-text-primary);
 }
 
 .notes-body :deep(h1:first-child),
@@ -2891,8 +2657,8 @@ small {
   border-radius: 4px;
   padding: 0.125rem 0.375rem;
   font-size: 0.875em;
-  background: #e2e8f0;
-  color: #334155;
+  background: var(--color-surface);
+  color: var(--color-text-primary);
 }
 
 .notes-body :deep(pre) {
@@ -2900,27 +2666,10 @@ small {
   border-radius: 8px;
   padding: 1rem;
   margin: 0.875rem 0;
-  background: #e2e8f0;
+  background: var(--color-surface);
 }
 
 .notes-body :deep(pre code) {
   padding: 0;
   background: transparent;
 }
-
-.icon-btn {
-  position: absolute;
-  right: 0.75rem;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-secondary);
-  transition: color 0.2s ease;
-}
-
-.icon-btn:hover {
-  color: var(--color-text-primary);
-}
diff --git a/src/renderer/pages/css/PluginPage.css b/src/renderer/pages/css/PluginPage.css
index b81e1227..ba8dbd53 100644
--- a/src/renderer/pages/css/PluginPage.css
+++ b/src/renderer/pages/css/PluginPage.css
@@ -489,6 +489,7 @@ html, body {
 }
 
 .settings-button {
+  border: 1px solid var(--color-border);
   color: var(--color-text-primary);
   background: var(--color-background-secondary);
 }
diff --git a/src/renderer/pages/css/ShortKey.css b/src/renderer/pages/css/ShortKey.css
index 22c53b88..2a7c637e 100644
--- a/src/renderer/pages/css/ShortKey.css
+++ b/src/renderer/pages/css/ShortKey.css
@@ -139,13 +139,13 @@
 
 .status-enabled {
   border: 1px solid rgb(103 194 58 / 20%);
-  color: #67c23a;
+  color: var(--color-success);
   background: rgb(103 194 58 / 10%);
 }
 
 .status-disabled {
   border: 1px solid rgb(245 108 108 / 20%);
-  color: #f56c6c;
+  color: var(--color-danger);
   background: rgb(245 108 108 / 10%);
 }
 
@@ -202,11 +202,11 @@
 
 .btn-primary {
   color: white;
-  background: #409eff;
+  background: var(--color-accent);
 }
 
 .btn-primary:hover:not(:disabled) {
-  background: #66b1ff;
+  background: var(--color-accent-hover);
 }
 
 .btn-secondary {
@@ -222,20 +222,20 @@
 
 .btn-success {
   color: white;
-  background: #67c23a;
+  background: var(--color-success);
 }
 
 .btn-success:hover:not(:disabled) {
-  background: #85ce61;
+  background: var(--color-success);
 }
 
 .btn-danger {
   color: white;
-  background: #f56c6c;
+  background: var(--color-danger);
 }
 
 .btn-danger:hover:not(:disabled) {
-  background: #f78989;
+  background: var(--color-danger);
 }
 
 /* Modal */
@@ -424,4 +424,4 @@
 .form-input:focus-visible {
   outline: 2px solid var(--color-accent);
   outline-offset: 2px;
-}
\ No newline at end of file
+}
diff --git a/src/renderer/pages/css/ToolboxPage.css b/src/renderer/pages/css/ToolboxPage.css
index 39ffc2a9..b2d05289 100644
--- a/src/renderer/pages/css/ToolboxPage.css
+++ b/src/renderer/pages/css/ToolboxPage.css
@@ -14,7 +14,7 @@ html, body {
   flex-direction: column;
   gap: 1.25rem;
   box-sizing: border-box;
-  background: var(--color-surface);
+  background: var(--color-background-tertiary);
 }
 
 /* Card Base */
@@ -22,7 +22,7 @@ html, body {
   overflow: auto;
   border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-xl);
-  background: var(--color-surface);
+  background: var(--color-background-tertiary);
   box-shadow: var(--shadow-sm);
   transition: var(--transition-medium);
 }
@@ -138,8 +138,8 @@ html, body {
   padding: 0.75rem 1.25rem;
   font-size: 0.875rem;
   font-weight: 500;
-  color: #67C23A;
-  background: linear-gradient(135deg, rgb(103 194 58 / 10%) 0%, var(--color-surface) 100%);
+  color: var(--color-success);
+  background: var(--color-background-secondary);
 }
 
 .cant-fix-container {
@@ -239,11 +239,11 @@ html, body {
 }
 
 .item-error {
-  border-left: 3px solid #F56C6C;
+  border-left: 3px solid var(--color-danger);
 }
 
 .item-success {
-  border-left: 3px solid #67C23A;
+  border-left: 3px solid var(--color-success);
 }
 
 .item-loading {
@@ -361,10 +361,3 @@ html, body {
     padding: 0 1rem 0.75rem;
   }
 }
-
-/* Dark mode adjustments */
-@media (prefers-color-scheme: dark) {
-  .item-header:hover {
-    background: rgb(255 255 255 / 5%);
-  }
-}
diff --git a/src/renderer/pages/css/UploadPage.css b/src/renderer/pages/css/UploadPage.css
index 976f4ea0..b76059e4 100644
--- a/src/renderer/pages/css/UploadPage.css
+++ b/src/renderer/pages/css/UploadPage.css
@@ -735,7 +735,7 @@ html, body {
   align-items: center;
   border-bottom: 1px solid var(--color-border-secondary);
   padding: 1rem 1.25rem;
-  background: var(--color-surface);
+  background: var(--color-background-secondary);
 }
 
 .modal-title {