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
Likely affected files/directories
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
app/for hardcoded hex/rgb color values instead of NativeWind's theme-aware utility classes.dark:-variant Tailwind classes consistent with the project's existing design tokens (checktailwind.config.jsfor any custom color palette already defined).Acceptance criteria
app/verified legible in both light and dark modeLikely affected files/directories
app/tailwind.config.js