diff --git a/src/app/[locale]/ColorSchemeInjector.tsx b/src/app/[locale]/ColorSchemeInjector.tsx
index 3331d9db67..6e465c0282 100644
--- a/src/app/[locale]/ColorSchemeInjector.tsx
+++ b/src/app/[locale]/ColorSchemeInjector.tsx
@@ -7,28 +7,27 @@ import {
 } from "~/lib/constants"
 
 export const ColorSchemeInjector = () => {
+  const scriptContent = `
+    (() => {
+      const STORAGE_KEY = "${DARK_MODE_STORAGE_KEY}";
+      const storedValue = localStorage.getItem(STORAGE_KEY);
+      
+      // Determine color scheme
+      if (storedValue === null || storedValue === undefined) {
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        const colorScheme = prefersDark ? "${COLOR_SCHEME_DARK}" : "${COLOR_SCHEME_LIGHT}";
+        document.documentElement.classList.add(colorScheme);
+      } else {
+        const isDark = storedValue === "true";
+        document.documentElement.classList.add(isDark ? "${COLOR_SCHEME_DARK}" : "${COLOR_SCHEME_LIGHT}");
+      }
+    })();
+  `.trim()
+
   return (
     <script
       suppressHydrationWarning
-      dangerouslySetInnerHTML={{
-        __html: `(() => {
-let DARK_MODE_STORAGE_KEY = "${DARK_MODE_STORAGE_KEY}";
-
-let data = {}
-const isDark = localStorage.getItem(DARK_MODE_STORAGE_KEY)
-if (typeof isDark === "undefined") {
-  const currentColorScheme = window.matchMedia("(prefers-color-scheme: dark)")
-    .matches
-    ? "${COLOR_SCHEME_DARK}"
-    : "${COLOR_SCHEME_LIGHT}"
-  document.documentElement.classList.add(currentColorScheme)
-} else {
-  document.documentElement.classList.add(
-    isDark === "true" ? "${COLOR_SCHEME_DARK}" : "${COLOR_SCHEME_LIGHT}",
-  )
-}
-})();`,
-      }}
-    ></script>
+      dangerouslySetInnerHTML={{ __html: scriptContent }}
+    />
   )
 }