Repository navigation
Conversation
Both apps follow the phone's light/dark setting. A dark palette sits next to the light one (src/lib/theme.ts); useTheme() picks one from useColorScheme(), and themed() turns a palette -> StyleSheet function into a useStyles() hook, so screens keep their StyleSheet.create but re-evaluate when the theme flips. The fixed `colors` export is gone, which is what made every screen migrate. Map: a `dark` option inverts the raster tiles with a CSS filter (hue put back so water stays blue), gives the page a dark background so it never flashes white, and recolours the route and approach lines so they show on dark tiles. setDark() restyles the open map in place; no reload, no jump. Status bar is `auto`; stack headers and screen backgrounds are themed in the three layouts. Tests: palette parity and WCAG AA contrast for text, muted text, errors and button labels in both palettes; the map script's dark start, live switch and line colours; the html carries the tile filter. The e2e robot takes --dark, which plays the whole ride with both phones in dark mode: 11/11 steps pass in both modes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #7
What changed
Theme
src/lib/theme.ts: a dark palette next to the light one, same keys, andpaletteFor(scheme).ui.tsx:useTheme()on top ofuseColorScheme(), andthemed((t) => StyleSheet.create({…})), which gives each file auseStyles()hook. Screens keep theirStyleSheet.create, but the styles are rebuilt when the phone's theme changes, so the app switches straight away. The fixedcolorsexport is removed, so TypeScript made sure every screen moved over (login, name, rider home, ride, history, driver home, vehicle, trip).auto; the stack headers ("Your rides", "Your vehicle", "Rides & earnings") and screen backgrounds are themed in the three layouts, so nothing flashes white between screens.Map (
mapPage.ts,RideMap*.tsx)invert+hue-rotate(180deg), so water stays blue and parks green) and a dark page background, so the map never flashes white while tiles load.setDark()restyles the open map in place when the theme flips: no reload, no jump.Tests
theme.test.ts: both palettes define the same colours; in both, text, muted text, errors and button labels meet WCAG AA (4.5:1).mapPage.test.ts: starts dark when asked;setDark()togglesbody.darkand recolours the route without moving the map; the page HTML carries the tile filter;darkScript()is valid JS and safe before the page is ready.e2e/run_e2e.py --dark: the browser robot plays the whole ride with both phones in dark mode. 11/11 steps pass in light and in dark (documented indocs/TESTING.md).prefers-color-schemeon an open rider home switches the app and the map without a reload.python test_all.py --quickpasses: typecheck, lint, 38 Jest tests, Python tests unchanged.Screenshots (light / dark)
Login · Rider fares · Rider ride · Driver trip · Vehicle · Rides & earnings