Switching to dark theme flashes white on load. How do people

Back to list2023-12-17
You

Switching to dark theme flashes white on load. How do people avoid it?

ChatGPT

Set the theme before first paint with a tiny inline script in the head that reads the stored preference and puts an attribute on the root element. Anything loaded as an external file arrives too late, which is exactly what the flash is showing you.

You
index-size-growth.png
You

At what point does a static site need a backend?

ChatGPT

When you need to keep a secret or write shared state. Everything else, including search over your own content, can be done in the browser with a prebuilt index, and it stays working long after any server you would have written stops being maintained.

You

Web font swaps cause a visible reflow. Fix?

ChatGPT

font-display: swap plus a fallback stack with matched metrics. The modern lever is size-adjust and ascent-override on the fallback @font-face, which lets the substitute occupy the same space, so the swap becomes invisible rather than merely fast.

You

Is there a simpler version that gets most of the benefit?

ChatGPT

Yes: do the first step, skip the automation, and revisit in a month. Most of the value is in the first step, and most of the cost is in making it repeatable before you know it is right.