fix(ui): 修复浅色主题下的 Tailwind CSS 及部分残留硬编码

app/components/Songs/RequestForm.vue

@@ -2944,7 +2944,7 @@ defineExpose({
   font-weight: 400;
   font-size: 15px;
   letter-spacing: 0.04em;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   margin-bottom: 0.75rem;
 }
 
@@ -2968,7 +2968,7 @@ defineExpose({
   gap: 0.5rem;
   font-size: 15px;
   font-weight: 700;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   margin-bottom: 1.25rem;
 }
 
@@ -2980,7 +2980,7 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-size: 13px;
   line-height: 1.8;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-tertiary);
 }
 
 .rule-item {
@@ -2990,7 +2990,7 @@ defineExpose({
 
 .rule-item span {
   margin-right: 0.5rem;
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-disabled);
   font-weight: 600;
 }
 
@@ -3025,7 +3025,7 @@ defineExpose({
   gap: 2px;
   padding: 8px 10px;
   border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--border-tertiary);
   background: rgba(6, 15, 22, 0.9);
   backdrop-filter: blur(8px);
   min-width: 140px;
@@ -3066,7 +3066,7 @@ defineExpose({
 .badge-title {
   font-size: 12px;
   font-weight: 800;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
 }
 
 .submission-status-badge.open .badge-title {
@@ -3080,7 +3080,7 @@ defineExpose({
 .badge-subtitle {
   font-size: 11px;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
 }
 
 .login-required-hint {
@@ -3136,7 +3136,7 @@ defineExpose({
   min-width: 28px;
   padding: 0 10px;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--border-primary);
   background: rgba(0, 0, 0, 0.25);
   color: rgba(255, 255, 255, 0.85);
   font-family: 'MiSans', sans-serif;
@@ -3277,7 +3277,7 @@ defineExpose({
 .remove-collaborator {
   background: none;
   border: none;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -3292,7 +3292,7 @@ defineExpose({
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 6px;
   padding: 0.25rem 0.75rem;
@@ -3474,7 +3474,7 @@ defineExpose({
   font-weight: 600;
   font-size: 15px;
   letter-spacing: 0.02em;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   margin-bottom: 0.25rem;
 }
 
@@ -3606,7 +3606,7 @@ defineExpose({
   gap: 0.25rem;
   background: transparent;
   border: none;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-tertiary);
   padding: 0.2rem 0.4rem;
   border-radius: 4px;
   font-size: 11px;
@@ -3628,7 +3628,7 @@ defineExpose({
 .import-btn {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--border-tertiary);
   padding: 0.45rem 0.75rem;
   border-radius: 7px;
   font-size: 12px;
@@ -3676,7 +3676,7 @@ defineExpose({
 
 .user-name {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
@@ -3712,10 +3712,10 @@ defineExpose({
 
 .search-type-switch {
   display: flex;
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--bg-primary);
   border-radius: 6px;
   padding: 2px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border-secondary);
 }
 
 .radio-label {
@@ -3757,18 +3757,18 @@ defineExpose({
 
 .logout-btn:hover {
   color: rgba(255, 255, 255, 0.7);
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
 }
 
 .platform-btn {
   background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--border-primary);
   border-radius: 8px;
   padding: 0.45rem 0.85rem;
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-tertiary);
   cursor: pointer;
   transition: all 0.3s ease;
   white-space: nowrap;
@@ -3787,7 +3787,7 @@ defineExpose({
 
 /* 音源状态显示 */
 .source-status-display {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   padding: 1rem;
@@ -3805,13 +3805,13 @@ defineExpose({
 .status-title {
   font-size: 14px;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   font-family: 'MiSans', sans-serif;
 }
 
 .status-summary {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   background: rgba(255, 255, 255, 0.1);
   padding: 0.25rem 0.5rem;
   border-radius: 6px;
@@ -3954,7 +3954,7 @@ defineExpose({
 }
 
 .loading-text {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   font-family: 'MiSans', sans-serif;
   font-weight: 500;
   margin: 0;
@@ -4037,7 +4037,7 @@ defineExpose({
 
 .empty-hint,
 .initial-hint {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   font-size: 13px;
   margin: 0;
 }
@@ -4222,7 +4222,7 @@ defineExpose({
 }
 
 .alert-hint {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   font-size: 14px;
   margin-top: 0.5rem;
 }
@@ -4385,7 +4385,7 @@ defineExpose({
   align-items: center;
   padding: 1.25rem 1.5rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--bg-secondary);
 }
 
 .modal-header h3 {
@@ -4449,7 +4449,7 @@ defineExpose({
 }
 
 .btn-secondary {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
   border-color: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.8);
 }
@@ -4516,7 +4516,7 @@ defineExpose({
 }
 
 .result-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
 }
 
 .result-cover {
@@ -4625,7 +4625,7 @@ defineExpose({
 }
 
 .result-artist {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   font-size: 13px;
   margin: 0.25rem 0;
   white-space: nowrap;
@@ -4693,7 +4693,7 @@ defineExpose({
 
 .similar-text {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   font-family: 'MiSans', sans-serif;
   font-weight: 500;
 }
@@ -4787,9 +4787,9 @@ defineExpose({
 }
 
 .replay-btn:disabled {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
   border-color: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-disabled);
   cursor: not-allowed;
   transform: none;
 }
@@ -4957,14 +4957,14 @@ defineExpose({
     padding: 1.25rem;
     background: rgba(255, 255, 255, 0.04);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--border-tertiary);
     border-radius: 18px;
   }
 
   .rules-title {
     font-size: 15px;
     font-weight: 700;
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--text-primary);
     margin-bottom: 1.25rem;
     letter-spacing: normal;
   }
@@ -5009,9 +5009,9 @@ defineExpose({
     display: flex;
     flex-direction: column;
     margin-bottom: 2rem;
-    background: rgba(255, 255, 255, 0.02);
+    background: var(--bg-secondary);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--border-tertiary);
     border-radius: 20px;
     /* 允许容器内容触发页面滚动 */
     touch-action: pan-y;
@@ -5103,7 +5103,7 @@ defineExpose({
   }
 
   .search-input {
-    background: rgba(255, 255, 255, 0.05);
+    background: var(--bg-tertiary);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     padding: 0.75rem 1rem;
@@ -5128,7 +5128,7 @@ defineExpose({
   }
   
   .platform-selection {
-    background: rgba(0, 0, 0, 0.2);
+    background: var(--bg-primary);
     padding: 4px;
     border-radius: 12px;
     margin-bottom: 0.5rem;
@@ -5143,7 +5143,7 @@ defineExpose({
     border-radius: 10px;
     background: transparent;
     border: none;
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--text-tertiary);
     min-width: auto;
   }
 
@@ -5471,7 +5471,7 @@ defineExpose({
   align-items: center;
   gap: 0.4rem;
   background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--border-primary);
   border-radius: 8px;
   padding: 0.6rem 0.8rem;
   color: rgba(255, 255, 255, 0.8);
@@ -5520,7 +5520,7 @@ defineExpose({
 .video-author {
   font-family: 'MiSans', sans-serif;
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
 }
 
 .episodes-list {
@@ -5535,7 +5535,7 @@ defineExpose({
   align-items: center;
   gap: 1rem;
   padding: 1rem;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   cursor: pointer;
@@ -5577,6 +5577,6 @@ defineExpose({
 .episode-duration {
   font-family: 'MiSans', sans-serif;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-tertiary);
 }
 </style>

app/components/Songs/ScheduleList.vue

@@ -106,7 +106,7 @@
           <div v-else-if="!schedules || schedules.length === 0" key="empty-all" class="empty">
             <div class="icon mb-4">🎵</div>
             <p>暂无排期信息</p>
-            <p class="text-sm text-gray">点歌后等待管理员安排播出时间</p>
+            <p class="text-sm text-text-secondary">点歌后等待管理员安排播出时间</p>
           </div>
 
           <div v-else-if="currentDateSchedules.length === 0" key="empty-date" class="empty">
@@ -1600,15 +1600,15 @@ const vRipple = {
   align-items: center;
   margin-bottom: 1.5rem;
   padding: 1rem 1.25rem;
-  background: linear-gradient(135deg, rgba(11, 90, 254, 0.1) 0%, rgba(33, 36, 45, 0.9) 100%);
+  background: var(--bg-secondary);
   border-radius: 12px;
-  border: 1px solid rgba(11, 90, 254, 0.2);
+  border: 1px solid var(--border-secondary);
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .semester-label {
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   font-size: 15px;
   font-weight: 500;
   margin-right: 0.75rem;
@@ -1617,10 +1617,10 @@ const vRipple = {
 }
 
 .semester-select {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
-  border: 1px solid rgba(255, 255, 255, 0.25);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-tertiary);
   border-radius: 8px;
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   padding: 0.6rem 1rem;
   font-size: 14px;
   font-weight: 500;
@@ -1649,7 +1649,7 @@ const vRipple = {
 
 .semester-select option {
   background: var(--bg-secondary, #1a1d24);
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   padding: 0.5rem;
 }
 
@@ -1710,7 +1710,7 @@ const vRipple = {
 
 .date-item.active {
   background: var(--bg-tertiary, #21242d);
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   font-weight: 600;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(11, 90, 254, 0.2);
@@ -1775,7 +1775,7 @@ const vRipple = {
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 20px;
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   margin: 0;
 }
 
@@ -1886,7 +1886,7 @@ const vRipple = {
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -1964,7 +1964,7 @@ const vRipple = {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   letter-spacing: 0.5px;
 }
 
@@ -1984,7 +1984,7 @@ const vRipple = {
 
 .playlist-modal-close:hover {
   background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   transform: rotate(90deg);
 }
 
@@ -2087,7 +2087,7 @@ const vRipple = {
 
 .user-name {
   font-weight: 600;
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   font-size: 15px;
 }
 
@@ -2163,7 +2163,7 @@ const vRipple = {
   width: 100%;
   background: var(--bg-secondary, #141418);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   padding: 0.75rem 1rem;
   border-radius: 10px;
   font-size: 14px;
@@ -2210,7 +2210,7 @@ const vRipple = {
 
 .btn-icon:hover {
   background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
 }
 
 .btn-icon:disabled {
@@ -2421,7 +2421,7 @@ const vRipple = {
 
 .song-name {
   font-size: 14px;
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
@@ -2469,7 +2469,7 @@ const vRipple = {
 
 .btn-primary {
   background: var(--primary);
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
 }
 
@@ -2488,7 +2488,7 @@ const vRipple = {
 
 .btn-secondary {
   background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
 }
 
 .btn-secondary:hover {
@@ -2502,7 +2502,7 @@ const vRipple = {
 
 .btn-ghost:hover {
   background: rgba(255, 255, 255, 0.05);
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
 }
 
 /* 动画定义 */
@@ -2537,7 +2537,7 @@ const vRipple = {
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   cursor: pointer;
   margin-right: 0.5rem;
   backdrop-filter: blur(10px);
@@ -2662,7 +2662,7 @@ const vRipple = {
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   font-size: 28px;
   font-weight: bold;
   font-family: 'MiSans', sans-serif;
@@ -2725,7 +2725,7 @@ const vRipple = {
   font-weight: 600;
   font-size: 16px;
   letter-spacing: 0.04em;
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   margin-bottom: 0.5rem;
   display: flex;
   align-items: flex-start;
@@ -2824,7 +2824,7 @@ const vRipple = {
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 12px;
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   opacity: 0.4;
 }
 
@@ -2919,7 +2919,7 @@ const vRipple = {
   .date-text {
     font-size: 15px;
     font-weight: 600;
-    color: var(--text-primary, #ffffff);
+    color: var(--text-primary);
     white-space: nowrap;
     text-shadow:
       0 0 10px rgba(255, 255, 255, 0.2),
@@ -2928,7 +2928,7 @@ const vRipple = {
 
   .dropdown-icon {
     opacity: 0.5;
-    color: var(--text-primary, #ffffff);
+    color: var(--text-primary);
   }
 
   .mobile-action-btn {
@@ -3118,7 +3118,7 @@ const vRipple = {
     font-weight: 600;
     margin-bottom: 2px;
     line-height: 1.4;
-    color: var(--text-primary, #ffffff);
+    color: var(--text-primary);
     letter-spacing: 0.01em;
   }
 
@@ -3378,8 +3378,8 @@ const vRipple = {
 
 .date-nav-btn {
   background: rgba(11, 90, 254, 0.1);
-  border: 1px solid rgba(11, 90, 254, 0.2);
-  color: var(--text-primary, #ffffff);
+  border: 1px solid var(--border-secondary);
+  color: var(--text-primary);
   border-radius: 50%;
   width: 36px;
   height: 36px;
@@ -3403,7 +3403,7 @@ const vRipple = {
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 16px;
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary);
   text-align: center;
   flex: 1;
   white-space: pre-line;

app/components/UserTutorial.vue

@@ -2,11 +2,11 @@
   <div class="user-tutorial-container relative">
     <div class="tutorial-header flex justify-between items-start">
       <div>
-        <h3 class="text-lg font-black text-zinc-100 flex items-center gap-2">
-          <BookOpen class="w-5 h-5 text-blue-400" />
+        <h3 class="text-lg font-black text-text-primary flex items-center gap-2">
+          <BookOpen class="w-5 h-5 text-primary" />
           使用指南
         </h3>
-        <p class="text-xs text-zinc-500 mt-1">快速了解如何使用 VoiceHub 校园广播系统</p>
+        <p class="text-xs text-text-secondary mt-1">快速了解如何使用 VoiceHub 校园广播系统</p>
       </div>
       <button 
         class="start-tour-btn"
@@ -19,7 +19,7 @@
 
     <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
       <div class="tutorial-card">
-        <div class="card-icon bg-blue-500/10 text-blue-400">
+        <div class="card-icon bg-primary/10 text-primary">
           <Search class="w-6 h-6" />
         </div>
         <h4 class="card-title">1. 搜索与投稿</h4>
@@ -27,7 +27,7 @@
       </div>
 
       <div class="tutorial-card">
-        <div class="card-icon bg-emerald-500/10 text-emerald-400">
+        <div class="card-icon bg-success/10 text-success">
           <ThumbsUp class="w-6 h-6" />
         </div>
         <h4 class="card-title">2. 互动与点赞</h4>
@@ -35,7 +35,7 @@
       </div>
 
       <div class="tutorial-card">
-        <div class="card-icon bg-purple-500/10 text-purple-400">
+        <div class="card-icon bg-[#a855f7]/10 text-[#a855f7]">
           <CalendarDays class="w-6 h-6" />
         </div>
         <h4 class="card-title">3. 关注排期与通知</h4>
@@ -276,25 +276,25 @@ onMounted(() => {
 
 <style scoped>
 .user-tutorial-container {
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--bg-secondary, rgba(0, 0, 0, 0.4));
   border-radius: 16px;
   padding: 1.5rem;
   margin-top: 1.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.05));
   backdrop-filter: blur(10px);
 }
 
 .tutorial-card {
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary, rgba(255, 255, 255, 0.02));
+  border: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.05));
   border-radius: 12px;
   padding: 1.25rem;
   transition: all 0.3s ease;
 }
 
 .tutorial-card:hover {
-  background: rgba(255, 255, 255, 0.04);
-  border-color: rgba(255, 255, 255, 0.1);
+  background: var(--bg-hover, rgba(255, 255, 255, 0.04));
+  border-color: var(--border-tertiary, rgba(255, 255, 255, 0.1));
   transform: translateY(-2px);
 }
 
@@ -312,14 +312,14 @@ onMounted(() => {
   font-family: 'MiSans', sans-serif;
   font-weight: 800;
   font-size: 0.95rem;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary, rgba(255, 255, 255, 0.9));
   margin-bottom: 0.5rem;
 }
 
 .card-desc {
   font-family: 'MiSans', sans-serif;
   font-size: 0.8rem;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-secondary, rgba(255, 255, 255, 0.5));
   line-height: 1.6;
 }
 
@@ -387,14 +387,14 @@ onMounted(() => {
 .tour-title {
   font-size: 1.1rem;
   font-weight: 800;
-  color: #f4f4f5;
+  color: var(--text-primary);
   margin: 0;
 }
 
 .tour-close-btn {
   background: none;
   border: none;
-  color: #71717a;
+  color: var(--text-tertiary);
   font-size: 1.5rem;
   line-height: 1;
   cursor: pointer;
@@ -403,11 +403,11 @@ onMounted(() => {
 }
 
 .tour-close-btn:hover {
-  color: #f4f4f5;
+  color: var(--text-primary);
 }
 
 .tour-body p {
-  color: #a1a1aa;
+  color: var(--text-secondary);
   font-size: 0.9rem;
   line-height: 1.5;
   margin: 0 0 1rem 0;
@@ -420,7 +420,7 @@ onMounted(() => {
 }
 
 .tour-progress {
-  color: #71717a;
+  color: var(--text-tertiary);
   font-size: 0.8rem;
   font-weight: 600;
 }
@@ -441,7 +441,7 @@ onMounted(() => {
 
 .tour-btn-secondary {
   background: var(--bg-tertiary, #27272a);
-  color: #d4d4d8;
+  color: var(--text-primary);
   border: 1px solid var(--border-secondary, #3f3f46);
 }
 
@@ -451,7 +451,7 @@ onMounted(() => {
 
 .tour-btn-primary {
   background: #3b82f6;
-  color: white;
+  color: var(--btn-primary-text);
   border: none;
 }
 

fix-more-colors.cjs

@@ -0,0 +1,102 @@
+const fs = require('fs');
+const path = require('path');
+
+function replaceInFile(filePath) {
+    let content = fs.readFileSync(filePath, 'utf8');
+    
+    // In UserTutorial.vue
+    if (filePath.includes('UserTutorial.vue')) {
+        content = content.replace(/text-zinc-100/g, 'text-text-primary');
+        content = content.replace(/text-zinc-500/g, 'text-text-secondary');
+        content = content.replace(/text-blue-400/g, 'text-primary');
+        content = content.replace(/bg-blue-500\/10/g, 'bg-primary\/10');
+        content = content.replace(/text-emerald-400/g, 'text-success');
+        content = content.replace(/bg-emerald-500\/10/g, 'bg-success\/10');
+        content = content.replace(/text-purple-400/g, 'text-[#a855f7]'); // Use exact hex or leave it, maybe text-purple-500
+        content = content.replace(/bg-purple-500\/10/g, 'bg-[#a855f7]\/10');
+        content = content.replace(/rgba\(0,\s*0,\s*0,\s*0\.4\)/g, 'var(--bg-secondary, rgba(0, 0, 0, 0.4))');
+        content = content.replace(/rgba\(255,\s*255,\s*255,\s*0\.05\)/g, 'var(--border-secondary, rgba(255, 255, 255, 0.05))');
+        content = content.replace(/rgba\(255,\s*255,\s*255,\s*0\.02\)/g, 'var(--bg-tertiary, rgba(255, 255, 255, 0.02))');
+        content = content.replace(/rgba\(255,\s*255,\s*255,\s*0\.04\)/g, 'var(--bg-hover, rgba(255, 255, 255, 0.04))');
+        content = content.replace(/rgba\(255,\s*255,\s*255,\s*0\.1\)/g, 'var(--border-tertiary, rgba(255, 255, 255, 0.1))');
+        content = content.replace(/rgba\(255,\s*255,\s*255,\s*0\.9\)/g, 'var(--text-primary, rgba(255, 255, 255, 0.9))');
+        content = content.replace(/rgba\(255,\s*255,\s*255,\s*0\.5\)/g, 'var(--text-secondary, rgba(255, 255, 255, 0.5))');
+        
+        // Fix `.tour-popover` which has hardcoded text colors in p tags
+        content = content.replace(/color:\s*#f4f4f5;/g, 'color: var(--text-primary);');
+        content = content.replace(/color:\s*#a1a1aa;/g, 'color: var(--text-secondary);');
+        content = content.replace(/color:\s*#71717a;/g, 'color: var(--text-tertiary);');
+        content = content.replace(/color:\s*#d4d4d8;/g, 'color: var(--text-primary);');
+        content = content.replace(/color:\s*white;/g, 'color: var(--btn-primary-text);');
+    }
+
+    // In ScheduleList.vue
+    if (filePath.includes('ScheduleList.vue')) {
+        content = content.replace(/class="text-sm text-gray"/g, 'class="text-sm text-text-secondary"');
+        content = content.replace(/background: linear-gradient\(135deg, rgba\(11, 90, 254, 0\.1\) 0%, rgba\(33, 36, 45, 0\.9\) 100%\);/g, 'background: var(--bg-secondary);');
+        content = content.replace(/border: 1px solid rgba\(11, 90, 254, 0\.2\);/g, 'border: 1px solid var(--border-secondary);');
+        content = content.replace(/background: linear-gradient\(135deg, rgba\(255, 255, 255, 0\.15\) 0%, rgba\(255, 255, 255, 0\.08\) 100%\);/g, 'background: var(--bg-tertiary);');
+        content = content.replace(/border: 1px solid rgba\(255, 255, 255, 0\.25\);/g, 'border: 1px solid var(--border-tertiary);');
+        content = content.replace(/color: var\(--text-primary, #ffffff\);/g, 'color: var(--text-primary);');
+        // schedule-content empty state
+        // The .empty rule in ScheduleList.vue:
+        content = content.replace(/\.empty \{[\s\S]*?\}/g, (match) => {
+            return match.replace(/color:\s*rgba\(255, 255, 255, 0.5\);/, 'color: var(--text-secondary);')
+                        .replace(/color:\s*#a0a0a0;/, 'color: var(--text-secondary);');
+        });
+        content = content.replace(/\.empty-dates \{[\s\S]*?\}/g, (match) => {
+            return match.replace(/color:\s*rgba\(255, 255, 255, 0.5\);/, 'color: var(--text-secondary);');
+        });
+    }
+
+    // In RequestForm.vue
+    if (filePath.includes('RequestForm.vue')) {
+        // search-results-container
+        content = content.replace(/background:\s*rgba\(255, 255, 255, 0.02\);/g, 'background: var(--bg-secondary);');
+        content = content.replace(/border:\s*1px solid rgba\(255, 255, 255, 0.05\);/g, 'border: 1px solid var(--border-secondary);');
+        content = content.replace(/background:\s*rgba\(255, 255, 255, 0.05\);/g, 'background: var(--bg-tertiary);');
+        content = content.replace(/color:\s*rgba\(255, 255, 255, 0.9\);/g, 'color: var(--text-primary);');
+        content = content.replace(/color:\s*rgba\(255, 255, 255, 0.6\);/g, 'color: var(--text-secondary);');
+        content = content.replace(/color:\s*rgba\(255, 255, 255, 0.5\);/g, 'color: var(--text-tertiary);');
+        content = content.replace(/color:\s*rgba\(255, 255, 255, 0.3\);/g, 'color: var(--text-disabled);');
+        content = content.replace(/border:\s*1px solid rgba\(255, 255, 255, 0.08\);/g, 'border: 1px solid var(--border-tertiary);');
+        content = content.replace(/border:\s*1px solid rgba\(255, 255, 255, 0.12\);/g, 'border: 1px solid var(--border-primary);');
+        content = content.replace(/background:\s*rgba\(0, 0, 0, 0.2\);/g, 'background: var(--bg-primary);');
+        
+        // submission-status-badge
+        content = content.replace(/\.submission-status-badge\.open \{[\s\S]*?\}/g, (match) => {
+            return match.replace(/background:\s*rgba\(16, 185, 129, 0.1\);/g, 'background: var(--success-light);')
+                        .replace(/border:\s*1px solid rgba\(16, 185, 129, 0.2\);/g, 'border: 1px solid var(--success-border);')
+                        .replace(/color:\s*#34d399;/g, 'color: var(--success);');
+        });
+        content = content.replace(/\.submission-status-badge\.closed \{[\s\S]*?\}/g, (match) => {
+            return match.replace(/background:\s*rgba\(239, 68, 68, 0.1\);/g, 'background: var(--error-light);')
+                        .replace(/border:\s*1px solid rgba\(239, 68, 68, 0.2\);/g, 'border: 1px solid var(--error-border);')
+                        .replace(/color:\s*#f87171;/g, 'color: var(--error);');
+        });
+        content = content.replace(/\.badge-title \{[\s\S]*?\}/g, (match) => {
+            return match.replace(/color:\s*rgba\(255, 255, 255, 0.9\);/, 'color: var(--text-primary);');
+        });
+
+        // Rules Section
+        content = content.replace(/\.rules-section \{[\s\S]*?\}/g, (match) => {
+            return match.replace(/background:\s*rgba\(255, 255, 255, 0.02\);/, 'background: var(--bg-secondary);')
+                        .replace(/border:\s*1px solid rgba\(255, 255, 255, 0.05\);/, 'border: 1px solid var(--border-secondary);');
+        });
+        content = content.replace(/\.section-title \{[\s\S]*?\}/g, (match) => {
+            return match.replace(/color:\s*rgba\(255, 255, 255, 0.9\);/, 'color: var(--text-primary);');
+        });
+        content = content.replace(/\.guidelines-content \{[\s\S]*?\}/g, (match) => {
+            return match.replace(/color:\s*rgba\(255, 255, 255, 0.6\);/, 'color: var(--text-secondary);')
+                        .replace(/background:\s*rgba\(255, 255, 255, 0.02\);/, 'background: var(--bg-tertiary);')
+                        .replace(/border:\s*1px solid rgba\(255, 255, 255, 0.05\);/, 'border: 1px solid var(--border-tertiary);');
+        });
+    }
+
+    fs.writeFileSync(filePath, content, 'utf8');
+    console.log(`Processed ${filePath}`);
+}
+
+replaceInFile('app/components/UserTutorial.vue');
+replaceInFile('app/components/Songs/ScheduleList.vue');
+replaceInFile('app/components/Songs/RequestForm.vue');

tailwind.config.ts

@@ -18,6 +18,13 @@ export default <Config>{
         warning: 'var(--warning)',
         error: 'var(--error)',
         info: 'var(--info)',
+        text: {
+          primary: 'var(--text-primary)',
+          secondary: 'var(--text-secondary)',
+          tertiary: 'var(--text-tertiary)',
+          quaternary: 'var(--text-quaternary)',
+          disabled: 'var(--text-disabled)'
+        },
         surface: {
           DEFAULT: 'var(--bg-primary)',
           muted: 'var(--bg-secondary)',