style: use dynamic theme colors for reading streak

Author: devanshi14malhotra

frontend/css/reading-streak.css

@@ -8,8 +8,8 @@
 }
 
 .reading-streak-card {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 24px;
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
@@ -38,8 +38,8 @@
 
 .reading-streak-title i {
   font-size: 1.8rem;
-  color: #39d353; /* vibrant green flame to match the github vibe */
-  filter: drop-shadow(0 0 8px rgba(57, 211, 83, 0.4));
+  color: var(--accent-gold);
+  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-gold) 40%, transparent));
   animation: pulse-glow 2s infinite ease-in-out;
 }
 
@@ -57,8 +57,8 @@
 }
 
 .reading-streak-stat {
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 16px;
   padding: 0.75rem 1.25rem;
   min-width: 110px;
@@ -69,15 +69,15 @@
 .reading-streak-stat:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border-color: rgba(57, 211, 83, 0.25);
+  border-color: var(--accent-gold);
 }
 
 .reading-streak-stat-value {
   font-size: 2rem;
   font-weight: 700;
-  color: #39d353; /* GitHub bright green */
+  color: var(--text-main);
   line-height: 1.1;
-  text-shadow: 0 0 10px rgba(57, 211, 83, 0.2);
+  text-shadow: 0 0 10px color-mix(in srgb, var(--text-main) 20%, transparent);
 }
 
 .reading-streak-stat-label {
@@ -107,9 +107,9 @@
   gap: 0.6rem;
   padding: 0.75rem 1.5rem;
   border-radius: 999px;
-  background: rgba(57, 211, 83, 0.1);
-  border: 1px solid rgba(57, 211, 83, 0.25);
-  color: #39d353;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  color: var(--text-main);
   font-family: "Georgia", serif;
   font-weight: 700;
   font-size: 0.9rem;
@@ -119,19 +119,19 @@
 
 .reading-streak-btn:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(57, 211, 83, 0.25);
-  background: rgba(57, 211, 83, 0.2);
-  border-color: rgba(57, 211, 83, 0.4);
+  box-shadow: var(--shadow-hover);
+  background: var(--input-bg);
+  border-color: var(--accent-gold);
 }
 
 .reading-streak-btn:disabled {
   opacity: 0.65;
   cursor: not-allowed;
   transform: none;
   box-shadow: none;
-  background: rgba(255, 255, 255, 0.04);
-  border-color: rgba(255, 255, 255, 0.08);
-  color: var(--theme-text-muted, var(--text-muted, #7f8c8d));
+  background: var(--glass-bg);
+  border-color: var(--glass-border);
+  color: var(--text-muted);
 }
 
 .reading-streak-scroll {
@@ -148,12 +148,12 @@
 }
 
 .reading-streak-scroll::-webkit-scrollbar-thumb {
-  background: rgba(57, 211, 83, 0.2);
+  background: var(--text-muted);
   border-radius: 999px;
 }
 
 .reading-streak-scroll::-webkit-scrollbar-thumb:hover {
-  background: rgba(57, 211, 83, 0.4);
+  background: var(--text-main);
 }
 
 /* Heatmap container */
@@ -237,46 +237,43 @@
 
 /* Inactive (No reading) */
 .reading-streak-cell.inactive {
-  background: rgba(255, 255, 255, 0.04);
-  border-color: rgba(255, 255, 255, 0.02);
+  background: var(--input-bg);
+  border-color: var(--input-border);
 }
 
 /* Future/Out of window cells */
 .reading-streak-cell-empty {
   visibility: hidden; /* hide nicely rather than display block, maintaining grid geometry */
 }
 
-/* Intensity levels (GitHub Green Theme) */
+/* Intensity levels (Theme Colors) */
 .reading-streak-cell.active {
-  background: #0e4429;
-  border-color: rgba(14, 68, 41, 0.5);
-  box-shadow: 0 0 6px rgba(14, 68, 41, 0.2);
+  background: color-mix(in srgb, var(--text-main) 25%, transparent);
+  border-color: color-mix(in srgb, var(--text-main) 30%, transparent);
 }
 
 .reading-streak-cell.active2 {
-  background: #006d32;
-  border-color: rgba(0, 109, 50, 0.5);
-  box-shadow: 0 0 8px rgba(0, 109, 50, 0.3);
+  background: color-mix(in srgb, var(--text-main) 50%, transparent);
+  border-color: color-mix(in srgb, var(--text-main) 55%, transparent);
 }
 
 .reading-streak-cell.active3 {
-  background: #26a641;
-  border-color: rgba(38, 166, 65, 0.5);
-  box-shadow: 0 0 10px rgba(38, 166, 65, 0.4);
+  background: color-mix(in srgb, var(--text-main) 75%, transparent);
+  border-color: color-mix(in srgb, var(--text-main) 80%, transparent);
 }
 
 .reading-streak-cell.active4 {
-  background: #39d353;
-  border-color: rgba(57, 211, 83, 0.6);
-  box-shadow: 0 0 14px rgba(57, 211, 83, 0.6);
+  background: var(--text-main);
+  border-color: var(--text-main);
+  box-shadow: 0 0 10px color-mix(in srgb, var(--text-main) 50%, transparent);
 }
 
 /* Hover effect on cells */
 .reading-streak-cell:hover:not(.reading-streak-cell-empty) {
   transform: scale(1.3);
   z-index: 5;
-  border-color: rgba(255, 255, 255, 0.3);
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
+  border-color: var(--accent-gold);
+  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-gold) 50%, transparent);
 }
 
 /* Footer / Legend */
@@ -326,11 +323,11 @@
 
 @keyframes pulse-glow {
   0%, 100% {
-    filter: drop-shadow(0 0 4px rgba(57, 211, 83, 0.3));
+    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-gold) 30%, transparent));
     transform: scale(1);
   }
   50% {
-    filter: drop-shadow(0 0 12px rgba(57, 211, 83, 0.6));
+    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-gold) 60%, transparent));
     transform: scale(1.08);
   }
 }