Fix dark mode contrast for homepage stat card numbers

t-174·WorkTask·
·
·
·Omni/Jr.hs
Created3 months ago·Updated3 months ago

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)

Timeline (0)

No activity yet.