From e8caaee04fdb261d13c9972a37bdc1451a5d05b2 Mon Sep 17 00:00:00 2001
From: sparksfly <wu434425608@163.com>
Date: Fri, 14 Aug 2026 00:07:31 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=87=8D=E6=9E=84=E5=85=A8=E7=AB=99?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=85=8D=E8=89=B2=EF=BC=8C=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E4=B8=BA=E6=9A=96=E6=A3=95=E6=B5=85=E8=89=B2=E8=B0=83=E9=A3=8E?=
 =?UTF-8?q?=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构全局CSS变量与组件样式，将深色主题替换为暖棕浅色系主题：
1. 更新全局CSS变量，替换背景、文字、边框、主题色等基础配色
2. 调整所有页面和组件的hover、选中、背景色样式，适配新主题色
3. 移除naive-ui的darkTheme引入，修改主题覆盖配置为新的暖棕配色方案
4. 统一替换原紫色主题为#b4532a暖棕主题色
---
 .trae/rules/git-commit-message.md   | 20 ++++++++++++
 src/App.vue                         | 47 ++++++++++++++---------------
 src/components/FullscreenPlayer.vue | 22 +++++++-------
 src/components/MusicCard.vue        | 12 ++++----
 src/components/PlayerBar.vue        | 18 +++++------
 src/components/QrLogin.vue          |  4 +--
 src/components/SongTable.vue        |  8 ++---
 src/layouts/MainLayout.vue          | 18 +++++------
 src/styles/global.css               | 26 ++++++++--------
 src/views/DiscoverView.vue          | 12 ++++----
 src/views/PlaylistDetailView.vue    | 10 +++---
 src/views/RankingView.vue           | 18 +++++------
 src/views/SearchView.vue            |  2 +-
 src/views/SettingsView.vue          | 14 ++++-----
 14 files changed, 125 insertions(+), 106 deletions(-)
 create mode 100644 .trae/rules/git-commit-message.md

diff --git a/.trae/rules/git-commit-message.md b/.trae/rules/git-commit-message.md
new file mode 100644
index 0000000..3e04d2f
--- /dev/null
+++ b/.trae/rules/git-commit-message.md
@@ -0,0 +1,20 @@
+---
+alwaysApply: true
+scene: git_message
+language: zh-CN
+---
+
+## Git Commit Message Rules
+
+### Language Requirement
+- All generated commit messages **MUST BE in Chinese (中文)**.
+- Do NOT use English for commit messages.
+
+### Format Requirement
+- First line: Short description (under 50 characters)
+- Empty line
+- Body (optional): Detailed description of changes and reasons
+
+### Content Requirement
+- Clearly describe "What was changed" and "Why it was changed"
+- Keep it concise and accurate
diff --git a/src/App.vue b/src/App.vue
index 95244c2..e0d0447 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-root">
-    <n-config-provider :theme="darkTheme" :theme-overrides="themeOverrides">
+    <n-config-provider :theme-overrides="themeOverrides">
       <n-message-provider>
         <n-notification-provider>
           <n-dialog-provider>
