Skip to content

feat(theme): readable theme colors via useColors() + inline style - #7

Merged
MarJose123 merged 1 commit into
mainfrom
feat/theme-color-readability
Aug 7, 2026
Merged

feat(theme): readable theme colors via useColors() + inline style#7
MarJose123 merged 1 commit into
mainfrom
feat/theme-color-readability

Conversation

@MarJose123

Copy link
Copy Markdown
Owner

Summary

Fixes low-contrast, theme-ignoring colors across the app. Brass accent colors were used as
text/fills at 2.6–2.9:1 on light surfaces, CTA button labels were near-black on mid-brown
(muddy), the enabled toggle barely read against light cards, and several screens (onboarding
PIN, lock) were hardcoded to a single palette. Additionally, Tailwind color classes don't
follow the runtime dark/light theme in this project, so all colors now come from
useColors() + inline style.

What changed

New theme tokens (src/types/theme.ts, src/theme/, src/global.css)

Token Light Dark Purpose
brassText #8F5636 (5.2:1) #C87B54 Brass as text/label (was 2.6–2.9:1 ❌)
brassButton #A3542E #C87B54 CTA button fill
buttonLabel #F3EEE1 cream (4.7:1) #1B1F1A ink CTA button text

UI updates

  • CTA buttons (Continue, Save, Add account, Update Now, …): light mode = deep brass +
    cream labels (button also stands out 4.8:1 vs the page). Dark mode unchanged (ink on brass,
    5.1:1).
  • Toggle: enabled track uses brassText; thumb is parchment — reads clearly on light cards.
  • FAB "+" in the bottom nav matches the CTA labels (cream in light, ink in dark).
  • Lock / PIN screens: /lock and the onboarding PIN setup now follow the theme (previously
    hardcoded light); onboarding stack background too.
  • Splash, ErrorBoundary, ReceiptScanResult: themed consistently.

Convention change (AGENTS.md)

  • Documented that Tailwind color classes do not follow the runtime theme (they resolve
    against the :root light values; Appearance.setColorScheme() doesn't flip the evaluated
    media query).
  • New rule: all colors via useColors() + inline style; className only for non-color
    layout. Hard Rule #15 updated; §8.1–8.6 and §8.10 rewritten.

Full sweep (~80 sites, 25 files)

  • Converted every remaining color class (bg-surface-bg, text-text-primary, text-brass*,
    border-hairline, text-rust, …) to inline styles.
  • Fixed latent bugs where files imported the static dark palette (edit-account,
    settings SectionLabel, ReceiptScanResult, receipt-scan) — labels rendered dark
    values in light mode.
  • CategoryRingCard percent text was ink-on-dark in dark mode → textPrimary.

Verification

  • tsc --noEmit
  • eslint src ✅ (prettier clean)
  • bun test: 70 pass / 14 fail — identical to main baseline (pre-existing environment
    issue: react-native flow types under Bun; no regressions)

Notes

  • No DB/schema changes; no new dependencies.
  • SlothAppIcon brand SVG untouched (static artwork, not a theme color).
  • Camera overlay caption keeps its module-level stylesheet color (drawn over the camera scrim).

@MarJose123
MarJose123 merged commit 0239207 into main Aug 7, 2026
2 checks passed
@MarJose123
MarJose123 deleted the feat/theme-color-readability branch August 7, 2026 06:08
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.

1 participant