fix(client): initialize theme during gatsby SSR (#61922)

client/gatsby-ssr.js

@@ -8,7 +8,11 @@ import i18n from './i18n/config';
 import { stripe } from './src/utils/stripe';
 import { createStore } from './src/redux/create-store';
 import layoutSelector from './utils/gatsby/layout-selector';
-import { getheadTagComponents, getPostBodyComponents } from './utils/tags';
+import {
+  getheadTagComponents,
+  getPostBodyComponents,
+  getPreBodyThemeScript
+} from './utils/tags';
 import GrowthBookProvider from './src/components/growth-book/growth-book-wrapper';
 
 const store = createStore();
@@ -34,9 +38,11 @@ export const wrapPageElement = layoutSelector;
 export const onRenderBody = ({
   pathname,
   setHeadComponents,
+  setPreBodyComponents,
   setPostBodyComponents
 }) => {
   setHeadComponents(getheadTagComponents());
+  setPreBodyComponents(getPreBodyThemeScript());
   setPostBodyComponents(getPostBodyComponents(pathname));
 };
 

client/utils/tags.tsx

@@ -62,3 +62,36 @@ export function getPostBodyComponents(superblock: string): JSX.Element[] {
 
   return scripts.filter(Boolean);
 }
+
+export function getPreBodyThemeScript(): JSX.Element[] {
+  const script = (
+    <script
+      key='prebody-theme-init'
+      dangerouslySetInnerHTML={{
+        __html: `
+(function(){
+  let theme = 'light';
+  const localTheme = localStorage.getItem('theme');
+
+  if (localTheme !== null) {
+    theme = localTheme === 'dark' ? 'dark' : 'light';
+  } else if (
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  ) {
+    theme = 'dark';
+  }
+
+  const bodyEl = document && document.body;
+
+  if (bodyEl && bodyEl.classList) {
+    bodyEl.classList.remove('light-palette');
+    bodyEl.classList.remove('dark-palette');
+    bodyEl.classList.add(theme + '-palette');
+  }
+})();`
+      }}
+    />
+  );
+  return [script];
+}