From ba773a55cce916b2a7a65bf0d42794a2c5a063f7 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar Bajpai <saurabhkumarbajpaiai@Saurabhs-MacBook-Air.local>
Date: Wed, 17 Jun 2026 12:57:49 +0530
Subject: [PATCH] fix: prevent dark mode flicker during SPA navigation (#558)

- Remove transition-colors from body to prevent visible theme transitions
- Use useLayoutEffect instead of useEffect for synchronous DOM updates
- Prevents the white flash when navigating between pages in dark mode
---
 src/context/ThemeContext.jsx | 5 +++--
 src/index.css                | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx
index 3e9c56b..833c8aa 100644
--- a/src/context/ThemeContext.jsx
+++ b/src/context/ThemeContext.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-refresh/only-export-components */
-import React, { createContext, useState, useEffect } from "react";
+import React, { createContext, useState, useLayoutEffect } from "react";
 
 export const ThemeContext = createContext();
 
@@ -13,7 +13,8 @@ export const ThemeProvider = ({ children }) => {
     return systemPrefersDark ? "dark" : "light";
   });
 
-  useEffect(() => {
+  // Sync theme to DOM synchronously on mount (before paint)
+  useLayoutEffect(() => {
     const root = window.document.documentElement;
     if (theme === "dark") {
       root.classList.add("dark");
diff --git a/src/index.css b/src/index.css
index 1ca36a3..2bbbb46 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,7 +8,7 @@
 @layer base {
   body {
     font-family: 'Outfit', 'Inter', system-ui, sans-serif;
-    @apply bg-slate-50 text-slate-800 antialiased transition-colors duration-300;
+    @apply bg-slate-50 text-slate-800 antialiased;
   }
 
   body.dark {