From f276c5e270a3a488db1f83f8fd9610657824e4a0 Mon Sep 17 00:00:00 2001
From: Deco Vander <deco@deco.sh>
Date: Thu, 3 Jul 2025 21:02:47 -0400
Subject: [PATCH] Improve dark mode text contrast by using dedicated color
 variables

Problem: Text with opacity created gray-on-gray which was hard to read in dark mode.

Solution: Added dedicated color variables for text hierarchy:
- --text-color: Primary text (bright)
- --text-secondary: Secondary text (medium brightness)
- --text-tertiary: Tertiary text (dimmer but still readable)

Dark mode colors:
- Primary: #e0e0e0 (bright white-ish)
- Secondary: #b0b0b0 (medium gray)
- Tertiary: #909090 (dimmer gray)

Light mode colors:
- Primary: #333 (dark)
- Secondary: #666 (medium gray)
- Tertiary: #999 (light gray)

This provides much better contrast and readability in dark mode while maintaining the visual hierarchy.
---
 public/style.css | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/public/style.css b/public/style.css
index 252f1c3..68f5580 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2,6 +2,8 @@
 :root {
     --bg-color: #f4f4f9;
     --text-color: #333;
+    --text-secondary: #666;
+    --text-tertiary: #999;
     --card-bg: white;
     --border-color: #ddd;
     --input-bg: white;
@@ -22,6 +24,8 @@
 [data-theme="dark"] {
     --bg-color: #1a1a1a;
     --text-color: #e0e0e0;
+    --text-secondary: #b0b0b0;
+    --text-tertiary: #909090;
     --card-bg: #2d2d2d;
     --border-color: #404040;
     --input-bg: #333;
@@ -43,6 +47,8 @@
     :root[data-theme="auto"] {
         --bg-color: #1a1a1a;
         --text-color: #e0e0e0;
+        --text-secondary: #b0b0b0;
+        --text-tertiary: #909090;
         --card-bg: #2d2d2d;
         --border-color: #404040;
         --input-bg: #333;
@@ -64,6 +70,8 @@
     :root[data-theme="auto"] {
         --bg-color: #f4f4f9;
         --text-color: #333;
+        --text-secondary: #666;
+        --text-tertiary: #999;
         --card-bg: white;
         --border-color: #ddd;
         --input-bg: white;
@@ -177,8 +185,7 @@ input[type="text"], textarea {
 }
 
 .input-help {
-    color: var(--text-color);
-    opacity: 0.7;
+    color: var(--text-tertiary);
     font-size: 0.85em;
     margin-top: 4px;
     display: block;
@@ -268,8 +275,7 @@ footer {
 
 .disclaimer {
     font-size: 0.8em;
-    color: var(--text-color);
-    opacity: 0.7;
+    color: var(--text-tertiary);
 }
 
 /* Reports header and toggle */
@@ -365,8 +371,7 @@ footer {
 }
 
 .table-info {
-    color: var(--text-color);
-    opacity: 0.7;
+    color: var(--text-tertiary);
     font-size: 14px;
 }
 
@@ -378,8 +383,7 @@ footer {
 }
 
 .details-cell {
-    color: var(--text-color);
-    opacity: 0.8;
+    color: var(--text-secondary);
     font-style: italic;
     max-width: 200px;
     overflow: hidden;
@@ -389,8 +393,7 @@ footer {
 
 .time-cell {
     font-size: 12px;
-    color: var(--text-color);
-    opacity: 0.7;
+    color: var(--text-tertiary);
 }
 
 .remaining-cell {
@@ -415,8 +418,7 @@ footer {
 
 .loading {
     text-align: center;
-    color: var(--text-color);
-    opacity: 0.7;
+    color: var(--text-tertiary);
     font-style: italic;
 }