Theming with CSS Custom Properties 🎨

All @nonactivity.stream/elements components are styled entirely through CSS custom properties (variables). Because custom properties cascade through shadow DOM boundaries, you can set them on any ancestor element and every nested component will pick them up — no ::part selectors or per-element overrides needed.

Card appearance

These three variables control the background, text color, and border of every card-style component (non-activity-note, non-activity-reply, and their sub-components).

Variable	Default	Description
`--non-activity-card-bg`	`transparent`	Card background. No `:host` default is set, so the value inherits freely from ancestor elements — set it once on a wrapper and every nested component receives it.
`--non-activity-card-color`	`inherit`	Card foreground text color. Same cascade behavior as `--non-activity-card-bg`.
`--non-activity-card-border-color`	`#e4e7eb`	Border color for card outlines.

Live demo

White card wrapper:

Dark card wrapper:

Transparent (default):

Recommended pattern — dark mode

.my-stream {
  --non-activity-card-bg: white;
  --non-activity-card-color: #1f2328;
  --non-activity-card-border-color: #e4e7eb;
}
@media (prefers-color-scheme: dark) {
  .my-stream {
    --non-activity-card-bg: transparent;
    --non-activity-card-color: inherit;
    --non-activity-card-border-color: #44403c;
  }
}

Convenience classes

You can also apply these classes directly to any element instead of setting CSS variables by hand:

Class	Effect
`bg-white`	White background, dark text
`bg-transparent`	Transparent background, inherited text
`dark:bg-white`	White background only under `prefers-color-scheme: dark`
`dark:bg-transparent`	Transparent background only under `prefers-color-scheme: dark`

<!-- White card in light mode, transparent in dark mode -->
<non-activity-note class="bg-white dark:bg-transparent"></non-activity-note>

Layout and spacing

Variable	Default	Description
`--non-activity-gutter-width`	`4rem`	Width of the left gutter column in reply components (space for avatars and thread lines).
`--non-activity-avatar-size`	`2rem`	Width and height of actor avatar images.
`--non-activity-avatar-offset`	`1rem`	Horizontal offset from edge to avatar center; used by the focus card notch in threaded replies.
`--non-activity-note-padding`	`1rem`	Padding inside the note content area. Sub-components reduce this automatically when a note is embedded inside a thread row.

Thread lines

The vertical connector lines in non-activity-reply threads:

Variable	Default	Description
`--non-activity-thread-line-color`	`var(--non-activity-accent-blue)`	Color of the vertical line connecting replies.
`--non-activity-thread-line-width`	`2px`	Stroke width of the connector line.

Typography

Variable	Default	Description
`--non-activity-font-family`	`'Rubik', system-ui, -apple-system, sans-serif`	Font stack for all text.
`--non-activity-header-font-size`	`0.875rem`	Font size for actor name and timestamp rows.
`--non-activity-muted-text`	`#586069` (light) / `#8b949e` (dark)	Color for secondary text: actor names, timestamps, date links. The dark-mode fallback is applied automatically; override by setting this variable on a wrapper.

Accent color

Variable	Default	Description
`--non-activity-accent-blue`	`#034EA2`	Primary accent color. Used for thread lines, focused-card borders, drag-and-drop indicators, and the focus card notch.

.my-stream {
  /* Use a brand color instead of the default blue */
  --non-activity-accent-blue: #7c3aed;
}

Drag-and-drop / keyboard navigation

These apply only to non-activity-stream when reordering is enabled:

Variable	Default	Description
`--non-activity-highlight-width`	`4px`	Thickness of the drop-target indicator bar shown above/below items during drag. Set to `0px` to disable.
`--non-activity-highlight-color`	`#000`	Color of drag-over outlines and drop-target indicator bars.
`--non-activity-highlight-style`	`solid`	Border style of the keyboard-focus highlight.