Dark mode without a flash of white

Back to list2024-08-05
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

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

How long does this usually take in practice?

ChatGPT

An afternoon to do it properly the first time, then minutes when it recurs. Most of the first afternoon goes into discovering which of the defaults do not match your situation.