Theming

Theme and density

QuartileProvider takes theme (light, dark or system) and density (comfortable or compact). Providers nest, so one panel can differ from the page around it, as below.

<QuartileProvider theme="dark" density="comfortable">
  <Card
    title="Revenue by channel"
    subtitle="Sep 7 – Oct 6, 2026"
    actions={
      <Select
        aria-label="Sort"
        size="sm"
        value={sort}
        onChange={setSort}
        options={[
          { value: 'desc', label: 'Highest first' },
          { value: 'asc', label: 'Lowest first' },
        ]}
      />
    }
  >
    <BarChart data={orders} x="channel" y="amount" sort={sort} format="currency-compact" />
  </Card>
</QuartileProvider>

Compact density remaps control heights, paddings, row height and card padding; components do not branch on density in JavaScript.

Overriding tokens

Tokens are defined on :root and [data-theme='light'], with dark values under [data-theme='dark'] and compact values under [data-density='compact']. Override them in your own stylesheet, loaded after Quartile's, scoped the same way.

/* Your stylesheet, loaded after @quartile/react/styles.css */
[data-theme='light'] {
  --q-signal: #0f7b6c;        /* buttons, selections, focus */
  --q-cat-1: #0f7b6c;         /* first chart series */
  --q-font-sans: 'Inter', system-ui, sans-serif;
}

Token reference

All 104 tokens, read from the library's tokens.css when this site was built.