feat(theme): avoid flash of inaccurate theme in SPA mode (#102045)

natemoo-re · JonasBa · web-flow · commit a293eee873b1 · 2025-10-24T17:36:47.000Z
This PR makes `pnpm dev-ui` and Vercel preview deployments reflect user theme preferences By inlining a small script to the [`index.ejs`](https://github.com/getsentry/sentry/blob/master/static/index.ejs) template, we can avoid [Flash of inAccurate coloR Theme (aka `FART`)](https://css-tricks.com/flash-of-inaccurate-color-theme-fart/). Unfortunately, the theme is asynchronously fetched, but by defaulting to `body.theme-system`, the likelihood of an unstyled flash should be greatly reduced. --------- Co-authored-by: Jonas <jonas.badalic@sentry.io>
diff --git a/static/index.ejs b/static/index.ejs
@@ -12,9 +12,27 @@
       }
       __sentryMark('head-start');
     </script>
+    <link rel="preload" href="/api/client-config/" as="fetch" crossorigin />
+    <script>
+      // Django inlines a class for the user theme, but SPA mode requires manual init.
+      // Default to `.theme-system` and replace with user theme as soon as possible.
+      const BOOTSTRAP_URL = '/api/client-config/';
+      async function applySpaTheme() {
+        const res = await fetch(BOOTSTRAP_URL);
+        if (res.ok) {
+          const data = await res.then(res => res.json());
+          const theme = data.user?.options?.theme;
+          if (theme) {
+            document.body.classList.replace('theme-system', `theme-${theme}`);
+            return;
+          }
+        }
+        document.body.classList.remove('theme-system');
+      }
+      applySpaTheme();
+    </script>
   </head>
-
-  <body>
+  <body class="theme-system">
     <% if (htmlWebpackPlugin.options.unsupportedBrowser) { %>
     <style>.unsupported-browser { display: none; }</style>
     <div class="unsupported-browser">
