Fix dark mode contrast for homepage stat card numbers

t-174·WorkTask·
·
·
·Omni/Jr.hs
Created5 months ago·Updated5 months ago·pipeline runs →

Description

Edit

Problem

In dark mode, the "Task Status" stat cards on the homepage have poor contrast. The .stat-count colors are dark (designed for light backgrounds) but the card background is now dark #1f2937.

Current light theme colors (not readable on dark bg):

  • Open: #92400e (dark brown)
  • In Progress: #1e40af (dark blue)
  • Review: #6b21a8 (dark purple)
  • Approved: #0e7490 (dark cyan)
  • Done: #065f46 (dark green)

Solution

Add dark mode overrides for .stat-count colors using lighter variants.

CSS Changes

Add to darkModeStyles in Style.hs:

-- Stat card count colors for dark mode
(".stat-card.badge-open" |> ".stat-count") ? color "#fbbf24"      -- amber-400
(".stat-card.badge-inprogress" |> ".stat-count") ? color "#60a5fa" -- blue-400
(".stat-card.badge-review" |> ".stat-count") ? color "#a78bfa"     -- violet-400
(".stat-card.badge-approved" |> ".stat-count") ? color "#22d3ee"   -- cyan-400
(".stat-card.badge-done" |> ".stat-count") ? color "#34d399"       -- emerald-400

These are the Tailwind 400-level colors which provide good contrast on dark backgrounds while matching the existing border accent colors.

Files to Modify

1. Omni/Jr/Web/Style.hs:

  • Add stat-count color overrides inside darkModeStyles block (after line ~1259)

Testing

1. Open homepage in dark mode 2. Verify all 5 stat cards have readable count numbers 3. Verify colors still match the left border accent colors 4. Check light mode still works (no regression)

Git Commits

b46cd344Fix dark mode contrast for homepage stat card numbers
Ben Sima5 months ago1 files

Timeline (0)

No activity yet.