diff --git a/src/main/utils/beforeOpen.ts b/src/main/utils/beforeOpen.ts
index ca69b40c..9e82c03f 100644
--- a/src/main/utils/beforeOpen.ts
+++ b/src/main/utils/beforeOpen.ts
@@ -126,6 +126,8 @@ 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/NavigationPage.vue b/src/renderer/components/NavigationPage.vue
index e42c885d..439fdcf5 100644
--- a/src/renderer/components/NavigationPage.vue
+++ b/src/renderer/components/NavigationPage.vue
@@ -91,15 +91,7 @@
   <TransitionRoot appear :show="qrcodeVisible" as="template">
     <Dialog as="div" class="qr-dialog" @close="qrcodeVisible = false">
       <div class="dialog-container">
-        <TransitionChild
-          as="template"
-          enter="duration-300 ease-out"
-          enter-from="opacity-0 scale-95"
-          enter-to="opacity-100 scale-100"
-          leave="duration-200 ease-in"
-          leave-from="opacity-100 scale-100"
-          leave-to="opacity-0 scale-95"
-        >
+        <TransitionChild as="template">
           <DialogPanel class="dialog-panel">
             <DialogTitle class="dialog-title">
               {{ t('navigation.picBedQrCode') }}
@@ -120,11 +112,7 @@
                       <ChevronDownIcon :size="16" class="listbox-arrow" />
                     </ListboxButton>
 
-                    <transition
-                      leave-active-class="transition duration-100 ease-in"
-                      leave-from-class="opacity-100"
-                      leave-to-class="opacity-0"
-                    >
+                    <transition>
                       <ListboxOptions class="listbox-options">
                         <ListboxOption
                           v-for="picbed in picBedG"
diff --git a/src/renderer/components/css/ImageProcessSetting.css b/src/renderer/components/css/ImageProcessSetting.css
index 2b4dd5d0..3e2ee310 100644
--- a/src/renderer/components/css/ImageProcessSetting.css
+++ b/src/renderer/components/css/ImageProcessSetting.css
@@ -654,7 +654,7 @@ small {
 }
 
 .placeholder-item:hover {
-  background: rgb(var(--color-accent-rgb), 0.08);
+  background: color-mix(in srgb, var(--color-accent), transparent 95%);
 }
 
 .placeholder-item code {
diff --git a/src/renderer/components/css/PerPicbedSetting.css b/src/renderer/components/css/PerPicbedSetting.css
index ffc016b7..8dcf5eea 100644
--- a/src/renderer/components/css/PerPicbedSetting.css
+++ b/src/renderer/components/css/PerPicbedSetting.css
@@ -29,7 +29,7 @@
 }
 
 .btn:hover {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent);
   background: var(--color-background-secondary);
 }
 
@@ -87,8 +87,8 @@
 }
 
 .picbed-setting-item:hover {
-  border-color: var(--color-blue-common);
-  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  border-color: var(--color-accent);
+  box-shadow: var(--shadow-sm);
 }
 
 .picbed-name {
@@ -167,8 +167,8 @@
 
 .form-input:focus,
 .form-color:focus {
-  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
+  border-color: var(--color-accent);
+  box-shadow: var(--shadow-sm);
 }
 
 .form-input.small {
@@ -190,7 +190,7 @@
   border-radius: 50%;
   width: 18px;
   height: 18px;
-  background: var(--color-blue-common);
+  background: var(--color-accent);
   box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
   appearance: none;
   cursor: pointer;
@@ -201,7 +201,7 @@
   border-radius: 50%;
   width: 18px;
   height: 18px;
-  background: var(--color-blue-common);
+  background: var(--color-accent);
   box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
   cursor: pointer;
 }
@@ -229,7 +229,7 @@
   text-align: center;
   color: var(--color-text-secondary);
   color: white;
-  background: var(--color-blue-common);
+  background: var(--color-accent);
 }
 
 /* Color input group */
@@ -264,7 +264,7 @@
 }
 
 .radio-option.small:hover {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent);
   background: rgb(64 158 255 / 10%);
 }
 
