tailwind2-5 Exercise 1: Does Dark Mode Flash?
===============================================
Setup: a folder with Tailwind installed (npm install tailwindcss @tailwindcss/cli). Create the four files below. Build with
npx @tailwindcss/cli -i f.css -o f.out.css
Then open each page in Chrome. To test the "saved preference is dark" case, open DevTools, run localStorage.setItem('mode','dark') in the console, reload the page, and in the console run
JSON.stringify(window.__frames)
The recorder in each page samples the background on every animation frame for 400 ms. (The results below came from a scripted Chrome that did exactly this.)
--- f.css ---
@import "tailwindcss" source(none);
@source "./flash.html";
@source "./noflash.html";
@source "./module.html";
@theme inline { --color-surface: var(--surface); --color-ink: var(--ink); }
:root { --surface: oklch(0.99 0 0); --ink: oklch(0.25 0.02 260); }
[data-mode="dark"] { --surface: oklch(0.2 0.02 260); --ink: oklch(0.95 0.01 260); }
--- flash.html (the mode is applied by a late script, standing in for a framework that applies it after it loads) ---
Late script: mode applied after 150 ms
--- noflash.html (an ordinary inline script in the head, before the stylesheet) ---
Inline script in head
--- module.html (the same script, but type="module") ---
Inline MODULE script in head
Results (saved preference: dark; every time the sampled colour changes it is listed):
== flash.html
0 ms oklch(0.99 0 0) light surface
175 ms oklch(0.2 0.02 260) dark surface
== noflash.html
0 ms oklch(0.2 0.02 260) dark from the first sample
== module.html
0 ms oklch(0.99 0 0) light in the first sample
1 ms oklch(0.2 0.02 260) dark 1 ms later
WHY THIS WORKS AS AN ANSWER
---------------------------
The page's colours come from variables that [data-mode="dark"] redefines, so what matters is WHEN the attribute is set. flash.html sets it after 150 ms, as a framework would after it loads and runs, so
the first frames use the light variables and the colour jumps to dark at 175 ms: a visible flash for a visitor who chose dark. noflash.html sets the attribute in a classic inline script in the head, which runs
immediately while the page is still being read and before any content is painted, so the very first sample is already dark. module.html shows a subtler case: a module script is deferred by the
browser even when it is written inline, so the first animation frame still saw the light colour and the change came 1 ms later. I cannot tell from this whether a visitor would see that frame on screen,
but the classic script never showed light at all, so use a classic script. The rule: set the mode attribute from a blocking script in the document head, before the stylesheet, not from your application code.
In Astro this means writing