MoreTab + HistoryView: the dark-list pattern in SwiftUI

The final phase. Two surfaces: MoreTab (the bottom-nav More entry: links to scanner status, account, history, calibration, scan tips, about) and HistoryView (a chart + a list of past scans + a compare button).

Both were using the iOS system list styling (default grouped style on a system-grouped background), which on iOS 18 renders as light-gray section dividers on a slightly-lighter-gray background, with white card insets behind each section. That’s fine on system-themed apps. It looks out of place on top of #052235 navy.

The APK version is much simpler visually: flat navy background everywhere, section headers as small-caps muted-white text, rows white-on-navy with subtle dividers between them. The structure is the same as iOS’s grouped list. The styling is what differs.

.scrollContentBackground(.hidden) is the modifier that hides the default list/form background (iOS 16+). Without it, you can’t see your custom .background through the list. The system one wins. With it, your custom background shows through, and you get the dark-navy look you wanted.

Bonus catch: .scrollContentBackground is also the right tool for Form. If you start putting .background on a Form and wondering why it does nothing, this is why.

1. .toolbarBackground(color, for:): set the background color.
2. .toolbarBackground(.visible, for:): force the background to render even when content isn’t scrolled under it. Without this, the bar stays translucent and shows the underlying content (which is your navy bg, so it half-works) but doesn’t apply the explicit color above.
3. .toolbarColorScheme(.dark, for:): force the bar’s text and chevrons to render as if it were a dark-mode surface, regardless of the rest of the app’s color scheme.

The first two are similar to the bottom-tab dance I already did in Phase A:

Same pattern, different bar. The third (toolbarColorScheme) is only needed for navigation bars where back-button chevrons would otherwise default to system tint. Tab bars don’t have that problem.

.foregroundStyle(AppTheme.accent) on both marks gives the hot-pink-red line, matching every other selection/highlight surface in the app.

The axis tick labels need their own pass:

The default AxisMarks use the system foreground style (black-ish on light, white-ish on dark), but Swift Charts in iOS 18 renders against a white-ish chart-plot background by default, so the default labels would be invisible on my navy bg. Setting both AxisValueLabel (the numeric tick labels) and AxisGridLine (the faint horizontal/vertical reference lines) explicitly is what gives you a chart that looks like it belongs.

10% white opacity for the grid lines is barely visible: enough to give the chart depth without competing with the data. The APK’s chart has even subtler grid lines; 10% is close enough.

.listStyle(.plain) removes the inset gray section cards; .listRowBackground(Color.white.opacity(0.04)) puts a very faint white wash behind each row so they don’t disappear into the navy. This is one of the patterns the APK uses: a hairline-tinted row surface over a dark background, so individual rows feel discrete without needing strong dividers.