Skip to content

Audit and fix light/dark mode support across all key screens #234

Description

@Lakes41

Difficulty: Intermediate
Type: UI/UX

Background
The README's Key Features list explicitly promises "a beautiful, accessible UI built with NativeWind, optimized for both light and dark environments."

Problem
It's easy for individual screens (especially newer ones like the access scanner or guild detail) to drift out of sync with dark-mode styling if colors are hardcoded instead of using NativeWind's dark: variant classes, leading to poor contrast or invisible text in one mode.

Expected outcome
Every screen under app/ renders correctly and legibly in both light and dark mode, verified against the OS-level appearance setting, with no hardcoded colors that break in either mode.

Suggested implementation

  • Audit each screen under app/ for hardcoded hex/rgb color values instead of NativeWind's theme-aware utility classes.
  • Replace hardcoded colors with dark:-variant Tailwind classes consistent with the project's existing design tokens (check tailwind.config.js for any custom color palette already defined).
  • Manually test by toggling the OS appearance setting (or Expo Go's dev menu) and confirming legibility on every screen.
  • Document any intentionally fixed-color elements (e.g., a brand logo) as an exception.

Acceptance criteria

  • All screens under app/ verified legible in both light and dark mode
  • No hardcoded colors remain outside documented exceptions
  • Verified on at least one iOS and one Android device/simulator

Likely affected files/directories

  • app/
  • tailwind.config.js

Metadata

Metadata

Assignees

Labels

GrantFox OSSGrantFox Open Source Sponsorship program tagMaybe RewardedIssue may qualify for a reward upon successful completion per campaign rulesOfficial Campaign | FWC26Official FWC26 campaign issue — eligible for campaign scoring and rewardsUI/UXUser interface or user experience improvements and design workintermediateIntermediate difficulty tasks requiring solid experience and some context

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions