Give the interface your style

Theme the viewer and its controls with ordinary CSS classes.

Your project can theme the artwork's surrounding interface. Use ordinary CSS selectors so the same visual language reaches navigation, information and artwork controls.

Where styles come from

The wizard posts its CSS to the code page with the style.immutables.art tag. The current client also serves mirrored style.css and style.mobile.css files per project for reliable loading. A live reader can fall back to page posts; an archive reader uses its cached styles. Coordinate publication of a separate mobile stylesheet with the platform rather than assuming a second wizard field exists.

Project styles are scoped to #root. Root selectors such as body, html and :root are mapped into that scope. Some platform or administration panels intentionally live outside it; do not assume project CSS should recolor every wallet or administrative flow.

Start with the existing classes

body { background: #000; color: #fff; }
.navbar { background: #000 !important; }
.btn, .form-control { border-radius: 0; }
.font-display { font-family: 'Major Mono Display', monospace; }
.artwork-controls .modal-content { background: #000; color: #fff; }
.artwork-controls .btn { color: #fff; border-color: #777; }
.artwork-control[aria-pressed="true"] { background: #333; }
.artwork-controls { --artwork-controls-gap: 8px; }

This is an example, not a required palette. Test selected, unselected, focused and disabled buttons. A theme can override the UI font too; keep body copy and small controls readable even if the artwork uses a distinctive display face.

Layout and phones

Style .cell and .selected carefully. A mask or transform intended for the artwork should not hide its owner caption or interfere with taps. The control panel is a portal inside #root, outside the transformed artwork cell; use its documented classes instead of assuming it is nested inside a canvas wrapper.

Preserve 44-pixel touch targets and a visible focus indicator. Keep native input text at least 16 pixels on mobile, allow the on-screen keyboard room, and avoid fixed widths that overflow a narrow screen. The default controls already handle keyboard viewport changes and safe areas.

Do not override .is-idle in a way that leaves invisible buttons intercepting touches. The faint icon should become clear on hover or keyboard focus. Respect prefers-reduced-motion for interface effects.

Preserve the visual dependencies

A remote font or CSS import is a dependency, even when the art source is on Ethereum. Choose a usable fallback and include external assets in your preservation plan. Use the full UI preview, a phone-sized viewport, a reload and a downloaded copy to test your styling.

Source basis: scopeCss, projectAssets, ArtworkControls.css and the wizard's CSS posting flow.