fix(ui): 批量替换所有组件中残留的硬编码深色值以彻底支持浅色主题

app/components/year-review/ArtistSlide.vue

@@ -43,7 +43,7 @@ defineProps({
 .bg-overlay {
   position: absolute;
   inset: 0;
-  background: linear-gradient(to top, #000, transparent, transparent);
+  background: linear-gradient(to top, var(--bg-primary, #111111), transparent, transparent);
   opacity: 0.8;
   z-index: 10;
 }

app/components/year-review/FirstSongSlide.vue

@@ -74,7 +74,7 @@ const formatDate = (dateStr) => {
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background-color: #000;
+  background-color: var(--bg-primary, #111111);
 }
 
 .bg-blur {
@@ -120,7 +120,7 @@ const formatDate = (dateStr) => {
 }
 
 .highlight {
-  color: #fff;
+  color: var(--text-primary, #ffffff);
   font-weight: 700;
   margin: 0 0.5rem;
 }
@@ -141,7 +141,7 @@ const formatDate = (dateStr) => {
   overflow: hidden;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  background: #111827;
+  background: var(--bg-secondary, #111827);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -181,7 +181,7 @@ const formatDate = (dateStr) => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #fff;
+  color: var(--text-primary, #ffffff);
 }
 
 .song-artist {

app/components/year-review/IntroSlide.vue

@@ -31,7 +31,7 @@ defineProps({
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background: radial-gradient(circle at center, #111827, #000000);
+  background: radial-gradient(circle at center, var(--bg-secondary, #111827), #000000);
 }
 
 .blob {

app/components/year-review/MiscSlide.vue

@@ -54,7 +54,7 @@ const formatPlatform = (platform) => {
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background-color: #111827; /* gray-900 */
+  background-color: var(--bg-secondary, #111827); /* gray-900 */
 }
 
 .bg-gradient {
@@ -63,7 +63,7 @@ const formatPlatform = (platform) => {
   left: 0;
   width: 100%;
   height: 50%;
-  background: linear-gradient(to bottom, #1f2937, transparent);
+  background: linear-gradient(to bottom, var(--bg-secondary, #1f2937), transparent);
   opacity: 0.2;
 }
 

app/components/year-review/OutroSlide.vue

@@ -56,13 +56,13 @@ defineEmits(['share'])
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background-color: #000;
+  background-color: var(--bg-primary, #111111);
 }
 
 .bg-gradient {
   position: absolute;
   inset: 0;
-  background: radial-gradient(circle at center, #1f2937, #000, #000);
+  background: radial-gradient(circle at center, var(--bg-secondary, #1f2937), #000, #000);
   opacity: 0.5;
 }
 
@@ -132,8 +132,8 @@ defineEmits(['share'])
   width: 100%;
   padding: 1rem 2rem;
   border-radius: 9999px;
-  background: #fff;
-  color: #000;
+  background: var(--card-bg, #fff);
+  color: var(--text-primary, #000);
   font-weight: 700;
   font-size: 1.125rem;
   overflow: hidden;
@@ -173,7 +173,7 @@ defineEmits(['share'])
   border-radius: 9999px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  color: #fff;
+  color: var(--text-primary, #ffffff);
   font-weight: 700;
   font-size: 1.125rem;
   backdrop-filter: blur(12px);

app/components/year-review/ShareCard.vue

@@ -63,7 +63,7 @@ defineExpose({
   height: 100%;
   min-height: 600px;
   overflow: hidden;
-  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+  background: linear-gradient(135deg, var(--bg-secondary, #0f0f23) 0%, #1a1a2e 50%, #16213e 100%);
 }
 
 .card-background {
@@ -127,7 +127,7 @@ defineExpose({
 .main-title {
   font-size: 3.5rem;
   font-weight: 900;
-  background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 50%, #9ca3af 100%);
+  background: linear-gradient(135deg, var(--card-bg, #ffffff) 0%, #e5e7eb 50%, #9ca3af 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;