Theme

Example

A walkthrough of a corporate doc theme, covering brand tokens, primitive re-routing, selector refinement and dark-mode handling, all in one self-contained custom.css.

AI assisted, human approved — novem uses AI to review and keep our documentation up to date.

The best way to understand novem theming is to see a complete example. Below is a small custom.css that rebrands a doc and every plot embedded inside it. To follow along, set /config/theme to custom first, then push this CSS to your visualisation.

.novem--doc--page {
  /* Brand tokens (private to this CSS) */
  --brand-navy: #0c2340;
  --brand-gold: #c5a55a;
  --brand-light: #f4f1eb;

  /* Re-route engine primitives to brand tokens */
  --novem-font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --novem-font-heading: "Inter", "Segoe UI", system-ui, sans-serif;
  --novem-accent:       var(--brand-navy);
  --novem-link:         var(--brand-navy);
  --novem-surface:      var(--brand-light);
  --novem-table-header-bg: var(--brand-navy);

  /* Categorical chart palette to brand sequence */
  --novem-color-1: var(--brand-navy);
  --novem-color-2: var(--brand-gold);
  --novem-color-3: #6e8aab;
  --novem-color-4: #a5895a;
  --novem-color-5: #2c4a6e;
}

/* Selector refinement on top of the variable layer */
.novem--doc--heading--2 {
  border-bottom: 2px solid var(--brand-gold);
  padding-bottom: 6px;
}

/* Dark-mode overrides — same primitives, different values */
&[data-dark-mode] .novem--doc--page {
  --brand-navy: #8ba4d4;
  --brand-gold: #d4b86a;
  --brand-light: #1a1a2e;
}

The first block defines a few private brand tokens and re-routes the engine primitives to point at them. Anything embedded in this doc — plots, grids, tables and callouts — picks up the navy and gold palette without further configuration. Tables use navy headers because we've re-routed --novem-table-header-bg directly.

The second block adds a selector refinement to give h2 headings a gold underline. This is layered on top of the variable substitution and illustrates how a theme can go beyond simple primitive overrides when the visual treatment calls for it.

The third block flips the brand tokens for dark mode. Because the --novem-* primitives still point at the brand tokens, the change cascades through to every consumer automatically.

Next
Overview