Theme the site, the panel and PDFs

One stylesheet, named theme in opend.config.yaml, styles the docs site, the help panel and every PDF.

Override the --opend-* custom properties in your theme.

:root {
  --opend-accent: #1f5fbf;      /* brand colour: links, highlights, focus */
  --opend-text: #14213d;
  --opend-muted: #52607a;       /* short descriptions, secondary text */
  --opend-surface: #ffffff;     /* page background */
  --opend-surface-alt: #f2f5fa; /* code, table headers, the open menu */
  --opend-border: #d9e0ea;
  --opend-warn: #b45309;        /* warning, caution and restriction notes */
  --opend-danger: #b3261e;      /* danger notes */
  --opend-info: #2457c5;        /* plain notes */
  --opend-cond: #7c3aed;        /* condition markers in the staff view */
  --opend-font: system-ui, sans-serif;
  --opend-mono: ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --opend-accent: #7fb0ff; --opend-surface: #10151d; --opend-text: #e6ebf2; }
}

The link, hover, focus and highlight colours, headings, code backgrounds and note tints are derived from these, so a theme that sets only --opend-accent rebrands the whole site. To fine-tune, set the derived properties too: --opend-link, --opend-link-hover, --opend-accent-soft, --opend-focus, --opend-heading, --opend-border-strong, --opend-code-bg and --opend-on-accent. Layout properties are --opend-radius, --opend-radius-sm, --opend-shadow, --opend-measure (reading width), --opend-sidebar-width, --opend-header-height and --opend-layout-max.

Keep text readable: body text and links need a contrast of at least 4.5:1 against --opend-surface, in both colour schemes.

Optional: add a logo.
```
logo: theme/logo.svg
```
The image is shown before the site title in the page header. See the logo field in opend.config.yaml reference.
Optional: add print rules for PDFs.
```
.publication .pub-cover h1 { color: #13795b; }
.publication .pub-chapter h1 { border-bottom: 2px solid #13795b; }
```
The print document's body has the class publication. Useful hooks are .pub-cover, .pub-toc, .pub-chapter and .pub-part. PDFs always print in the light scheme.
Optional: choose how PDFs are laid out.
```
pdf:
  template: report
```
Page size, margins, cover, contents and running header and footer come from a PDF template; see Choose a PDF template.
Check the result on a page, in the help lab's panel and in the print HTML, at phone and desktop widths and in the light and dark schemes.

Results

The theme loads after the built-in styles, and in PDFs after the print styles, so its rules win. This site's theme is site/theme/site.css. Custom rules can use the page's class names, such as .site-header, .toc (the sidebar on wide screens), .site-menu-panel (the panel the Menu button opens on narrow screens, with search, the contents and the PDF links), .opend-nav (both copies of the contents) and main.

Restriction: In PDFs the theme is inlined into a document without a base URL, so url() references to fonts or images in it are not loaded. Use fonts installed on the server, or the system font stack.

Staff of a hosted site can also set a theme on the admin console's Appearance page, without changing the repository. It loads after this theme, so it wins where both set the same thing; see Change the site's look from the admin console.