Theme sandbox

Hidden without JS, because there is nothing to switch. The controls only work on the real section on Home.

Clean · light

This site

3 themes

This whole site can change its look. Same content, three themes, one set of tokens.

Clean / Comic / Vector

Clean · dark

This site

3 themes

This whole site can change its look. Same content, three themes, one set of tokens.

Clean / Comic / Vector

Vector

This site

3 themes

This whole site can change its look. Same content, three themes, one set of tokens.

Clean / Comic / Vector

Comic

This site

3 themes

This whole site can change its look. Same content, three themes, one set of tokens.

Clean / Comic / Vector

Markup contract

section.theme-sandbox > .section-head + .theme-sandbox__layout > .theme-sandbox__copy + .theme-sandbox__stage.
.theme-sandbox__copy holds the intro, the button and the hint. .theme-sandbox__stage holds a label and an iframe of /theme-demo/.
The button plays the sequence, and theme-sandbox.js runs it: a redline to the preview, the three themes in turn, then a redline to the real switch.
On a real page the section starts hidden and theme-sandbox.js shows it.