From 79f3ee2844d176e52d4b8024fedeb44246ce574e Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Mon, 25 Aug 2025 21:35:14 +0700
Subject: [PATCH] fix(client): initialize theme during gatsby SSR (#61922)

---
 client/gatsby-ssr.js  |  8 +++++++-
 client/utils/tags.tsx | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js
index 79d9c780cb7..1b54e5cb867 100644
--- a/client/gatsby-ssr.js
+++ b/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));
 };
 
diff --git a/client/utils/tags.tsx b/client/utils/tags.tsx
index 4f1d9c9814a..5c4c58e36d5 100644
--- a/client/utils/tags.tsx
+++ b/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];
+}