Viewports and color schemes

Two viewports

Every screen owns one mobile node and one desktop node, and the build writes a document for each. The catalogue’s viewport control switches between them, and a link keeps the viewport you are in.

Turn on dark

Dark is off until you ask for it. Enable it once in the config, then select your own theme from the color scheme in your renderer.

export default defineConfig({
  colorSchemes: ["light", "dark"],
  entriesDir: "docs/mockups/entries",
  mockupsDir: "docs/mockups/generated",
  renderer: "docs/mockups/renderer.tsx",
});

export default function render(input: RenderInput): string {
  const theme = themes[input.colorScheme];
  return document(theme, input.node);
}

Mokly re-renders the same mobile and desktop nodes for dark output, so a screen is never written twice. The catalogue shows a Light and Dark switch once the catalogue has dark documents.

One screen that stays light

A screen that is deliberately light-only says so. The list must contain "light", must not repeat a scheme and must be a subset of the catalogue’s own set.

defineScreen({
  colorSchemes: ["light"],
  // The rest of the screen is unchanged.
});

A nested screen marker takes the same field, and it is never inherited from a collection or the root of a tree.

Stylesheets per scheme

A stylesheet rule appends lightStylesheets or darkStylesheets after its shared list, so one rule can add the sheet a scheme needs.

Exported types