Theming

The widget is built to match your site, not the other way around. There are four layers of theming, in increasing specificity:

1. Community theme — brand assets and defaults saved in the admin center.
2. Per-embed theme — auto, light, or dark, plus appearance saved on the embed config.
3. CSS-variable overrides on the host page — --zk-accent, --zk-radius, --zk-font.
4. Script-tag attributes — data-zeeker-theme, data-zeeker-accent, data-zeeker-radius, data-zeeker-font.

Each layer wins over the one before it.

Element presets may seed different outer appearance values, but those values are ordinary per-embed settings. Element-specific radius applies only to the outer embed/container/header boundary. Internal Social cards, reply rails, action trays, composers, badges, search, and summary surfaces reuse Social's design and do not receive per-Element restyling.

Container and top-header styling

The per-embed appearance editor controls the generic shell independently of Social's internal cards and headers:

• Container background — automatic, transparent, or a configured surface color.
• Container border — enabled/disabled, width, solid/dashed/dotted style, color, and radius.
• Top header — optional title/subtitle and community logo, with automatic/transparent/custom background, text color, and bottom-border treatment.

These controls adapt the existing Social surface to its host. They do not add a Reviews, Support, or Q&A-specific header or restyle the internal Social component tree. An inline/fixed container remains part of the host page and has no close button; overlay containers retain their own dismissal control.

A transparent inline/fixed background also applies to internal thread, community, and Chat navigation rows. The host page remains visible around the title and controls, without a solid horizontal header strip or divider. Individual Back, theme, and account buttons keep opaque light or dark backgrounds. Content cards, composers, search, and authentication panels remain solid. Detached panels and full-app surfaces keep an opaque canvas; a filled inline background remains filled.

Implementation-managed information boxes are not user-authored HTML and are not part of the generic Embed top header. Support Forum currently receives one programmatically from its preset. It uses the available width, sits immediately above the feed-filter header, is capped at 300px, and follows the same resolved border and corner treatment as the adjacent Embed surfaces. A transparent fixed canvas does not make the box transparent: like search, composers, filters, and post cards, it retains an opaque surface in the selected light or dark theme.

CSS variables

The widget reads these CSS custom properties from the host page (set them on :root, on html, or on the script tag):

Variable	Default	Purpose
--zk-accent	#18181b (admin-themable)	Primary accent — button, send, active states.
--zk-accent-text	derived contrast	Text on accent.
--zk-radius	12px	Corner radius across surfaces. 0 for square.
--zk-font	system stack	Font-family.
--zk-bg	matches host body	Panel background.
--zk-text	matches host body	Primary text.
--zk-muted	derived	Secondary text.

Quick brand match

<style>
  :root {
    --zk-accent: #ff5a1f;
    --zk-radius: 0;             /* fully square */
    --zk-font: "Inter", system-ui, sans-serif;
  }
</style>

Or set them on the script tag:

<script
  src="…/loader.js"
  data-zeeker-config="..."
  data-zeeker-accent="#ff5a1f"
  data-zeeker-radius="0"
  data-zeeker-font="Inter, system-ui, sans-serif"
  async
></script>

Dark mode

The saved per-embed theme is authoritative:

• Auto reads the host page's color-scheme, then falls back to prefers-color-scheme. It listens for changes and re-renders when the effective host theme changes.
• Light always renders the embed light. A host or dashboard dark-mode toggle does not change it.
• Dark always renders the embed dark. A host or dashboard light-mode toggle does not change it.

Host-owned dismissible panels and sheets use that same effective scheme. Their page backdrop—including launcher/custom-trigger panels, authentication and SSO sheets, reaction details, and share trays—is an independent scrim behind the foreground panel: Light uses a subtle light veil with a clearly visible 4px blur, while Dark uses a subtle dark veil with a restrained 3px blur. Auto first resolves from the host page surface, then falls back to the operating-system preference, and updates the backdrop when that effective scheme changes; explicit Light or Dark keeps it fixed with the rest of the embed.

The host control beside the configurator preview simulates the surrounding website/app theme. It affects the embedded surface only when the embed theme is Auto.

For a page-specific explicit override, set the correctly named script attribute:

<script
  src="https://embed.zeeker.com/api/embed/widget/loader.js"
  data-zeeker-config="YOUR_CONFIG_ID"
  data-zeeker-theme="light"
  async
></script>

data-zeeker-theme accepts light or dark. Omit it to preserve the saved per-embed setting; do not use the old/invalid data-zk-theme spelling.

Admin theme

In the admin center under Settings → Theme, you can set:

• Accent color (used as --zk-accent default)
• Logo (avatar) for the community — shown in the panel header
• Cover image — shown above the thread title on the social-app surface
• Community brand defaults used when an embed does not provide a more specific appearance value

The Embed configurator owns each embed's explicit auto, light, or dark choice. This keeps two embeds from the same community free to use different host-appropriate schemes without changing the whole community.

Custom CSS

End-user CSS overrides inside the iframe are not supported — the iframe is sandboxed and served from embed.zeeker.com. If you need stronger customisation, talk to us; we have a CSS API on the roadmap.

Accessibility

The widget meets WCAG AA contrast by default. If you set an accent color that fails contrast against --zk-bg, the widget automatically picks --zk-accent-text to maintain a 4.5:1 ratio rather than read your override literally.