@@ -14,7 +14,6 @@
 
 <script setup lang="ts">
 import {
-  darkTheme,
   NConfigProvider,
   NDialogProvider,
   NMessageProvider,
@@ -25,28 +24,28 @@ import { RouterView } from "vue-router";
 
 const themeOverrides: GlobalThemeOverrides = {
   common: {
-    primaryColor: "#6d5df6",
-    primaryColorHover: "#7e6fff",
-    primaryColorPressed: "#5c4de8",
-    primaryColorSuppl: "#6d5df6",
-    successColor: "#22c55e",
-    successColorHover: "#3edb7a",
-    successColorPressed: "#17a84c",
-    infoColor: "#60a5fa",
-    bodyColor: "#0f0f23",
-    cardColor: "#171735",
-    modalColor: "#1c1c3e",
-    popoverColor: "#1c1c3e",
-    tableColor: "#171735",
-    inputColor: "rgba(255, 255, 255, 0.06)",
-    borderColor: "rgba(255, 255, 255, 0.09)",
-    dividerColor: "rgba(255, 255, 255, 0.08)",
-    textColorBase: "#f8fafc",
-    textColor1: "#f8fafc",
-    textColor2: "#d9d9ee",
-    textColor3: "#a5a5c4",
-    hoverColor: "rgba(255, 255, 255, 0.06)",
-    borderRadius: "8px",
+    primaryColor: "#b4532a",
+    primaryColorHover: "#c66a3d",
+    primaryColorPressed: "#98431f",
+    primaryColorSuppl: "#b4532a",
+    successColor: "#70845b",
+    successColorHover: "#839d6c",
+    successColorPressed: "#5b7048",
+    infoColor: "#527b86",
+    bodyColor: "#f4eddf",
+    cardColor: "#fffaf0",
+    modalColor: "#fffaf0",
+    popoverColor: "#fffaf0",
+    tableColor: "#fffaf0",
+    inputColor: "#fffdf8",
+    borderColor: "#d8c8b3",
+    dividerColor: "#e4d8c7",
+    textColorBase: "#3f3028",
+    textColor1: "#3f3028",
+    textColor2: "#6e584a",
+    textColor3: "#927b6c",
+    hoverColor: "#f2e8d9",
+    borderRadius: "10px",
     fontFamily:
       "'Inter','HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif",
   },
diff --git a/src/components/FullscreenPlayer.vue b/src/components/FullscreenPlayer.vue
index 7492ea7..6ddb27c 100644
--- a/src/components/FullscreenPlayer.vue
+++ b/src/components/FullscreenPlayer.vue
@@ -200,7 +200,7 @@ watch(currentLyricIndex, (newIndex) => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(15, 15, 35, 0.75);
+  background: rgba(63, 48, 40, 0.68);
   backdrop-filter: blur(20px);
 }
 
@@ -215,14 +215,14 @@ watch(currentLyricIndex, (newIndex) => {
   height: 48px;
   border: none;
   border-radius: 50%;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(63, 48, 40, 0.54);
   color: var(--app-text);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .close-btn:hover {
-  background: rgba(0, 0, 0, 0.6);
+  background: rgba(63, 48, 40, 0.72);
   transform: scale(1.08);
 }
 
@@ -339,7 +339,7 @@ watch(currentLyricIndex, (newIndex) => {
   padding: 12px 0;
   font-size: 16px;
   line-height: 1.6;
-  color: rgba(255, 255, 255, 0.4);
+  color: rgba(255, 250, 240, 0.56);
   text-align: center;
   transition: all 0.3s ease;
 }
@@ -348,7 +348,7 @@ watch(currentLyricIndex, (newIndex) => {
   font-size: 20px;
   font-weight: 600;
   color: var(--app-text);
-  text-shadow: 0 2px 8px rgba(109, 93, 246, 0.4);
+  text-shadow: 0 2px 8px rgba(180, 83, 42, 0.34);
 }
 
 .lower-section {
@@ -382,7 +382,7 @@ watch(currentLyricIndex, (newIndex) => {
 
 .progress-slider-large :deep(.n-slider-rail) {
   height: 6px;
-  background: rgba(255, 255, 255, 0.15);
+  background: rgba(255, 250, 240, 0.28);
 }
 
 .progress-slider-large :deep(.n-slider-fill) {
@@ -409,14 +409,14 @@ watch(currentLyricIndex, (newIndex) => {
   height: 56px;
   border: none;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.08);
+  background: rgba(255, 250, 240, 0.18);
   color: var(--app-text-secondary);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .control-icon-btn:hover {
-  background: rgba(255, 255, 255, 0.15);
+  background: rgba(255, 250, 240, 0.3);
   color: var(--app-text);
   transform: scale(1.08);
 }
@@ -433,15 +433,15 @@ watch(currentLyricIndex, (newIndex) => {
   border: none;
   border-radius: 50%;
   background: var(--app-green);
-  color: #052e16;
+  color: #fffaf0;
   cursor: pointer;
-  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
+  box-shadow: 0 8px 24px rgba(180, 83, 42, 0.26);
   transition: all 0.2s ease;
 }
 
 .play-toggle-large:hover {
   transform: scale(1.1);
-  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.5);
+  box-shadow: 0 12px 32px rgba(180, 83, 42, 0.36);
 }
 
 .fullscreen-enter-active,
diff --git a/src/components/MusicCard.vue b/src/components/MusicCard.vue
index d78d737..afe9771 100644
--- a/src/components/MusicCard.vue
+++ b/src/components/MusicCard.vue
@@ -37,7 +37,7 @@ const router = useRouter();
 const coverStyle = computed(() => ({
   background:
     displayCover(props.playlist.cover) ||
-    "linear-gradient(135deg, #4338ca 0%, #7c3aed 100%)",
+    "linear-gradient(135deg, #4b9fb0 0%, #6f9ed8 100%)",
 }));
 
 function openDetail() {
@@ -94,7 +94,7 @@ function play() {
   border: none;
   border-radius: 50%;
   background: var(--app-green);
-  color: #052e16;
+  color: #fffaf0;
   cursor: pointer;
   opacity: 0;
   transform: translateY(6px);
@@ -102,11 +102,11 @@ function play() {
     opacity 0.2s ease,
     transform 0.2s ease,
     box-shadow 0.2s ease;
-  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.4);
+  box-shadow: 0 8px 18px rgba(180, 83, 42, 0.24);
 }
 
 .play-btn:hover {
-  box-shadow: 0 10px 22px rgba(34, 197, 94, 0.55);
+  box-shadow: 0 10px 22px rgba(180, 83, 42, 0.34);
   transform: translateY(0) scale(1.06);
 }
 
@@ -126,8 +126,8 @@ function play() {
   padding: 2px 8px;
   border-radius: 999px;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.92);
-  background: rgba(0, 0, 0, 0.35);
+  color: #fffaf0;
+  background: rgba(63, 48, 40, 0.72);
   backdrop-filter: blur(4px);
 }
 
diff --git a/src/components/PlayerBar.vue b/src/components/PlayerBar.vue
index 517ff98..374fdff 100644
--- a/src/components/PlayerBar.vue
+++ b/src/components/PlayerBar.vue
@@ -267,7 +267,7 @@ onUnmounted(() => {
   height: clamp(72px, 9vh, 88px);
   padding: 0 clamp(14px, 2vw, 22px);
   flex-shrink: 0;
-  background: rgba(18, 18, 40, 0.92);
+   background: rgba(255, 250, 240, 0.94);
   backdrop-filter: blur(14px);
   border-top: 1px solid var(--app-border);
 }
@@ -304,7 +304,7 @@ onUnmounted(() => {
 }
 
 .cover-mini-mark {
-  color: rgba(255, 255, 255, 0.45);
+  color: rgba(63, 48, 40, 0.46);
 }
 
 .meta {
@@ -360,7 +360,7 @@ onUnmounted(() => {
 
 .ctrl-btn:hover {
   color: var(--app-text);
-  background: rgba(255, 255, 255, 0.08);
+  background: rgba(180, 83, 42, 0.08);
 }
 
 .ctrl-btn.active {
@@ -375,9 +375,9 @@ onUnmounted(() => {
   border: none;
   border-radius: 50%;
   background: var(--app-green);
-  color: #052e16;
+   color: #fffaf0;
   cursor: pointer;
-  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35);
+   box-shadow: 0 6px 16px rgba(180, 83, 42, 0.25);
   transition:
     transform 0.15s ease,
     box-shadow 0.2s ease;
@@ -385,7 +385,7 @@ onUnmounted(() => {
 
 .play-toggle:hover {
   transform: scale(1.06);
-  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.5);
+   box-shadow: 0 8px 20px rgba(180, 83, 42, 0.34);
 }
 
 .progress {
@@ -415,7 +415,7 @@ onUnmounted(() => {
 }
 
 .volume-slider :deep(.n-slider-rail) {
-  background: rgba(255, 255, 255, 0.14);
+   background: #d8c8b3;
 }
 
 .player-right {
@@ -448,7 +448,7 @@ onUnmounted(() => {
 
 .icon-btn:hover {
   color: var(--app-text);
-  background: rgba(255, 255, 255, 0.08);
+  background: rgba(180, 83, 42, 0.08);
 }
 
 .icon-btn.active {
@@ -489,7 +489,7 @@ onUnmounted(() => {
 }
 
 .queue-item:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: rgba(180, 83, 42, 0.07);
 }
 
 .queue-item.current .queue-name {
diff --git a/src/components/QrLogin.vue b/src/components/QrLogin.vue
index e4cef83..25873ab 100644
--- a/src/components/QrLogin.vue
+++ b/src/components/QrLogin.vue
@@ -212,7 +212,7 @@ function stopPolling() {
   padding: clamp(16px, 2vw, 22px);
   border: 1px solid var(--app-border);
   border-radius: 14px;
-  background: rgba(255, 255, 255, 0.02);
+  background: rgba(255, 250, 240, 0.72);
 }
 
 .setting-head {
@@ -280,7 +280,7 @@ function stopPolling() {
 }
 
 .qr-mask.success {
-  background: rgba(34, 197, 94, 0.72);
+  background: rgba(112, 132, 91, 0.72);
 }
 
 .qr-mask.expired {
diff --git a/src/components/SongTable.vue b/src/components/SongTable.vue
index 1590010..a9fe35f 100644
--- a/src/components/SongTable.vue
+++ b/src/components/SongTable.vue
@@ -79,7 +79,7 @@ function play(song: Song) {
   border: 1px solid var(--app-border);
   border-radius: 12px;
   overflow: hidden;
-  background: rgba(255, 255, 255, 0.02);
+  background: rgba(255, 250, 240, 0.72);
 }
 
 .table-head,
@@ -106,11 +106,11 @@ function play(song: Song) {
 }
 
 .table-row:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: #f2e8d9;
 }
 
 .table-row.active {
-  background: rgba(109, 93, 246, 0.12);
+  background: rgba(180, 83, 42, 0.1);
 }
 
 .col-index {
@@ -198,7 +198,7 @@ function play(song: Song) {
 
 .icon-btn:hover {
   color: var(--app-text);
-  background: rgba(255, 255, 255, 0.08);
+  background: rgba(180, 83, 42, 0.1);
 }
 
 .icon-btn .liked {
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 422baa5..68122b0 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -90,7 +90,7 @@ watch(
   height: 100vh;
   flex-shrink: 0;
   padding: 20px 14px 14px;
-  background: linear-gradient(180deg, #12122b 0%, #0f0f23 100%);
+   background: linear-gradient(180deg, #eadcc8 0%, #f4eddf 100%);
   border-right: 1px solid var(--app-border);
 }
 
@@ -108,9 +108,9 @@ watch(
   width: 34px;
   height: 34px;
   border-radius: 10px;
-  background: linear-gradient(135deg, #22c55e 0%, #0ea5e9 100%);
-  color: #052e16;
-  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.35);
+   background: linear-gradient(135deg, #d98b5f 0%, #b4532a 100%);
+   color: #fffaf0;
+   box-shadow: 0 6px 14px rgba(180, 83, 42, 0.25);
 }
 
 .brand-logo {
@@ -159,13 +159,13 @@ watch(
 
 .nav-item:hover {
   color: var(--app-text);
-  background: rgba(255, 255, 255, 0.05);
+   background: rgba(180, 83, 42, 0.08);
 }
 
 .nav-item.active {
-  color: #fff;
+   color: var(--app-primary);
   font-weight: 600;
-  background: linear-gradient(90deg, rgba(109, 93, 246, 0.24), rgba(109, 93, 246, 0.08));
+   background: linear-gradient(90deg, rgba(180, 83, 42, 0.16), rgba(180, 83, 42, 0.05));
 }
 
 .nav-section {
@@ -199,12 +199,12 @@ watch(
 
 .nav-sub:hover {
   color: var(--app-text);
-  background: rgba(255, 255, 255, 0.05);
+   background: rgba(180, 83, 42, 0.08);
 }
 
 .nav-sub.active {
   color: var(--app-green);
-  background: rgba(34, 197, 94, 0.08);
+   background: rgba(112, 132, 91, 0.12);
 }
 
 .sub-dot {
diff --git a/src/styles/global.css b/src/styles/global.css
index 612ee4a..a1a13a6 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,13 +1,13 @@
 :root {
-  --app-bg: #0f0f23;
-  --app-bg-elevated: #161632;
-  --app-card: #1a1a3a;
-  --app-border: rgba(255, 255, 255, 0.08);
-  --app-text: #f8fafc;
-  --app-text-secondary: #b9b9d6;
-  --app-text-muted: #6e6e96;
-  --app-primary: #6d5df6;
-  --app-green: #22c55e;
+  --app-bg: #f4eddf;
+  --app-bg-elevated: #eee2d1;
+  --app-card: #fffaf0;
+  --app-border: #d8c8b3;
+  --app-text: #3f3028;
+  --app-text-secondary: #6e584a;
+  --app-text-muted: #927b6c;
+  --app-primary: #b4532a;
+  --app-green: #70845b;
 }
 
 * {
@@ -38,7 +38,7 @@ body {
 }
 
 ::selection {
-  background: rgba(109, 93, 246, 0.45);
+  background: rgba(180, 83, 42, 0.22);
 }
 
 ::-webkit-scrollbar {
@@ -47,12 +47,12 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.14);
+  background: #d8c8b3;
   border-radius: 999px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.24);
+  background: #bfa992;
 }
 
 ::-webkit-scrollbar-track {
@@ -64,7 +64,7 @@ button {
 }
 
 :focus-visible {
-  outline: 2px solid var(--app-green);
+  outline: 2px solid var(--app-primary);
   outline-offset: 2px;
 }
 
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
index 1ba4be2..4b3421a 100644
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -161,7 +161,7 @@ onMounted(() => {
 .banner-text p {
   margin: 0;
   font-size: 15px;
-  color: rgba(255, 255, 255, 0.85);
+  color: rgba(255, 250, 240, 0.88);
 }
 
 .banner-mark {
@@ -239,7 +239,7 @@ onMounted(() => {
 }
 
 .mini-mark {
-  color: rgba(255, 255, 255, 0.4);
+  color: rgba(255, 250, 240, 0.62);
 }
 
 .mini-play {
@@ -252,7 +252,7 @@ onMounted(() => {
   height: 30px;
   border-radius: 50%;
   background: var(--app-green);
-  color: #052e16;
+  color: #fffaf0;
   opacity: 0;
   transform: translateY(5px);
   transition:
@@ -304,8 +304,8 @@ onMounted(() => {
 .rank-preview:hover,
 .rank-preview:focus-visible {
   transform: translateY(-2px);
-  border-color: rgba(109, 93, 246, 0.45);
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
+  border-color: rgba(180, 83, 42, 0.5);
+  box-shadow: 0 12px 28px rgba(96, 66, 45, 0.14);
 }
 
 .rank-head {
@@ -314,7 +314,7 @@ onMounted(() => {
   justify-content: space-between;
   height: 52px;
   padding: 0 16px;
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 250, 240, 0.94);
 }
 
 .rank-name {
diff --git a/src/views/PlaylistDetailView.vue b/src/views/PlaylistDetailView.vue
index 7192d34..fe56c80 100644
--- a/src/views/PlaylistDetailView.vue
+++ b/src/views/PlaylistDetailView.vue
@@ -77,7 +77,7 @@ const headerPlayCount = computed(() =>
 )
 const headerCover = computed(() => {
   const cover = summary.value?.cover ?? mockPlaylist.value?.cover ?? songs.value[0]?.cover ?? ""
-  return cover ? displayCover(cover) : "linear-gradient(135deg, #4338ca 0%, #7c3aed 100%)"
+  return cover ? displayCover(cover) : "linear-gradient(135deg, #4b9fb0 0%, #6f9ed8 100%)"
 })
 const playlistSource = computed<Source>(
   () => (summary.value?.source as Source) ?? settingsStore.defaultSource,
@@ -152,7 +152,7 @@ function favorite() {
 
 .back-btn:hover {
   color: var(--app-text);
-  background: rgba(255, 255, 255, 0.06);
+  background: rgba(180, 83, 42, 0.08);
 }
 
 .back-icon {
@@ -179,7 +179,7 @@ function favorite() {
 }
 
 .cover-mark {
-  color: rgba(255, 255, 255, 0.3);
+  color: rgba(255, 250, 240, 0.58);
 }
 
 .detail-info {
@@ -207,8 +207,8 @@ function favorite() {
   width: 26px;
   height: 26px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #22c55e, #0ea5e9);
-  color: #052e16;
+   background: linear-gradient(135deg, #d98b5f, #b4532a);
+   color: #fffaf0;
   font-size: 12px;
   font-weight: 700;
 }
diff --git a/src/views/RankingView.vue b/src/views/RankingView.vue
index bf3af77..04fdd8c 100644
--- a/src/views/RankingView.vue
+++ b/src/views/RankingView.vue
@@ -103,7 +103,7 @@ function playRank(rankIndex: number) {
   padding: clamp(12px, 1.8vw, 16px);
   border: 1px solid var(--app-border);
   border-radius: 14px;
-  background: rgba(255, 255, 255, 0.02);
+  background: rgba(255, 250, 240, 0.72);
   cursor: pointer;
   transition:
     transform 0.2s ease,
@@ -114,8 +114,8 @@ function playRank(rankIndex: number) {
 .rank-card:hover,
 .rank-card:focus-visible {
   transform: translateY(-2px);
-  border-color: rgba(109, 93, 246, 0.45);
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
+  border-color: rgba(180, 83, 42, 0.5);
+  box-shadow: 0 12px 28px rgba(96, 66, 45, 0.14);
 }
 
 .rank-cover {
@@ -130,7 +130,7 @@ function playRank(rankIndex: number) {
 }
 
 .cover-mark {
-  color: rgba(255, 255, 255, 0.3);
+  color: rgba(255, 250, 240, 0.62);
 }
 
 .rank-badge {
@@ -140,8 +140,8 @@ function playRank(rankIndex: number) {
   padding: 2px 8px;
   border-radius: 999px;
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.92);
-  background: rgba(0, 0, 0, 0.35);
+  color: #fffaf0;
+  background: rgba(63, 48, 40, 0.72);
   backdrop-filter: blur(4px);
 }
 
@@ -156,7 +156,7 @@ function playRank(rankIndex: number) {
   border: none;
   border-radius: 50%;
   background: var(--app-green);
-  color: #052e16;
+  color: #fffaf0;
   cursor: pointer;
   opacity: 0;
   transform: translateY(5px);
@@ -164,7 +164,7 @@ function playRank(rankIndex: number) {
     opacity 0.2s ease,
     transform 0.2s ease,
     box-shadow 0.2s ease;
-  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.4);
+  box-shadow: 0 8px 18px rgba(180, 83, 42, 0.24);
 }
 
 .rank-card:hover .play-btn,
@@ -256,7 +256,7 @@ function playRank(rankIndex: number) {
 
 .more-btn:hover {
   color: var(--app-green);
-  background: rgba(34, 197, 94, 0.08);
+  background: rgba(112, 132, 91, 0.12);
 }
 
 @media (max-width: 900px) {
diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
index e1292e6..b7766db 100644
--- a/src/views/SearchView.vue
+++ b/src/views/SearchView.vue
@@ -345,7 +345,7 @@ onBeforeUnmount(() => {
 
 .clear-btn:hover {
   color: var(--app-text);
-  background: rgba(255, 255, 255, 0.06);
+  background: rgba(180, 83, 42, 0.08);
 }
 
 .hot-title {
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 3a2e458..c67510c 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -85,7 +85,7 @@ const settingsStore = useSettingsStore()
   padding: clamp(16px, 2vw, 22px);
   border: 1px solid var(--app-border);
   border-radius: 14px;
-  background: rgba(255, 255, 255, 0.02);
+  background: rgba(255, 250, 240, 0.72);
 }
 
 .setting-head {
@@ -124,13 +124,13 @@ const settingsStore = useSettingsStore()
 }
 
 .source-item:hover {
-  border-color: rgba(109, 93, 246, 0.45);
-  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(180, 83, 42, 0.5);
+  background: rgba(180, 83, 42, 0.08);
 }
 
 .source-item.checked {
-  border-color: rgba(34, 197, 94, 0.5);
-  background: rgba(34, 197, 94, 0.06);
+  border-color: rgba(112, 132, 91, 0.58);
+  background: rgba(112, 132, 91, 0.1);
 }
 
 .source-label {
@@ -161,7 +161,7 @@ const settingsStore = useSettingsStore()
 }
 
 .default-radio:hover {
-  border-color: rgba(109, 93, 246, 0.45);
-  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(180, 83, 42, 0.5);
+  background: rgba(180, 83, 42, 0.08);
 }
 </style>