diff --git a/torchci/components/NavBar.module.css b/torchci/components/NavBar.module.css index 70cbb002f0..4f2f433d6a 100644 --- a/torchci/components/NavBar.module.css +++ b/torchci/components/NavBar.module.css @@ -7,6 +7,7 @@ width: 100%; min-height: 60px; align-items: center; + transition: background 0.3s ease, box-shadow 0.3s ease; } .navbar li { diff --git a/torchci/lib/DarkModeContext.tsx b/torchci/lib/DarkModeContext.tsx index 97e110f93e..b8fb0f9eca 100644 --- a/torchci/lib/DarkModeContext.tsx +++ b/torchci/lib/DarkModeContext.tsx @@ -72,6 +72,19 @@ export function DarkModeProvider({ children }: { children: ReactNode }) { document.documentElement.classList.add("dark-mode"); } else { document.documentElement.classList.remove("dark-mode"); + + // Reset any inline styles that might have been set during initial load + document.querySelectorAll('[style*="background"]').forEach((el) => { + if ((el as HTMLElement).style.backgroundColor === "#1e1e1e") { + (el as HTMLElement).style.removeProperty("background-color"); + } + }); + + // Remove any dark mode inline styles we added at page load + const styleEl = document.getElementById("dark-mode-init-styles"); + if (styleEl) { + styleEl.remove(); + } } // Save the preference to localStorage diff --git a/torchci/pages/_document.tsx b/torchci/pages/_document.tsx new file mode 100644 index 0000000000..c3f02beee5 --- /dev/null +++ b/torchci/pages/_document.tsx @@ -0,0 +1,54 @@ +import { Head, Html, Main, NextScript } from "next/document"; + +export default function Document() { + return ( + + + {/* Preload script to prevent white flash in dark mode */} +