diff --git a/onRenderBody.js b/onRenderBody.js index d713b2f98b064..370709d6c1ceb 100644 --- a/onRenderBody.js +++ b/onRenderBody.js @@ -7,23 +7,31 @@ const themes = { light: lighttheme, dark: darktheme }; const MagicScriptTag = (props) => { const codeToRunOnClient = ` (function() { + // 1. Keeps SYSTEM as the priority preference const themeFromLocalStorage = localStorage.getItem('${DarkThemeKey}') || '${ThemeSetting.SYSTEM}'; - const systemDarkModeSetting = () => window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null; - const isDarkModeActive = () => { - return !!systemDarkModeSetting()?.matches; + + // 2. We change the check to look for LIGHT mode explicitly + const systemLightModeSetting = () => window.matchMedia ? window.matchMedia('(prefers-color-scheme: light)') : null; + + const isLightModeActive = () => { + return !!systemLightModeSetting()?.matches; }; + let colorMode; switch (themeFromLocalStorage) { case '${ThemeSetting.SYSTEM}': - colorMode = isDarkModeActive() ? '${ThemeSetting.DARK}' : '${ThemeSetting.LIGHT}' + // LOGIC CHANGE: If Light is active -> Light. Otherwise (Dark, No Preference, or Error) -> Dark. + colorMode = isLightModeActive() ? '${ThemeSetting.LIGHT}' : '${ThemeSetting.DARK}' break case '${ThemeSetting.DARK}': case '${ThemeSetting.LIGHT}': colorMode = themeFromLocalStorage break default: - colorMode = '${ThemeSetting.LIGHT}' + // 3. Fallback to DARK in case of error + colorMode = '${ThemeSetting.DARK}' } + const root = document.documentElement; const iterate = (obj) => { if (!obj) return; @@ -46,4 +54,4 @@ const MagicScriptTag = (props) => { export const onRenderBody = ( { setPreBodyComponents }) => { setPreBodyComponents(); -}; \ No newline at end of file +};