diff --git a/src/renderer/layouts/Main.vue b/src/renderer/layouts/Main.vue
index 36745bc2..60127402 100644
--- a/src/renderer/layouts/Main.vue
+++ b/src/renderer/layouts/Main.vue
@@ -69,14 +69,10 @@ export default { name: 'MainPage' }
   --color-primary-hover: #4f46e5;
   --color-accent: #007aff;
   --color-accent-hover: #3b82f6;
-  --accent-rgb: #449af7;
-  --color-blue-common: #409eff;
-  --color-light-blue: rgb(0 122 255 / 5%);
   --color-success: #34c759;
   --color-warning: #f1930f;
   --color-danger: #ff3b30;
   --color-error: #cb2431;
-  --color-error-surface: rgb(255 59 48 / 10%);
   --shadow-sm: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
   --shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 6%);
   --shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 5%);
@@ -106,14 +102,10 @@ export default { name: 'MainPage' }
   --color-primary-hover: #818cf8;
   --color-accent: #0a84ff;
   --color-accent-hover: #409cff;
-  --accent-rgb: #449af7;
-  --color-blue-common: #409eff;
-  --color-light-blue: rgb(0 122 255 / 5%);
   --color-success: #34c759;
   --color-warning: #f1930f;
   --color-danger: #ff3b30;
   --color-error: #cb2431;
-  --color-error-surface: rgb(255 59 48 / 10%);
   --shadow-sm: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
   --shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 6%);
   --shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 5%);
diff --git a/src/renderer/manage/pages/css/LoginPage.css b/src/renderer/manage/pages/css/LoginPage.css
index 7b0daa2d..cc08d971 100644
--- a/src/renderer/manage/pages/css/LoginPage.css
+++ b/src/renderer/manage/pages/css/LoginPage.css
@@ -716,13 +716,13 @@ input:checked + .switch-slider::before {
 .form-input.error,
 .form-select.error {
   border-color: var(--color-error);
-  background-color: var(--color-error-surface);
+  background-color: color-mix(in srgb, var(--color-error), transparent 80%);
 }
 
 .form-input.error:focus,
 .form-select.error:focus {
   border-color: var(--color-error);
-  box-shadow: 0 0 0 2px var(--color-error-surface);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error), transparent 80%);
 }
 
 .required-marker {
diff --git a/src/renderer/manage/pages/css/ManageSetting.css b/src/renderer/manage/pages/css/ManageSetting.css
index 7c511d88..1cb01e1a 100644
--- a/src/renderer/manage/pages/css/ManageSetting.css
+++ b/src/renderer/manage/pages/css/ManageSetting.css
@@ -57,9 +57,9 @@
 }
 
 .action-button.primary {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent);
   color: white;
