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 (
-
+
+
diff --git a/apps/ai-dial-admin/src/utils/themes/apply-theme-colors.ts b/apps/ai-dial-admin/src/utils/themes/apply-theme-colors.ts
index aa473198c9..907375ae4b 100644
--- a/apps/ai-dial-admin/src/utils/themes/apply-theme-colors.ts
+++ b/apps/ai-dial-admin/src/utils/themes/apply-theme-colors.ts
@@ -1,6 +1,8 @@
import { Theme } from '@/src/models/theme';
import { setToLocalStorage } from '@/src/utils/local-storage';
+export const THEME_COLORS_STORAGE_KEY = 'theme-colors';
+
export const applyThemeColors = (div: HTMLElement, theme?: Theme) => {
if (theme) {
const themeColors = theme.colors;
@@ -9,6 +11,7 @@ export const applyThemeColors = (div: HTMLElement, theme?: Theme) => {
div.style.setProperty(`--${key}`, value);
});
- setToLocalStorage('theme', theme.id); // Persist the theme
+ setToLocalStorage('theme', theme.id);
+ setToLocalStorage(THEME_COLORS_STORAGE_KEY, JSON.stringify(themeColors));
}
};