How to add theming to an SSR app (TanStack Start)

Where should we persist the theme preference in an SSR app? Implementing dark mode often seems like a trivial feature. In practice, it turns out to be surprisingly tricky in server-rendered applications. In a purely client-side app, persisting the theme preference is straightforward: store the value somewhere in the browser like localStorage and read it again when the app loads. However, doing the same in an SSR app comes with a catch. Storing it in localStorage Naturally, the first step is to reach for the same approach that works in a client-side app: persist the theme in localStorage . theme.tsx const STORAGE_KEY = " theme " ; type Theme = " light " | " dark " ; const DEFAULT_THEME : Theme = " light " ; interface ThemeContextValue { theme : Theme ; toggleTheme : () => void ; } const ThemeContext = createContext < ThemeContextValue | null > ( null ); export function ThemeProvider ({ children }: { children : ReactNode }) { const [ theme , setTheme ] = useState ( () => ( localStorage .