diff --git a/apps/code/index.html b/apps/code/index.html
index 6b829c8c6..547e84904 100644
--- a/apps/code/index.html
+++ b/apps/code/index.html
@@ -1,14 +1,38 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en">
 
 <head>
   <meta charset="UTF-8" />
   <link rel="icon" type="image/png" href="/src/renderer/assets/images/bw-logo.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>PostHog Code</title>
+  <script>
+    // Apply the user's persisted theme before first paint so pre-hydration CSS
+    // (.dark selectors, --color-background, etc.) matches what React will
+    // render. Kept in sync post-hydration by syncDarkClass in themeStore.ts.
+    (function () {
+      try {
+        var raw = localStorage.getItem("theme-storage");
+        var theme = "system";
+        if (raw) {
+          var parsed = JSON.parse(raw);
+          if (parsed && parsed.state && parsed.state.theme) {
+            theme = parsed.state.theme;
+          }
+        }
+        var isDark =
+          theme === "dark" ||
+          (theme === "system" &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches);
+        if (isDark) document.documentElement.classList.add("dark");
+      } catch (e) {
+        // No persisted preference — let the theme store decide after hydration.
+      }
+    })();
+  </script>
 </head>
 
-<body class="bg-dark-bg text-dark-text">
+<body>
   <div id="root"></div>
   <script type="module" src="/src/renderer/main.tsx"></script>
 </body>
diff --git a/apps/code/src/renderer/components/FullScreenLayout.tsx b/apps/code/src/renderer/components/FullScreenLayout.tsx
index a30297a8e..dce9ce33f 100644
--- a/apps/code/src/renderer/components/FullScreenLayout.tsx
+++ b/apps/code/src/renderer/components/FullScreenLayout.tsx
@@ -26,7 +26,10 @@ export function FullScreenLayout({
     <Theme
       appearance={isDarkMode ? "dark" : "light"}
       accentColor={isDarkMode ? "yellow" : "orange"}
+      grayColor="slate"
+      panelBackground="solid"
       radius="medium"
+      scaling="105%"
     >
       <Flex
         direction="column"
diff --git a/apps/code/src/renderer/styles/globals.css b/apps/code/src/renderer/styles/globals.css
index 3cceea59b..d24c7c619 100644
--- a/apps/code/src/renderer/styles/globals.css
+++ b/apps/code/src/renderer/styles/globals.css
@@ -826,8 +826,7 @@ body {
 
 :root,
 .light,
-.light-theme,
-.radix-themes {
+.light-theme {
   --color-background: #f2f3ee;
   --terminal-foreground: #0d0d0d;
   --terminal-background: transparent;
@@ -927,8 +926,8 @@ button,
   cursor: pointer;
 }
 
-/* PostHog Lemon UI button style — applies to solid buttons in explicitly-light Theme wrappers
-   (auth screen, onboarding flow). Uses the 3D depth shadow and lift-on-hover effect. */
+/* PostHog Lemon UI button style — applies to solid buttons in any light-appearance
+   Theme wrapper. Uses the 3D depth shadow and lift-on-hover effect. */
 .radix-themes[data-appearance="light"] .rt-Button[data-variant="solid"] {
   box-shadow: 0 3px 0 -1px var(--accent-8);
   border-radius: 6px;
