Skip to main content

​
Dark Mode Hover Fix Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.
Goal: Fix all dark mode hover states globally so every interactive element shows a clearly visible, primary-tinted highlight on hover. Architecture: Add a single --hover-overlay CSS variable to .dark set to 10% of the primary purple. Use a @layer utilities block in index.css to remap all hover:bg-muted/*, hover:bg-accent, and hover:bg-secondary variants to this variable — higher specificity wins cleanly within the same layer, no !important needed. Also fix the existing .dark table tr:hover rule which uses a near-black accent value. Tech Stack: Tailwind CSS v4, CSS custom properties, @layer utilities

​
Task 1: Add --hover-overlay variable and fix index.css

Files:
  • Modify: ui/src/index.css
Context: The .dark block starts at line 119. The .dark table tr:hover rule is at lines 183–185. We add three things: the new variable, the updated table rule, and the @layer utilities override block.
  • Step 1: Add --hover-overlay to the .dark block
In ui/src/index.css, inside the .dark { ... } block (after --sidebar-ring: hsl(250 85% 65%); near line 157), add: 
  --hover-overlay: hsl(250 85% 65% / 0.1);
  • Step 2: Update the .dark table tr:hover rule
Find this block (around line 183): 
/* Table Row Hover Polish */
.dark table tr:hover {
  background-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
Replace with: 
/* Table Row Hover Polish */
.dark table tr:hover {
  background-color: var(--hover-overlay) !important;
}
  • Step 3: Add the @layer utilities override block
After the .dark .glass-card:hover block (around line 173) and before the /* Sidebar Hover Polish */ comment, add: 
/* Dark mode: remap all muted/accent hover states to the canonical hover overlay */
@layer utilities {
  .dark .hover\:bg-muted:hover,
  .dark .hover\:bg-muted\/5:hover,
  .dark .hover\:bg-muted\/10:hover,
  .dark .hover\:bg-muted\/20:hover,
  .dark .hover\:bg-muted\/30:hover,
  .dark .hover\:bg-muted\/35:hover,
  .dark .hover\:bg-muted\/40:hover,
  .dark .hover\:bg-muted\/50:hover,
  .dark .hover\:bg-muted\/60:hover,
  .dark .hover\:bg-secondary:hover,
  .dark .hover\:bg-secondary\/50:hover,
  .dark .hover\:bg-accent:hover {
    background-color: var(--hover-overlay);
  }
}
  • Step 4: Verify the dev server builds without errors
cd ui && pnpm dev
Expected: no CSS parse errors, server starts on localhost.
  • Step 5: Visual spot-check
Open the app in dark mode and hover over:
  • A table row (Staff, Patients, Appointments)
  • A notification toggle (Settings → Notifications)
  • A sidebar item
  • A patient details info card
Expected: all show a subtle purple-tinted highlight.
  • Step 6: Commit
git add ui/src/index.css
git commit -m "fix: global dark mode hover visibility via --hover-overlay CSS variable"