Theming

CSS custom properties pierce Shadow DOM. Use them to match both components to your brand without writing a single line of JavaScript.

CSS custom properties

Set these properties on the component element or any ancestor. They cascade into Shadow DOM automatically.

Property Default (light) Description
--attestto-primary #4f8ff7 Primary accent color for buttons, links, and badges.
--attestto-primary-hover #3a7ae0 Hover state for primary elements.
--attestto-text #1a1a2e Primary text color.
--attestto-text-muted #6b7280 Secondary/muted text color.
--attestto-bg #ffffff Component background.
--attestto-bg-card #f8f9fa Card and result panel background.
--attestto-border #e5e7eb Border color for cards, drop zones, and dividers.
--attestto-success #22c55e Color for verified/trusted states.
--attestto-warning #eab308 Color for warnings and qualified states.
--attestto-font system-ui, sans-serif Font family for all text inside the components.

Example: dark brand theme

custom-theme.css 
 attestto-verify,
attestto-sign {
  --attestto-primary: #8b5cf6;
  --attestto-primary-hover: #7c3aed;
  --attestto-text: #f1f5f9;
  --attestto-text-muted: #94a3b8;
  --attestto-bg: #0f172a;
  --attestto-bg-card: #1e293b;
  --attestto-border: #334155;
  --attestto-success: #34d399;
  --attestto-warning: #fbbf24;
  --attestto-font: "Inter", system-ui, sans-serif;
}

CSS ::part() selectors

For fine-grained control, each component exposes named parts via the ::part() pseudo-element. This lets you style specific internal elements without custom properties.

Part Component Description
::part(drop-zone) Both The file drop area and file picker trigger.
::part(result-card) Verify The main results container shown after verification.
::part(hash-display) Verify The SHA-256 hash display element.
::part(sig-card) Verify Individual signature result card.
::part(status-badge) Verify Trust level badge (Detected, Signed, Trusted, Qualified).
::part(signer-name) Verify The signer's common name or organization.
::part(did-link) Verify Clickable DID identifier link.
::part(vlei-badge) Verify vLEI credential indicator badge.
::part(corporate-info) Verify Corporate signer information panel.
::part(trust-level) Verify Trust level indicator section.
::part(audit-section) Verify Forensic audit results section.
::part(button) Both All buttons inside the component.
::part(wallet-card) Sign Individual wallet option in the picker.

Example: custom part styling

parts.css 
 /* Round the drop zone corners */
attestto-verify::part(drop-zone) {
  border-radius: 1rem;
  border-style: solid;
}

/* Make the hash monospace and larger */
attestto-verify::part(hash-display) {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9rem;
}

/* Style the trust badge */
attestto-verify::part(status-badge) {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Brand the buttons */
attestto-sign::part(button) {
  background: #8b5cf6;
  border-radius: 9999px;
}

/* Highlight wallet cards on hover */
attestto-sign::part(wallet-card):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
💡
Custom properties vs. parts: Use CSS custom properties for global theming (colors, fonts). Use ::part() selectors when you need to style specific elements (borders, shadows, transforms).

See also