From 2d573cfc34d508160b7e92db31460209df0acd79 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 19 May 2026 17:01:21 +0000 Subject: [PATCH] fix(ui): prevent flash of light mode on dark-mode page loads Adds a synchronous inline script in the root layout that applies the `dark` class to before React hydrates, and gates ThemeContext's DOM-write effect on a `hydrated` flag so the initial `isDarkMode=false` state doesn't briefly undo the class the script set. https://claude.ai/code/session_01SkckoL68328QgB5ifQwntT --- ui/litellm-dashboard/src/app/layout.tsx | 17 +++++++++++++++++ .../src/contexts/ThemeContext.tsx | 10 +++++++--- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/ui/litellm-dashboard/src/app/layout.tsx b/ui/litellm-dashboard/src/app/layout.tsx index a4ed17cde39..1ad2ef18c62 100644 --- a/ui/litellm-dashboard/src/app/layout.tsx +++ b/ui/litellm-dashboard/src/app/layout.tsx @@ -13,6 +13,20 @@ export const metadata: Metadata = { icons: { icon: "./favicon.ico" }, }; +// Sets the `dark` class on synchronously before React hydrates, so +// returning dark-mode users don't see a flash of light theme on page load. +const darkModeInitScript = ` +(function () { + try { + var stored = window.localStorage.getItem('litellm-dark-mode'); + if (stored === 'true') { + document.documentElement.classList.add('dark'); + document.documentElement.style.colorScheme = 'dark'; + } + } catch (e) {} +})(); +`; + export default function RootLayout({ children, }: Readonly<{ @@ -20,6 +34,9 @@ export default function RootLayout({ }>) { return ( + +