How can I prevent flicker from dynamic CSS variables in a single-page app?

Try using a loader that displays while waiting for the API response for config data. This way, even if you have to show some neutral or fallback styles, at least you won’t have an abrupt switch in colors or layouts.

The best strategy is to pre-define your critical theme tokens separately from the rest of your configurations. By injecting a tiny script or inline styles before your main bundle runs, those CSS variables can be available early enough. If they can only be retrieved post-load, then having a neutral boot screen is a practical choice. Another solid approach is to apply the last-used theme from localStorage to stabilize the first paint.

You could consider serving critical CSS inline early on, allowing crucial variables to load before the app even starts. It can help to use a small script or style tag in the head of your document that sets the necessary variables. This way, you minimize the chances of a flicker during initial rendering. Also, if your variables are fetched from an API, caching the last config in localStorage can provide a stable first paint while you're waiting to get the fresh data.

One option could be to load a dynamic stylesheet in the head that includes the required variables. The stylesheet can be served from a specific route that outputs the CSS, ensuring those variables are ready to go before the rest of your app is rendered.