Theming

The elements keep their styles in shadow roots, so page CSS does not leak in or out. Two mechanisms change their look: design tokens and CSS parts. Light and dark palettes follow the page’s color-scheme; theme="light" or theme="dark" forces one.

Design tokens

Custom properties inherit through shadow roots: set them on the element or on any ancestor. Unset tokens fall back to the built-in light and dark values.

apg-api-reference {
	--apg-color-accent: #b4451f;
	--apg-font-sans: Georgia, serif;
	--apg-radius: 2px;
	--apg-sidebar-width: 300px;
}

Tokens
Colours	--apg-color-bg, -surface, -surface-2, -fg, -muted, -border, -accent, -accent-fg, -success, -warning, -danger, -info, -focus
HTTP methods	--apg-method-get, -post, -put, -patch, -delete, -head, -options, -trace
AsyncAPI actions	--apg-method-send, -receive
gRPC streaming kinds	--apg-method-unary, -server-stream, -client-stream, -bidi
GraphQL operation kinds	--apg-method-query, -mutation, -subscription
JSON	--apg-syntax-key, -string, -number, -boolean, -null
Type	--apg-font-sans, --apg-font-mono, --apg-font-size-sm, -md, -lg
Layout	--apg-radius, --apg-space-1 to -6, --apg-sidebar-width, --apg-content-width, --apg-sticky-top, --apg-code-max-height

CSS parts

Every element names its inner elements with part, and composite elements forward the parts of the elements inside them, so one selector reaches every level:

apg-api-reference::part(method) { border-radius: 999px; }
apg-api-reference::part(nav-item-active) { background: black; color: white; }
apg-api-reference::part(button-primary) { text-transform: uppercase; }

Part names are public API. The page of each element lists its parts and the parts it forwards, and the live examples apply the CSS of two looks to an operation.