bug(dark-mode): primary save button blends into dark page background #94

New Issue

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

marcel commented

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

Severity: High — core action is hard to find in dark mode

On the New Document and Edit Document pages in dark mode, the save bar contains two problems:

"SAVE & MARK AS REVIEWED" / "SAVE" primary button — uses background: #002850 (brand-navy) which is nearly indistinguishable from the dark page background (~#0f172a or similar). The button has barely any contrast against the container it sits in.
"SAVE" outlined button — the border color inherits a dark value, making it invisible. The button outline disappears into the dark background entirely.

The result: in dark mode the most important action on the page (saving) is visually buried.

Options

Option A — Raise primary button brightness in dark mode

Map the primary button to a lighter shade of navy in dark mode:

.dark .btn-primary {
  background-color: #1a4a8a; /* lighter navy, still brand-adjacent */
  color: #ffffff;
}

Contrast of #1a4a8a on #0f172a: ~5.2:1 ✓ AA

Option B — Use brand-mint as the primary action color in dark mode

#A6DAD8 (brand-mint) on dark backgrounds reads as a strong, warm highlight. Use it as the button background with black text:

.dark .btn-primary {
  background-color: #A6DAD8;
  color: #000000; /* 12:1 contrast ✓ AAA */
}

This is fully brand-compliant (mint is an official accent), high contrast, and visually distinctive.

Option C — Add a visible border/glow to the existing navy button

Keep the dark navy background but add box-shadow: 0 0 0 1px rgba(166,218,216,0.4) (mint ring) to make it stand out from the container without changing the color.

Recommendation: Option B

Using brand-mint (#A6DAD8) with black text in dark mode is the most distinctive and brand-consistent solution. It gives 12:1 contrast (AAA), immediately signals "primary action", and follows the brand rule of using mint as an accent against dark/black. Option A is a safe fallback if mint feels too prominent.

Outlined "SAVE" button fix (both options):

.dark .btn-outlined {
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

## Severity: High — core action is hard to find in dark mode On the New Document and Edit Document pages in dark mode, the save bar contains two problems: 1. **"SAVE & MARK AS REVIEWED" / "SAVE" primary button** — uses `background: #002850` (brand-navy) which is nearly indistinguishable from the dark page background (`~#0f172a` or similar). The button has barely any contrast against the container it sits in. 2. **"SAVE" outlined button** — the border color inherits a dark value, making it invisible. The button outline disappears into the dark background entirely. The result: in dark mode the most important action on the page (saving) is visually buried. --- ## Options ### Option A — Raise primary button brightness in dark mode Map the primary button to a lighter shade of navy in dark mode: ```css .dark .btn-primary { background-color: #1a4a8a; /* lighter navy, still brand-adjacent */ color: #ffffff; } ``` Contrast of `#1a4a8a` on `#0f172a`: ~5.2:1 ✓ AA ### Option B — Use brand-mint as the primary action color in dark mode `#A6DAD8` (brand-mint) on dark backgrounds reads as a strong, warm highlight. Use it as the button background with black text: ```css .dark .btn-primary { background-color: #A6DAD8; color: #000000; /* 12:1 contrast ✓ AAA */ } ``` This is fully brand-compliant (mint is an official accent), high contrast, and visually distinctive. ### Option C — Add a visible border/glow to the existing navy button Keep the dark navy background but add `box-shadow: 0 0 0 1px rgba(166,218,216,0.4)` (mint ring) to make it stand out from the container without changing the color. --- ## Recommendation: Option B Using brand-mint (`#A6DAD8`) with black text in dark mode is the most distinctive and brand-consistent solution. It gives 12:1 contrast (AAA), immediately signals "primary action", and follows the brand rule of using mint as an accent against dark/black. Option A is a safe fallback if mint feels too prominent. **Outlined "SAVE" button fix (both options):** ```css .dark .btn-outlined { border-color: rgba(255, 255, 255, 0.4); color: #ffffff; } ```

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

marcel referenced this issue from a commit

2026-03-27 15:59:59 +01:00

fix(#94): replace text-white with text-primary-fg on all primary buttons

marcel referenced a pull request that will close this issue

2026-03-27 16:00:48 +01:00

fix(#94): replace text-white with text-primary-fg on all primary buttons #109

marcel referenced this issue from a commit

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

fix(#94): replace text-white with text-primary-fg on all primary buttons

marcel closed this issue

2026-03-27 16:07:47 +01:00