feat(controller): migrate Share/Sync screen to semantic colour tokens (theming)#19
Merged
Conversation
… T0) Start the light-theme overhaul as a refactor-by-feature slice. The app already had a DayNight setup, but most screens hardcoded dark-tuned hex, so light mode breaks wherever that happens. Foundation (additive — nothing renamed or removed yet): - Add a semantic colour-token palette with full light/dark parity in values/colors.xml + values-night/colors.xml: surfaces (surface_background/ card/section), text (primary/secondary/disabled/on_accent), accent/accent_muted, status (success/warning/danger/info), divider_line, and data-viz (chart_*). QR colours (qr_foreground/qr_background) are intentionally fixed — no -night override — since a QR must stay black/white to scan. - Document the palette and the rule (no hardcoded colours; every token defined in both values and values-night) in CLAUDE.md (new "Theming" section). Pilot — Dashboard (the reference migration to copy): - fragment_dashboard.xml: replace the 7 hardcoded hex (#888888 -> @color/text_secondary; offline badge #555555 -> @color/surface_section). - DashboardFragment.java: replace the Color.parseColor gauge/battery colours with ContextCompat.getColor(R.color.status_warning/danger/success/info). Legacy dash_*/literal tokens are kept for now and retired as other screens migrate. Verify in light AND dark on device.
ResourceGaugeView hardcoded the gauge title (#CCCCCC) and subtitle (#AAAAAA) in a light grey that is unreadable on the light surface, and the track arc in #333333 (a heavy black arc on a light card). Route them through tokens: title/subtitle -> text_secondary, percent -> text_primary, track -> chart_track, default arc -> status_success. Removes the last hardcoded colours from the Dashboard's gauges; verify both modes.
The light-theme track (#E0E0E0) blended into the card background, so the gauge 'path' was barely distinguishable from the surface. Bump to #C4C7CC so the track reads clearly as the channel the colored arc follows. Dark theme track (#333333) is unchanged.
Refactor-by-feature theming slice for the SHARE tab (SyncFragment + fragment_sync.xml) plus the QR modal (activity_qr.xml) and the share tutorial overlay (overlay_tutorial_share.xml). Includes the shared round-2 token block (twins in values + values-night). Migration (no behaviour/layout change intended): - fragment_sync.xml (25), activity_qr.xml (7), overlay_tutorial_share.xml (4): card titles -> text_primary, subtitles #AAAAAA -> text_secondary, card surfaces #222222 -> surface_card, badges #1A1A1A -> surface_section, segmented-toggle bg #333333 -> btn_neutral, button fills -> status_success/info/danger, status text #FF9800 -> status_warning, arch badge green -> status_success. - QR image backgrounds (#FFFFFF) -> qr_background (must stay white to scan). - Full-screen scrims (#DD000000 / #D9000000) -> overlay_scrim, and text/icons sitting ON the scrim -> text_on_accent (fixed white) so they stay legible in both themes (text_primary would turn dark in light mode and vanish). - SyncFragment.java: added ContextCompat import; parseColor(...)/Color.BLACK -> ContextCompat.getColor(R.color.*). Active-card tints #173317/#17263A -> surface_active_success/info; bright-green badge #00E676 -> status_success with black text -> text_on_warning. Verify in light AND dark on device.
Review feedback: in light mode the Share screen lost its cards (text on a white page) and the segmented toggle text was illegible. Root cause: Share's page used ?android:attr/windowBackground (white in light), and the cards were mapped to surface_card (also white) — white on white. The toggle track used btn_neutral (dark-ish) with dark text. Fixes (no dark-mode regression): - Page background -> surface_background (#F4F5F7), matching Status/Install. - The three cards (system / apk / receive) surface_card -> dash_module_bg, so they read as cards on the page (same token as the Dashboard panels and the existing transfer-progress card). Also darken dash_module_bg light #E8EAED -> #DEE1E6 to match the Usage/Install slices. - Segmented toggles (mode + network): track btn_neutral -> surface_section (light track), and the selected-segment drawable #444444 -> new toggle_selected token (#FFFFFF light / #3A3A3A dark) — a raised light thumb so the selected label reads in both themes. New token toggle_selected added to values + values-night.
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
1 participant
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.
SHARE tab + QR modal + share tutorial overlay. Files:
fragment_sync.xml(25),activity_qr.xml(7),overlay_tutorial_share.xml(4),SyncFragment.java.Highlights: card titles->
text_primary, subtitles->text_secondary, cards#222222->surface_card, badges#1A1A1A->surface_section, toggle#333333->btn_neutral, button fills->status_*, active cards#173317/#17263A->surface_active_success/info, badge#00E676->status_success+text_on_warning.Key a11y fix: scrims->
overlay_scrim; text/icons ON the scrim->text_on_accent(fixed white, stays legible both modes); QR image bg->qr_background(stays white to scan).Verified: XML valid, 0 hex left, tokens resolve, braces balanced. Verify light+dark on-device.