bug(dark-mode): file upload drop zone border invisible in dark mode #98

New Issue

marcel · 2026-03-27T12:20:52+01:00

marcel commented

2026-03-27 12:20:52 +01:00

Severity: Medium — upload zone affordance lost in dark mode

In dark mode (both mobile and desktop), the dashed border of the file upload drop zone is extremely faint against the dark card background. Users cannot tell where the drop target begins and ends, and the zone loses its visual affordance as a draggable target.

The upload icon also renders in a mid-gray that is hard to see on the dark surface.

Fix

Apply a higher-contrast border and icon color specifically in dark mode:

/* Drop zone border */
.dark .upload-drop-zone {
  border-color: rgba(166, 218, 216, 0.35); /* brand-mint at 35% opacity */
}

/* Upload icon */
.dark .upload-icon {
  color: #A6DAD8; /* brand-mint — clearly visible on dark, on-brand */
}

The mint color is used for accents on dark backgrounds throughout the app (avatar circles switch to mint in dark mode — the same principle applies here). A mint dashed border clearly signals "interactive drop target" without being harsh.

## Severity: Medium — upload zone affordance lost in dark mode In dark mode (both mobile and desktop), the dashed border of the file upload drop zone is extremely faint against the dark card background. Users cannot tell where the drop target begins and ends, and the zone loses its visual affordance as a draggable target. The upload icon also renders in a mid-gray that is hard to see on the dark surface. --- ## Fix Apply a higher-contrast border and icon color specifically in dark mode: ```css /* Drop zone border */ .dark .upload-drop-zone { border-color: rgba(166, 218, 216, 0.35); /* brand-mint at 35% opacity */ } /* Upload icon */ .dark .upload-icon { color: #A6DAD8; /* brand-mint — clearly visible on dark, on-brand */ } ``` The mint color is used for accents on dark backgrounds throughout the app (avatar circles switch to mint in dark mode — the same principle applies here). A mint dashed border clearly signals "interactive drop target" without being harsh.

marcel added the ui label 2026-03-27 12:28:18 +01:00

marcel referenced this issue from a commit

2026-03-27 16:42:22 +01:00

fix(#98): make drop zone border and card borders visible in dark mode

marcel closed this issue

2026-03-27 16:43:44 +01:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: marcel/familienarchiv#98