From 43a0effd0d1d4321b190c562f6e6ccbe5ca86d1f Mon Sep 17 00:00:00 2001 From: Kamianchuk Date: Fri, 5 Jun 2026 12:44:20 +0300 Subject: [PATCH] fix: The dark theme is briefly applied after page refresh --- apps/ai-dial-admin/src/app/layout.tsx | 20 ++++++++++++++++++- .../src/utils/themes/apply-theme-colors.ts | 5 ++++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/apps/ai-dial-admin/src/app/layout.tsx b/apps/ai-dial-admin/src/app/layout.tsx index 7d13b52bf2..14c3c3aaf0 100644 --- a/apps/ai-dial-admin/src/app/layout.tsx +++ b/apps/ai-dial-admin/src/app/layout.tsx @@ -43,9 +43,27 @@ export default async function RootLayout({ children }: { children: ReactNode }) ? getIconPath(themesConfig?.images['admin-favicon'] || themesConfig?.images.favicon) : undefined; + // Runs synchronously in before first paint to apply saved CSS variables, + // preventing a flash of the default dark theme on page refresh. + const themeInitScript = ` + (function () { + try { + var colors = localStorage.getItem('theme-colors'); + if (colors) { + var parsed = JSON.parse(colors); + var root = document.documentElement; + Object.keys(parsed).forEach(function (key) { + root.style.setProperty('--' + key, parsed[key]); + }); + } + } catch (e) {} + })(); + `; + return ( - + +