Skip to content

Example

Define a document palette, style headings and tables, and add dark-mode colours in custom.css.

AI-assisted, human-approvednovem uses AI to review and keep our documentation up to date.

This example defines a navy and gold document theme. Set config/theme to custom, then write the CSS below to config/custom/custom.css. The palette is fictional and can be replaced with your own colours.

.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 rule defines palette variables and assigns them to novem variables. Table headers use --brand-navy through --novem-table-header-bg, and embedded plots receive the categorical palette.

The second rule adds a gold underline to level-two headings.

The final rule supplies different palette values for dark mode. The novem variables still refer to the same palette names, so elements using them receive the dark-mode colours.

Next
Libraries