-  background: var(--color-blue-common);
+  background: var(--color-accent);
 }
 
 .action-button.primary:hover {
diff --git a/src/renderer/pages/css/Gallery.css b/src/renderer/pages/css/Gallery.css
index 3ecda62b..f7dca4cd 100644
--- a/src/renderer/pages/css/Gallery.css
+++ b/src/renderer/pages/css/Gallery.css
@@ -1520,7 +1520,7 @@ input:checked + .switch-slider::before {
 }
 
 .placeholder-item:hover {
-  background: rgb(var(--color-accent-rgb), 0.08);
+  background: color-mix(in srgb, var(--color-accent), transparent 95%);
 }
 
 .matched-urls-tooltip {
diff --git a/src/renderer/pages/css/Picbeds.css b/src/renderer/pages/css/Picbeds.css
index faa8ccb5..ca9ee59c 100644
--- a/src/renderer/pages/css/Picbeds.css
+++ b/src/renderer/pages/css/Picbeds.css
@@ -6,7 +6,7 @@
   position: relative;
   overflow: hidden auto;
   min-height: 100vh;
-  background: var(--color-background);
+  background: var(--color-background-secondary);
 }
 
 @keyframes ambient-drift {
@@ -40,19 +40,11 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border: 1px solid rgb(var(--accent-rgb) / 15%);
+  border: 1px solid var(--color-border-secondary);
   border-radius: 20px;
   padding: 1.5rem 2rem;
-  background: linear-gradient(
-    135deg,
-    rgb(var(--accent-rgb) / 6%) 0%,
-    var(--color-surface) 50%,
-    rgb(16 185 129 / 4%) 100%
-  );
-  box-shadow:
-    0 4px 24px rgb(0 0 0 / 8%),
-    0 1px 2px rgb(0 0 0 / 4%),
-    inset 0 1px 0 rgb(255 255 255 / 5%);
+  background: var(--color-background-secondary);
+  box-shadow: var(--shadow-md);
   flex-wrap: wrap;
   gap: 1.5rem;
 }
@@ -71,10 +63,6 @@
   width: 56px;
   height: 56px;
   color: var(--color-accent);
-  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 20%) 0%, rgb(var(--accent-rgb) / 10%) 100%);
-  box-shadow:
-    0 4px 12px rgb(var(--accent-rgb) / 20%),
-    inset 0 1px 0 rgb(255 255 255 / 10%);
 }
 
 .header-text {
@@ -106,13 +94,13 @@
 .doc-link-btn {
   display: inline-flex;
   align-items: center;
-  border: 1px solid rgb(var(--accent-rgb) / 20%);
+  border: 1px solid var(--color-border);
   border-radius: 8px;
   padding: 0.375rem 0.75rem;
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--color-accent);
-  background: rgb(var(--accent-rgb) / 8%);
+  background: var(--color-background-secondary);
   transition: all 0.2s ease;
   gap: 0.375rem;
   cursor: pointer;
@@ -120,7 +108,7 @@
 
 .doc-link-btn:hover {
   border-color: var(--color-accent);
-  background: rgb(var(--accent-rgb) / 15%);
+  background: var(--color-background-secondary);
   transform: translateY(-1px);
 }
 
@@ -137,7 +125,7 @@
   overflow: hidden;
   border: none;
   border-radius: 12px;
-  padding: 0.75rem 1.25rem;
+  padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-family: inherit;
   font-weight: 600;
@@ -149,17 +137,13 @@
 .btn-secondary {
   color: var(--color-text-primary);
   background: var(--color-background-secondary);
-  box-shadow:
-    0 2px 8px rgb(0 0 0 / 8%),
-    inset 0 1px 0 rgb(255 255 255 / 5%);
+  box-shadow: var(--shadow-sm);
 }
 
 .btn-secondary:hover {
   background: var(--color-surface);
   transform: translateY(-2px);
-  box-shadow:
-    0 4px 16px rgb(0 0 0 / 12%),
-    inset 0 1px 0 rgb(255 255 255 / 8%);
+  box-shadow: var(--shadow-md);
 }
 
 .btn-outline {
@@ -169,43 +153,32 @@
 }
 
 .btn-outline:hover {
-  border-color: var(--color-text-secondary);
+  border-color: var(--color-accent);
   color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
+  background: var(--color-background-tertiary);
   transform: translateY(-1px);
 }
 
 .btn-success {
   color: white;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-  box-shadow:
-    0 4px 14px rgb(16 185 129 / 35%),
-    0 2px 4px rgb(0 0 0 / 10%),
-    inset 0 1px 0 rgb(255 255 255 / 15%);
+  background: var(--color-success);
+  box-shadow: var(--shadow-sm);
 }
 
 .btn-success:hover {
   transform: translateY(-2px);
-  box-shadow:
-    0 8px 24px rgb(16 185 129 / 45%),
-    0 4px 8px rgb(0 0 0 / 15%),
-    inset 0 1px 0 rgb(255 255 255 / 20%);
+  box-shadow: var(--shadow-sm);
 }
 
 .btn-warning {
   color: white;
-  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-  box-shadow:
-    0 4px 14px rgb(245 158 11 / 35%),
-    0 2px 4px rgb(0 0 0 / 10%),
-    inset 0 1px 0 rgb(255 255 255 / 15%);
+  background: var(--color-warning);
+  box-shadow: var(--shadow-sm);
 }
 
 .btn-warning:hover {
   transform: translateY(-2px);
-  box-shadow:
-    0 8px 24px rgb(245 158 11 / 45%),
-    0 4px 8px rgb(0 0 0 / 15%);
+  box-shadow: var(--shadow-sm);
 }
 
 .btn-glow::before {
@@ -268,7 +241,7 @@
   width: 36px;
   height: 36px;
   color: var(--color-accent);
-  background: rgb(var(--accent-rgb) / 12%);
+  background: color-mix(in srgb, var(--color-accent), transparent 90%);
 }
 
 .card-title {
@@ -330,7 +303,7 @@
   font-weight: 600;
   text-transform: uppercase;
   color: var(--color-text-tertiary);
-  background: var(--color-surface-elevated);
+  background: var(--color-background-tertiary);
   letter-spacing: 0.05em;
 }
 
@@ -348,7 +321,7 @@
   font-size: 0.875rem;
   text-align: left;
   color: var(--color-text-primary);
-  background: transparent;
+  background: var(--color-background-tertiary);
   transition: all 0.15s ease;
   gap: 0.625rem;
   cursor: pointer;
@@ -356,7 +329,6 @@
 
 .dropdown-item:hover {
   color: var(--color-accent);
-  background: rgb(var(--accent-rgb) / 8%);
 }
 
 .dropdown-item svg {
diff --git a/src/renderer/pages/css/PicgoSetting.css b/src/renderer/pages/css/PicgoSetting.css
index 1e2855b0..2ad75ab3 100644
--- a/src/renderer/pages/css/PicgoSetting.css
+++ b/src/renderer/pages/css/PicgoSetting.css
@@ -530,7 +530,7 @@ small {
 }
 
 .placeholder-item:hover {
-  background: rgb(var(--color-accent-rgb), 0.08);
+  background: color-mix(in srgb, var(--color-accent), transparent 95%);
 }
 
 .placeholder-item code {
diff --git a/src/renderer/pages/css/UploadPage.css b/src/renderer/pages/css/UploadPage.css
index 04b73e52..c4f140d5 100644
--- a/src/renderer/pages/css/UploadPage.css
+++ b/src/renderer/pages/css/UploadPage.css
@@ -235,7 +235,7 @@ html, body {
 
 .badge-remove:hover {
   color: var(--color-danger);
-  background: var(--color-error-surface);
+  background: color-mix(in srgb, var(--color-danger), transparent 80%);
 }
 
 @keyframes fade-in {
@@ -386,7 +386,7 @@ html, body {
 .upload-zone:hover,
 .upload-zone.drag-active {
   border-color: var(--color-accent);
-  background: linear-gradient(135deg, var(--color-surface-elevated) 0%, var(--color-light-blue) 100%);
+  background: linear-gradient(135deg, var(--color-surface-elevated) 0%, color-mix(in srgb, var(--color-accent), transparent 95%) 100%);
   transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
 }
diff --git a/src/renderer/pages/css/UploaderConfigPage.css b/src/renderer/pages/css/UploaderConfigPage.css
index e8f510c8..85609087 100644
--- a/src/renderer/pages/css/UploaderConfigPage.css
+++ b/src/renderer/pages/css/UploaderConfigPage.css
@@ -24,19 +24,11 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border: 1px solid rgb(var(--accent-rgb) / 15%);
+  border: var(--color-border);
   border-radius: 20px;
   padding: 1.75rem 2rem;
-  background: linear-gradient(
-    135deg,
-    rgb(var(--accent-rgb) / 8%) 0%,
-    var(--color-surface) 50%,
-    rgb(var(--accent-rgb) / 5%) 100%
-  );
-  box-shadow:
-    0 4px 24px rgb(0 0 0 / 8%),
-    0 1px 2px rgb(0 0 0 / 4%),
-    inset 0 1px 0 rgb(255 255 255 / 5%);
+  background:var(--color-background-secondary);
+  box-shadow: var(--shadow-md);
   flex-wrap: wrap;
   gap: 1.5rem;
 }
@@ -55,10 +47,8 @@
   width: 56px;
   height: 56px;
   color: var(--color-accent);
-  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 20%) 0%, rgb(var(--accent-rgb) / 10%) 100%);
-  box-shadow:
-    0 4px 12px rgb(var(--accent-rgb) / 20%),
-    inset 0 1px 0 rgb(255 255 255 / 10%);
+  background: var(--color-background-secondary);
+  box-shadow: var(--shadow-sm);
 }
 
 .header-text {
@@ -108,19 +98,12 @@
 
 .btn-primary {
   color: white;
-  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent) 100%);
-  box-shadow:
-    0 4px 14px rgb(var(--accent-rgb) / 35%),
-    0 2px 4px rgb(0 0 0 / 10%),
-    inset 0 1px 0 rgb(255 255 255 / 15%);
+  background: var(--color-accent);
+  box-shadow: var(--shadow-md);
 }
 
 .btn-primary:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow:
-    0 8px 24px rgb(var(--accent-rgb) / 45%),
-    0 4px 8px rgb(0 0 0 / 15%),
-    inset 0 1px 0 rgb(255 255 255 / 20%);
 }
 
 .btn-primary:active:not(:disabled) {
@@ -199,11 +182,8 @@
 }
 
 .config-card:hover {
-  border-color: var(--accent-rgb);
-  box-shadow:
-    0 12px 32px rgb(0 0 0 / 10%),
-    0 4px 12px rgb(0 0 0 / 6%),
-    0 0 0 1px rgb(var(--accent-rgb) / 10%);
+  border-color: var(--color-accent);
+  box-shadow: var(--shadow-lg);
 }
 
 .config-card:hover .card-glow {
@@ -217,26 +197,9 @@
 
 /* Active State */
 .config-card.is-active {
-  border-color: var(--color-success);
-  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 6%) 0%, var(--color-surface) 100%);
-  box-shadow:
-    0 4px 16px rgb(var(--accent-rgb) / 15%),
-    0 2px 4px rgb(0 0 0 / 6%),
-    inset 0 0 0 1px rgb(var(--accent-rgb) / 10%);
-}
-
-/* Card Glow Effect */
-.card-glow {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(circle at 50% 0%, rgb(var(--accent-rgb) / 8%) 0%, transparent 70%);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  pointer-events: none;
+  border: 2px solid var(--color-accent);
+  background: var(--color-background-secondary);
+  box-shadow: var(--shadow-md);
 }
 
 /* Active Indicator */
