Previewing another theme in the Canvas editor with Theme Flip

Theme Flip (theme_flip) lets someone with permission preview another installed theme for their own session. Inside the Canvas editor that works, and it has a catch every theme author should know before relying on it.

What you see in the editor

With a preview theme chosen, the editor’s page preview renders with that theme’s CSS. Canvas stores each component’s markup, utility classes included, and the stored classes don’t change when the theme does. A class like bg-light has a background only because the theme the page was authored under defines it. Flip to a theme that doesn’t define it and the class stays in the markup, the stylesheet that gave it meaning is gone, and nothing errors. The section just loses its background.

That’s an accurate preview of what visitors would see if the site ran that theme. It isn’t a preview of how the content will look under the new theme once someone has re-authored it for it.

Build components that survive a flip

Three habits on the component side keep a flip from breaking anything:

• Ship the styling with the component. A Single Directory Component loads the CSS beside its template, so the component looks the same under any theme that renders it.
• Treat theme utilities as shared vocabulary. If components lean on utility classes, agree on one set and have every theme you’ll flip between define it. Previewing a theme that doesn’t is the same break, just visible.
• Use design tokens for colour and spacing. Custom properties defined by each theme let one component adapt. A hardcoded theme class doesn’t.

Where the preview applies

Theme Flip skips admin routes, so a flipped theme applies on the Canvas editor routes that aren’t flagged as admin routes. Canvas forces its own canvas_stark theme on its API form routes, so the editing forms stay readable while the page preview flips.

The dock that opens the preview picker hides itself on /canvas, /canvas/*, /layout_builder/* and /node/*/layout by default. That list only hides the dock. A theme picked on another page still applies when you open the editor. Previewing needs the use theme flip toggle permission, which no role has by default.

When to use it

Use it to review how finished pages hold up under a second theme: a rebrand in progress, a dark variant, a microsite theme. Don’t use it to decide whether a component is portable. Check that in the component itself, with its own CSS and shared tokens.

Theme Flip once skipped every /canvas route to stop exactly this effect, and I removed that check because it also blocked the editor’s preview of the content. The record is in the commit that added it and the one that removed it.