From de3af82fe08392f93c5eb5249596d3dbf787d5db Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 9 Jul 2026 13:42:01 +0100 Subject: [PATCH 01/10] feat(theme): set theme class before paint to prevent FOUC Add shared theme constants and an inline pre-paint script, injected into by gatsby-ssr, that reads the persisted choice (validated against the known themes, or the system preference) and sets ui-theme-light/ui-theme-dark on before first paint. On the static build this avoids a flash of the wrong theme before React hydrates. Refs DX-1518 Co-Authored-By: Claude Opus 4.8 --- gatsby-ssr.tsx | 5 +++++ src/utilities/theme.ts | 49 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 54 insertions(+) create mode 100644 src/utilities/theme.ts diff --git a/gatsby-ssr.tsx b/gatsby-ssr.tsx index c34c350f36..7f048eb0bd 100644 --- a/gatsby-ssr.tsx +++ b/gatsby-ssr.tsx @@ -1,10 +1,15 @@ import React from 'react'; import type { GatsbySSR } from 'gatsby'; import { getSandpackCssText } from '@codesandbox/sandpack-react'; +import { THEME_NO_FLASH_SCRIPT } from './src/utilities/theme'; const onRenderBody: GatsbySSR['onRenderBody'] = ({ setHeadComponents }) => { const inlineScripts: React.ReactNode[] = []; + // Set the theme class on before first paint to avoid a flash of the + // wrong theme. Runs first so the class is present before any styles apply. + inlineScripts.push(