# Theming

Source: https://apigenie.pl/docs/reference/doc-components/theming
Part of the reference of [@mykulyak/apigenie-docs](https://apigenie.pl/docs/reference/doc-components.md).
Its other pages: [apg-api-reference and apg-spec](https://apigenie.pl/docs/reference/doc-components/reference-and-spec.md), [OpenAPI elements](https://apigenie.pl/docs/reference/doc-components/openapi.md), [Swagger 2.0 elements](https://apigenie.pl/docs/reference/doc-components/swagger.md), [AsyncAPI elements](https://apigenie.pl/docs/reference/doc-components/asyncapi.md), [Protobuf and gRPC elements](https://apigenie.pl/docs/reference/doc-components/protobuf.md), [GraphQL elements](https://apigenie.pl/docs/reference/doc-components/graphql.md), [Building blocks](https://apigenie.pl/docs/reference/doc-components/building-blocks.md), [Try it out](https://apigenie.pl/docs/reference/doc-components/try-it-out.md), [Server-side rendering](https://apigenie.pl/docs/reference/doc-components/server-side-rendering.md), [apigenie-docs build](https://apigenie.pl/docs/reference/doc-components/docs-build.md).

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.

```css
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:

```css
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](/tools/doc-components/examples#theming-title) apply the CSS of two looks
to an operation.