Skip to content

Fix theme sync with system preference changes - #1453

Merged
VaiTon merged 2 commits into
openfoodfacts:masterfrom
Vedansh-Mittal:fix/fix-theme-system-preference
Mar 26, 2026
Merged

VaiTon merged 2 commits into
openfoodfacts:masterfrom
Vedansh-Mittal:fix/fix-theme-system-preference

Conversation

@Vedansh-Mittal

Copy link
Copy Markdown
Contributor

Summary

Fix theme behavior so the app follows system preference by default and reacts to OS theme changes when no manual theme preference is stored.

Changes

  • added a helper to detect stored color preference
  • kept initial theme selection based on stored preference or system preference
  • added a matchMedia("(prefers-color-scheme: dark)") listener
  • only update theme reactively when no manual preference exists

Testing

  • cleared localStorage and confirmed app follows system theme on load
  • changed system theme while app was open and confirmed reactive update
  • toggled theme manually and confirmed preference persists on refresh
  • confirmed system theme changes no longer override manual preference

@Vedansh-Mittal
Vedansh-Mittal requested a review from a team as a code owner March 24, 2026 17:13
@github-project-automation github-project-automation Bot moved this to In progress in Hunger Games Mar 24, 2026
@netlify

netlify Bot commented Mar 24, 2026

Copy link
Copy Markdown

Deploy Preview for warm-cannoli-79bbb2 ready!

Name Link
🔨 Latest commit 64c620c
🔍 Latest deploy log https://app.netlify.com/projects/warm-cannoli-79bbb2/deploys/69c2c96a2a7e5d0008de2e76
😎 Deploy Preview https://deploy-preview-1453--warm-cannoli-79bbb2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@Vedansh-Mittal

Copy link
Copy Markdown
Contributor Author

I checked the lint failure locally on both this branch and master.

What I found:

  • master already fails yarn lint because of a Prettier issue in src/components/ResponsiveAppBar.tsx
  • after fixing that formatting issue on this branch, yarn lint continues and surfaces additional existing ESLint errors in unrelated files across the repository

The theme change in this PR is limited to:

  • src/App.jsx
  • src/localeStorageManager.ts

I also included the formatting fix for src/components/ResponsiveAppBar.tsx so the lint job could progress further.

So the remaining lint failures appear to be pre-existing repository-wide issues rather than regressions introduced by this PR.

@github-project-automation github-project-automation Bot moved this from In progress to Alex backlog in Hunger Games Mar 26, 2026
@VaiTon
VaiTon merged commit 843ba6c into openfoodfacts:master Mar 26, 2026
11 of 12 checks passed
@github-project-automation github-project-automation Bot moved this from Alex backlog to Done in Hunger Games Mar 26, 2026
@VaiTon

VaiTon commented Mar 26, 2026

Copy link
Copy Markdown
Member

Thank you!

@Vedansh-Mittal
Vedansh-Mittal deleted the fix/fix-theme-system-preference branch March 29, 2026 05:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants