feat: theme no flicker by Alessandro100 · Pull Request #125 · MobilityData/mobilitydatabase-web

Alessandro100 · 2026-04-21T17:42:32Z

Summary:

closes #31

This PR introduces cssVars as a way of managing colors for the MUI theme.

Important note
The way cssvars work is they aren't resolved immediately. For variables involving the map, they need to be resolved right away which is why they are separated

Expected behavior:

For users who have dark mode enabled as default, there will no longer be a flicker from light mode to dark mode on initial page load in. Also for developer experience, we will now be able to see all the theme colors in the dev console

Testing tips:

Go through the application in light / dark mode to find any visual bugs. A pertinent behaviour test would be to set your setting to dark mode and refresh the application. I suggest you compare behaviour to prod to see real difference

Please make sure these boxes are checked before submitting your pull request - thanks!

Run the unit tests with yarn test to make sure you didn't break anything
Add or update any needed documentation to the repo
Format the title like "feat: [new feature short description]". Title must follow the Conventional Commit Specification(https://www.conventionalcommits.org/en/v1.0.0/).
Linked all relevant issues
Include screenshot(s) showing how this pull request works and fixes the issue(s)

vercel · 2026-04-21T17:42:37Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mobilitydatabase-web	Ready	Preview, Comment	Apr 21, 2026 6:18pm

Copilot

Pull request overview

This PR migrates the app’s MUI theming to CSS variables + useColorScheme to eliminate the initial dark-mode “flash” on first load (SSR-friendly theme colors), and updates map rendering to use resolved JS color values where CSS variables can’t be used.

Changes:

Replaced many theme.palette.* usages with theme.vars.palette.* (CSS variable references) across UI styles/components.
Added InitColorSchemeScript to the locale layout and refactored theme toggling to use MUI’s useColorScheme.
Introduced useMapConfig() + mapConfig to provide concrete (non-CSS-var) colors/URLs for MapLibre/canvas use-cases.

Reviewed changes

Copilot reviewed 63 out of 63 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/app/utils/feedStatusConsts.tsx	Use CSS-var palette values for status colors
src/app/styles/VerificationBadge.styles.ts	Gradient now uses CSS-var palette values
src/app/styles/PageLayout.style.ts	Background uses CSS-var palette values
src/app/styles/Filters.styles.ts	CSS-var palette used for filter header accent
src/app/screens/TermsAndConditions.tsx	Paper background uses CSS-var palette
src/app/screens/PrivacyPolicy.tsx	Paper background uses CSS-var palette
src/app/screens/GbfsValidator/index.tsx	CSS-var palette usage for hero text color
src/app/screens/GbfsValidator/components/ErrorDetailsDialog.tsx	Dialog colors/borders migrated to CSS vars
src/app/screens/GbfsValidator/ValidationState.tsx	Primary/background colors migrated to CSS vars
src/app/screens/GbfsValidator/ValidationReportSkeletonLoading.tsx	Skeleton background uses CSS vars
src/app/screens/GbfsValidator/ValidationReport.tsx	Report colors/hover styles migrated to CSS vars
src/app/screens/GbfsValidator/ValidationReport.styles.ts	Styles migrated to CSS vars
src/app/screens/GbfsValidator/GbfsFeedSearchInput.tsx	Input container colors migrated to CSS vars
src/app/screens/Feeds/SearchTable.tsx	Table borders/background/shadow migrated to CSS vars
src/app/screens/Feeds/ProviderTitle.tsx	Primary color migrated to CSS vars
src/app/screens/Feeds/PopoverList.tsx	Popover background/shadow migrated to CSS vars
src/app/screens/Feeds/Feeds.styles.ts	Sticky header background migrated to CSS vars
src/app/screens/Feeds/AdvancedSearchTable.tsx	Borders/text colors migrated to CSS vars
src/app/screens/FeedSubmitted.tsx	Primary color migrated to CSS vars
src/app/screens/FeedSubmissionFAQ.tsx	Divider/background colors migrated to CSS vars
src/app/screens/Feed/components/LicenseDialog.tsx	Grey palette usage migrated to CSS vars
src/app/screens/Feed/components/GbfsVersions.tsx	Chip/background colors migrated to CSS vars
src/app/screens/Feed/components/FullMapView.tsx	Background/border/text colors migrated to CSS vars
src/app/screens/Feed/components/FeedSummary.tsx	Badge and icon colors migrated to CSS vars
src/app/screens/Feed/components/AssociatedFeeds.tsx	Hover + outline colors migrated to CSS vars
src/app/screens/Feed/Map.styles.ts	Map control panel background uses CSS vars
src/app/screens/Feed/FeedSummary.styles.ts	Card/header colors migrated to CSS vars
src/app/screens/Feed/Feed.styles.ts	Divider/chip colors migrated to CSS vars
src/app/screens/Contribute.tsx	Background migrated to CSS vars
src/app/screens/ContactUs.tsx	SVG fill migrated to CSS vars
src/app/screens/Analytics/GTFSNoticeAnalytics/index.tsx	Chart stroke uses CSS-var palette
src/app/screens/Analytics/GTFSFeedAnalytics/DetailPanel.tsx	Chart + container styling uses CSS vars
src/app/screens/Analytics/GTFSFeatureAnalytics/index.tsx	Chart stroke uses CSS-var palette
src/app/screens/Analytics/GBFSVersionAnalytics/index.tsx	Chart stroke uses CSS-var palette
src/app/screens/Analytics/GBFSNoticeAnalytics/index.tsx	Chart stroke uses CSS-var palette
src/app/screens/Analytics/GBFSFeedAnalytics/DetailPanel.tsx	Chart stroke uses CSS-var palette
src/app/hooks/useMapConfig.ts	New hook to return resolved map config by scheme
src/app/context/ThemeProvider.tsx	Refactor theme provider + expose toggle via `useColorScheme`
src/app/components/PopupTable.tsx	Remove theme prop; use `sx` theme callback + CSS vars
src/app/components/NestedCheckboxList.tsx	Border color migrated to CSS vars
src/app/components/MapGeoJSON.tsx	Switch map styling to `useMapConfig` + CSS vars for UI chrome
src/app/components/MapElement.tsx	Switch map element rendering to `useMapConfig` + CSS vars for cards
src/app/components/Map/SelectedRoutesStopsPanel.tsx	Background/borders/colors migrated to CSS vars
src/app/components/Map/ScanningOverlay.tsx	Background/border/text colors migrated to CSS vars
src/app/components/Map/MapDataPopup.tsx	Popup colors migrated to CSS vars
src/app/components/Map.tsx	Switch map style colors/tiles to `useMapConfig`
src/app/components/HeaderSearchBar.tsx	Background uses CSS vars
src/app/components/HeaderMobileDrawer.tsx	Uses `useColorScheme` for logo + CSS-var palette for colors
src/app/components/Header.tsx	Uses `useColorScheme` for logo + CSS-var palette for colors
src/app/components/Header.style.ts	Styles migrated to CSS vars
src/app/components/GtfsVisualizationMap.tsx	Switch MapLibre tile URL + layers to `useMapConfig`
src/app/components/GtfsVisualizationMap.layers.tsx	Replace Theme dependency with `MapConfig` + resolved colors
src/app/components/FooterElements.tsx	Footer link colors migrated to CSS vars
src/app/components/Footer.tsx	Uses `useColorScheme` for logo + CSS-var palette for colors
src/app/components/FeedStatus.tsx	Indicator background uses CSS vars
src/app/components/CoveredAreaMap.tsx	Container background uses CSS vars
src/app/[locale]/sign-in/SignIn.tsx	Background uses CSS vars
src/app/[locale]/layout.tsx	Add `InitColorSchemeScript` + suppress hydration warning
src/app/[locale]/feeds/components/FeedsScreen.tsx	Pagination button styling migrated to CSS vars
src/app/[locale]/email-verification/EmailVerificationContent.tsx	Background uses CSS vars
src/app/[locale]/account/Account.tsx	Paper background uses CSS vars
src/app/[locale]/account/Account.styles.ts	Background/border uses CSS vars
src/app/Theme.ts	Define CSS-vars theme with `colorSchemes` + add `mapConfig`

Applied project guidance (vercel-react-best-practices) during review.

Comments suppressed due to low confidence (1)

src/app/components/Header.tsx:246

useColorScheme() can return mode: 'system'. With the current mode !== 'dark' check, users set to system mode on a dark OS will still get the light logo. Use the resolved mode (e.g. mode === 'system' ? systemMode : mode) when picking assets.

                src={
                  mode !== 'dark'
                    ? '/assets/MOBILTYDATA_logo_light_blue_M.png'
                    : '/assets/MOBILTYDATA_logo_purple_M.png'
                }
                alt='MobilityData logo'

github-actions · 2026-04-21T18:08:01Z

*Lighthouse ran on https://mobilitydatabase-bqfmfc4em-mobility-data.vercel.app/ * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟢 100	🟢 94	🟢 96	🟢 100

*Lighthouse ran on https://mobilitydatabase-bqfmfc4em-mobility-data.vercel.app/feeds * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟠 83	🟠 87	🟢 96	🟢 100

*Lighthouse ran on https://mobilitydatabase-bqfmfc4em-mobility-data.vercel.app/feeds/gtfs/mdb-2126 * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟠 53	🟢 94	🟢 96	🟢 100

*Lighthouse ran on https://mobilitydatabase-bqfmfc4em-mobility-data.vercel.app/feeds/gtfs_rt/mdb-2585 * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟢 99	🟠 84	🟢 96	🟢 100

*Lighthouse ran on https://mobilitydatabase-bqfmfc4em-mobility-data.vercel.app/feeds/gbfs/gbfs-flamingo_porirua * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟠 83	🟢 94	🟢 96	🟢 100

davidgamez

Tested and worked as expected

Alessandro100 added 6 commits April 21, 2026 13:19

basic cssVariable MUI changes

41461f5

adjusted cssVars file

6697d9d

new way of managing theme state

76c9ebc

separated map theme due to map libraries needing resolved colors

d5f6228

initializing cssVars

88064a6

adjusting theme for cssVars and mapConfig

cc749b4

Alessandro100 requested a review from Copilot April 21, 2026 17:47

Copilot started reviewing on behalf of Alessandro100 April 21, 2026 17:47 View session

lint fix

d2e27b7

vercel Bot deployed to Preview April 21, 2026 17:51 View deployment

Copilot AI reviewed Apr 21, 2026

View reviewed changes

Comment thread src/app/context/ThemeProvider.tsx

Comment thread src/app/components/HeaderMobileDrawer.tsx

Comment thread src/app/components/Footer.tsx Outdated

Comment thread src/app/components/Footer.tsx Outdated

fix test

3170d4b

vercel Bot deployed to Preview April 21, 2026 17:59 View deployment

stronger color scheme variable

f662643

vercel Bot deployed to Preview April 21, 2026 18:18 View deployment

Alessandro100 changed the title ~~Feat/31 ssr theme no flicker~~ feat: theme no flicker Apr 22, 2026

davidgamez approved these changes Apr 22, 2026

View reviewed changes

Alessandro100 merged commit d0fcfa9 into main Apr 22, 2026
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: theme no flicker#125

feat: theme no flicker#125
Alessandro100 merged 9 commits intomainfrom
feat/31-ssr-theme-no-flicker

Alessandro100 commented Apr 21, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Apr 21, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Apr 21, 2026 •

edited

Loading

Uh oh!

davidgamez left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Alessandro100 commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davidgamez left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Alessandro100 commented Apr 21, 2026 •

edited

Loading

vercel Bot commented Apr 21, 2026 •

edited

Loading

github-actions Bot commented Apr 21, 2026 •

edited

Loading