merge: fix: read system preference to prevent light theme flash on initial l… (#7820)

JhaSourav07 · web-flow · commit 2bbcd2c5db52 · 2026-07-21T12:23:05.000+05:30
## Description Fixes #7802 Previously, the inline blocking script in `layout.tsx` defaulted to rendering the dark theme if no theme was saved in `localStorage`. However, if a user's system preference was set to light mode, or vice versa, this caused a jarring flash of the wrong theme before client-side hydration corrected it. This PR updates the `<head>` injection script in `layout.tsx` to properly read `window.matchMedia('(prefers-color-scheme: dark)')` during its initial synchronous execution. This ensures that the application immediately renders the correct theme matching the user's operating system preferences on their very first visit, completely eliminating the white/dark flash. ## Pillar - [ ] 🎨 Pillar 1 — New Theme Design - [ ] 📐 Pillar 2 — Geometric SVG Improvement - [ ] 🕐 Pillar 3 — Timezone Logic Optimization - [x] 🛠️ Other (Bug fix, refactoring, docs) ## Checklist before requesting a review: - [x] I have read the `CONTRIBUTING.md` file. - [x] I have tested these changes locally (`localhost:3000/api/streak?user=YOUR_USERNAME`). - [x] I have run `npm run format` and `npm run lint` locally and resolved all errors (CI will fail otherwise). - [x] My commits follow the Conventional Commits format (e.g., `feat(themes): ...`, `fix(calculate): ...`). - [ ] I have updated `README.md` if I added a new theme or URL parameter. - [x] I have started the repo. - [x] I have made sure that i have only one commit to merge in this PR. - [x] The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts). - [x] (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -91,12 +91,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             __html: `
               try {
                 const storedTheme = window.localStorage.getItem('theme');
-                if (storedTheme === 'light') {
-                  document.documentElement.classList.remove('dark');
-                  document.documentElement.style.colorScheme = 'light';
-                } else {
+                const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                if (storedTheme === 'dark' || (!storedTheme && isSystemDark)) {
                   document.documentElement.classList.add('dark');
                   document.documentElement.style.colorScheme = 'dark';
+                } else {
+                  document.documentElement.classList.remove('dark');
+                  document.documentElement.style.colorScheme = 'light';
                 }
               } catch (_) {}
             `,
