TutorialsWeb foundations

A dark theme that does not flash

The theme has to be applied before the first paint, which a deferred module cannot do.

IntermediateArticle4 steps12 min

Theme flashing has a single cause: the theme is applied after the browser has already painted the page. Everything else follows from that.

1. Put the tokens on the root

The theme is carried by an attribute on <html>, and every colour resolves through a CSS variable. Changing the attribute then re-themes the whole page at once, without any component knowing the current theme.

2. Resolve the theme in the <head>

The script has to be inline and blocking. A type="module" script is deferred by definition: it will run after paint, and the visitor will watch the page change.

3. Let an explicit choice win

With nothing stored, follow prefers-color-scheme. With a stored choice, the choice wins — including when the system preference changes afterwards.

4. Test the right thing

A test reading the attribute after load passes even when the script is deferred. Read it at the first frame instead, which is the closest a test gets to what the eye saw.

Talk to the Discovery AgentOpen in full
Command

Agent

Talk to the Discovery AgentFrame your project in eight questions.

Act

Dark themePin the site's appearance
Light themePin the site's appearance
System themeFollow the system preference again
Switch the site to FrenchFrançais
Labs — ProductFilter Labs by type
Labs — PrototypeFilter Labs by type
Labs — ResearchFilter Labs by type
Labs — Reset filtersClear every Labs filter
Journal — EngineeringFilter the Journal by category
Journal — SecurityFilter the Journal by category
Journal — Agent-NativeFilter the Journal by category
Journal — StudioFilter the Journal by category
Journal — Reset filtersClear every Journal filter
Tutorials — BeginnerFilter tutorials by level
Tutorials — IntermediateFilter tutorials by level
Tutorials — AdvancedFilter tutorials by level
Tutorials — Reset filtersClear every tutorials filter

Services

DiscoveryFrame the product before the first line of code, so the budget builds instead of correcting.
Product designAn interface that holds together, carried by a design system your developers can keep alive without us.
Web developmentA fast web application that holds up over time, with the tests and delivery chain to match.
Mobile developmentAn iOS and Android app from a single codebase, published on both stores.
Infrastructure & securityInfrastructure described as code, and Zero Trust access that does not rest on a text message.
Maintenance & evolutionA product kept current, watched and fixed, with someone who answers when it breaks.
Agent-Native Architecture AdvisoryMake an existing product agent-operable without rewriting it — and without opening more than it should.

Go to

YorroProduct engineering studio in Abidjan and Paris. We design, we build, we ship.
ServicesBuild a product end to end, or advise a team on its agent-native architecture.
LabsWhat the studio has built: products, prototypes and research, with where each one actually stands.
TutorialsStep-by-step guides drawn from real projects, grouped into tracks by topic.
JournalThe studio's notes and positions.
ContactDescribe your project; you get a framing back, not a boilerplate quote.
AboutWho runs the studio, how it works, and what it turns down.
Discovery AgentDescribe your project in conversation; the agent ticks the modules and produces an indicative estimate.

↑↓move↵runescclose