@@ -287,19 +250,18 @@
   width: 40px;
   height: 40px;
   color: var(--color-accent);
-  background: rgb(var(--accent-rgb) / 12%);
+  background: var(--color-background-secondary);
   transition: all 0.25s ease;
 }
 
 .config-card:hover .config-icon {
-  background: rgb(var(--accent-rgb) / 18%);
   transform: scale(1.05);
 }
 
 .config-card.is-active .config-icon {
   color: white;
   background: var(--color-accent);
-  box-shadow: 0 4px 12px rgb(var(--accent-rgb) / 40%);
+  box-shadow: var(--shadow-md);
 }
 
 /* Card Actions */
@@ -334,14 +296,14 @@
 .action-btn:hover {
   border-color: var(--color-accent);
   color: var(--color-accent);
-  background: rgb(var(--accent-rgb) / 10%);
+  background: var(--color-background-secondary);
   transform: scale(1.08);
 }
 
 .action-btn-danger:hover:not(.disabled) {
   border-color: var(--color-danger);
   color: var(--color-danger);
-  background: rgb(239 68 68 / 10%);
+  background: var(--color-background-secondary);
 }
 
 .action-btn.disabled {
@@ -387,7 +349,7 @@
 
 .status-badge.active {
   color: var(--color-accent);
-  background: rgb(var(--accent-rgb) / 15%);
+  background: color-mix(in srgb, var(--color-accent), transparent 95%);
 }
 
 .status-badge.inactive {
@@ -397,7 +359,7 @@
 
 .config-card:hover .status-badge.inactive {
   color: var(--color-text-secondary);
-  background: rgb(var(--accent-rgb) / 8%);
+  background: color-mix(in srgb, var(--color-accent), transparent 97%);
 }
 
 /* ============================================
@@ -441,7 +403,7 @@
   border-style: solid;
   border-color: var(--color-accent);
   color: var(--color-accent);
-  background: rgb(var(--accent-rgb) / 10%);
+  background: color-mix(in srgb, var(--color-accent), transparent 95%);
   transform: scale(1.05) rotate(90deg);
 }