Skip to content

fix(ui): restore dark-mode contrast in settings and contact verification (#340) - #342

Open
RedFox-ious wants to merge 2 commits into
freenet:mainfrom
RedFox-ious:fix/340-dark-mode-contrast
Open

RedFox-ious wants to merge 2 commits into
freenet:mainfrom
RedFox-ious:fix/340-dark-mode-contrast

Conversation

@RedFox-ious

Copy link
Copy Markdown

Problem

AFT cards and inactive identity-switcher rows retained white backgrounds while their text followed the dark theme. Contact-import warnings, unverified-contact badges, and verification ticks also used fixed colors with poor dark-mode contrast.

Closes #340.

Fix

  • Use --bg-card for AFT cards and identity-switcher surfaces.
  • Add theme-aware --danger-ink and --on-trust tokens for import warnings and verification ticks.
  • Use --caution for unverified-contact badges.
  • Add a unit guard against hard-coded white hex colors in the Settings implementation.

Explicit dark mode and system-dark mode receive matching overrides. Light-theme colors preserve the previous palette.

Verification

On the latest commit, e5c3087:

  • Formatting and workspace Clippy with warnings denied: passed.
  • UI unit tests: 220 passed, 0 failed, including the new regression guard.
  • Standalone Playwright CSS harness using the current stylesheets and row background values: contrast passed at 1280px and 393px, across light, dark, system-light, and system-dark themes.
Inactive switcher text | Previous dark contrast | Corrected contrast -- | -- | -- Identity name | 1.23:1 | 14.07:1 Fingerprint | 2.56:1 | 6.76:1

Broader validation on 42f633f, before the final switcher follow-up:

  • Workspace tests: 280 passed.
  • Inbox integration tests: 40 passed.
  • Offline Playwright suite: 152 passed, 26 skipped, 0 failed across desktop and mobile Chrome.
  • Production and offline UI release builds: passed.
  • Browser checks confirmed readable AFT cards, import warnings, and unverified-contact badges.

The full end-to-end suite and release builds were not rerun after the final follow-up. Skipped browser tests require a deployment or live Freenet nodes. The new unit test scans source text; rendered contrast was checked separately.

Security review found no newly introduced vulnerabilities or defects.

[AI-assisted — Codex]

RedFox-ious and others added 2 commits October 12, 2026 16:56
The AFT tier cards in Settings -> Anti-Flood carried an inline
`background: #fff`, which beats the stylesheet, so in dark mode the
text followed the theme (near-white) while the card stayed white
(1.1:1 contrast). Same pattern elsewhere inside .fm-app:

- settings.rs: AFT usage cards, AFT tier picker and the identity
  switcher popover now use var(--bg-card) instead of #fff.
- login.rs: import-contact "unverified" warning uses the new
  --danger-ink token (was #991b1b on the dark card, 2.1:1).
- settings.css: contact "unknown" trust badge uses --caution; the
  verify-box tick uses the new --on-trust token (white on the dark
  theme's brighter green was 2.3:1).
- tokens.css: add --danger-ink and --on-trust; light values equal the
  previous hard-coded colors, so light mode is unchanged.

All changed pairs now meet WCAG AA in dark mode (>= 4.7:1 for text).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The switcher popover got var(--bg-card) in the previous commit, but
each inactive row still set its own inline `background: #fff` (built
via a `bg` variable, so the earlier search missed it). In dark /
system-dark mode that left identity names at 1.23:1 and fingerprints
at 2.56:1. Rows now use var(--bg-card): 14.07:1 and 6.76:1 in dark,
unchanged in light mode.

Add no_hardcoded_white_backgrounds_340, which scans the non-test part
of settings.rs for #fff/#ffffff literals so a hard-coded white surface
can't come back on any Settings screen (all render inside the themed
.fm-app). Verified it fails on the old code, pointing at line 144.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@CLAassistant

CLAassistant commented Oct 12, 2026 •

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@RedFox-ious
RedFox-ious marked this pull request as draft October 13, 2026 10:55
@RedFox-ious
RedFox-ious marked this pull request as ready for review October 13, 2026 11:47
@RedFox-ious

Copy link
Copy Markdown
Author

All seven steps of the build job passed locally, so it should pass in CI. It does produce three compiler warnings, but none of them fails the job.

Step Result
Rustfmt check ✅ Pass
cargo make build ✅ Pass, 3 warnings
cargo make clippy ✅ Pass, no warnings
cargo make test ✅ 281 passed, 0 failed
cargo make test-inbox ✅ 40 passed, 0 failed
Facade contract (format, clippy with -D warnings, tests, wasm build) ✅ 15 passed, no warnings
Separate contract crates (format, clippy with -D warnings) plus the inbox integration tests ✅ 40 passed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CSS: text that is unreadable in dark mode

2 participants