Skip to content
contraagentcontraagentcontraagent

Theming

contraagent-dark

Reference: <ca-kpis>

github-light

Reference: <ca-kpis>

solarized-light, a theme of one's own (@contraagent/elements docs/examples/theme.css)

Reference: <ca-kpis>

The elements take their colours, fonts, type scale and corners from the --ca-* custom properties and the built-in themes of @contraagent/elements: its theming page lists them, what each colour means, and how to build a theme of your own. adoptThemes(document) adds the themes’ rules to the page’s document, so data-ca-theme on any ancestor picks a theme; <ca-monitor> calls it when it connects, and importing the package does not.

The monitor’s theme

Section titled “The monitor’s theme”

In the monitor, the header’s theme control changes the theme and remembers it in this browser. System follows the system’s colour scheme (contraagent Dark or contraagent Light). With no choice made, the monitor shows contraagent Dark.

<ca-monitor theme="nord"> fixes the theme of an embedded monitor; it also takes system. The theme it shows is reflected as data-ca-theme on the element (and on <html>, with history="url"). A theme of your own (a set of --ca-* properties) goes on <ca-monitor> itself, which carries that attribute: <ca-monitor class="solarized-light">.