Themes

RichView reports support light and dark modes with automatic switching via prefers-color-scheme, plus corporate branding overrides.

Built-in themes

Theme	Description
auto	Follows system preference (default)
default-light	Light mode: warm cream surfaces, dark text
default-dark	Dark mode: warm dark surfaces, light text

Set the theme in your report schema:

theme: auto

Or force a theme when generating:

richview generate report.yaml  # uses schema theme or auto

Design tokens

All visual properties are derived from 6 seed parameters in @richview/design-tokens:

Seed	Value	Purpose
hue	40	Base hue for neutral surfaces (warm sand)
accentHue	277	Accent hue (indigo) for interactive elements
baseSize	16	Base font size in pixels
scaleRatio	1.25	Typographic scale (Major Third)
gridUnit	4	Base spacing unit in pixels
baseLightness	0.15	Dark mode surface lightness (OKLCH)

Color system

Colors use the OKLCH color space for perceptual uniformity. Surfaces have warm tint (hue 40), accents use indigo (hue 277).

All tokens are exposed as CSS custom properties with the --rv- prefix:

/* Surfaces */
--rv-surface-primary    /* page background */
--rv-surface-secondary  /* card/container background */
--rv-surface-elevated   /* raised elements */

/* Text */
--rv-text-primary       /* body text */
--rv-text-secondary     /* secondary labels */
--rv-text-muted         /* captions, hints */

/* Semantic */
--rv-color-accent       /* interactive elements */
--rv-color-success
--rv-color-warning
--rv-color-danger

Typography

• Body: Inter Variable (with OpenType features: tabular nums, contextual alternates)
• Code: Geist Mono
• Scale: Major Third (1.25 ratio)

--rv-font-body   /* Inter Variable */
--rv-font-code   /* Geist Mono */
--rv-size-display /* 40px */
--rv-size-title   /* 32px */
--rv-size-body    /* 16px */

Data visualization palette

A 10-color categorical palette derived via golden-angle rotation in OKLCH:

1. Indigo #5b60d7
2. Amber #c9680f
3. Teal #00a19d
4. Magenta #b761b1
5. Olive #918b00
6. Blue #118dd9
7. Coral #d15b5c
8. Green #00a065
9. Violet #916fd4
10. Gold #ba7500

Available as --rv-viz-categorical-0 through --rv-viz-categorical-9.

Corporate branding

Override the default theme with corporate branding. Create a brand config file:

richview theme init -o .richviewrc.brand.yaml

This generates a YAML file you can customize:

brandName: Acme Corp
logo:
  url: https://example.com/logo.svg
  height: 32
colors:
  primary: "#1a365d"
  secondary: "#2d3748"
typography:
  headingFont: Georgia, serif
  bodyFont: system-ui, sans-serif
hidePoweredBy: false

Validate and preview your branding:

richview theme validate .richviewrc.brand.yaml
richview theme preview .richviewrc.brand.yaml

Programmatic branding

import { render } from "@richview/renderer";

const html = render(report, {
  branding: {
    brandName: "Acme Corp",
    colors: { primary: "#1a365d" },
  },
});

Report-level settings

Reports can also override presentation via the settings field:

settings:
  maxWidth: 900
  fontPair:
    heading: Georgia, serif
    body: system-ui, sans-serif
  coverImageUrl: https://example.com/cover.jpg
  contentLayout:
    sidebarEnabled: false