Docs

Styling contract

Every hook the components emit, and what your CSS must do with it.

proa_docs_build lowers authored components into HTML carrying stable class and data- hooks. proa_docs ships a default theme for all of them, so you do not have to write any of this to get a working site.

use proa_docs::DocsAssets;

html_sync! {
    <head>
        {DocsAssets::new()}
    </head>
}

Read on when you want to change how it looks.

Theming without replacing anything

Every colour in the default theme comes from 15 custom properties scoped to .proa-docs-body, the class DocsShell puts on its root. Override them and every component follows:

.proa-docs-body {
  --docs-bg: #fbfbfa;
  --docs-fg: #18181b;
  --docs-accent: #ff6a13;
  --docs-line: rgba(24, 24, 27, 0.12);
}

.dark .proa-docs-body {
  --docs-bg: #0b0b0d;
  --docs-fg: #f4f4f5;
}

That is the whole theming API. Reach for the hooks below only when you need to change layout or structure, not colour.

Replacing the theme

Ship your own CSS instead of DEFAULT_STYLESHEET and target the hooks in this page. They are part of the public API: they will not change without a major version.

Two rules make a replacement theme work:

• Tabs and the code explorer are CSS-only. They are radio groups — input[name="proa-docs-tabs-N"] plus sibling panels. There is no JavaScript fallback, so if your CSS does not implement the :checked sibling selectors, every panel renders stacked. Copy that section from the default stylesheet before changing anything else.
• data- attributes carry state, classes carry identity. Style [data-copied="true"], [data-highlighted-line], and [data-kind="folder"]; do not depend on element order.

What needs JavaScript

Almost nothing. DEFAULT_SCRIPT wires two things and both degrade cleanly:

Everything else — tabs, accordions, the code explorer, steps, callouts, file trees — is CSS-only and works with JavaScript disabled.

Syntax highlighting

Highlighted tokens carry semantic hl-* classes rather than inline colours, so your stylesheet owns the palette:

.proa-docs-body .hl-keyword { color: #c678dd; }
.proa-docs-body .hl-string  { color: #98c379; }
.proa-docs-body .hl-comment { color: #7f848e; font-style: italic; }

A block that failed to highlight still renders as escaped source text with no hl-* classes, so unknown languages degrade to plain code.

The hooks

Generated from the component sources. Each is stable within a major version.

Accordions

Callout

Code Block

Code Explorer

Demo

Files

Steps

Tabs

Type Table

Related

Proa Docs · Customizing the layout · Configuration