Styling the comment widget

Each website has its own appearance configuration under Appearance in the selected website sidebar. Changes are saved only for that website and do not require a new embed snippet.

Presets and color matching

Choose one of the five included layouts:

• Classic — balanced default styling
• Minimal — open spacing and fewer visual borders
• Cards — each comment has a distinct card surface
• Editorial — reading-focused typography for articles
• Compact — tighter spacing for busy discussions

Seven controls cover the background, main and secondary text, borders, links/buttons, errors, and soft form surfaces. Click the color swatch for the browser's normal color picker, paste an exact six-digit hex value, or use Sample from screen to pick a color directly from the website. Screen sampling uses the browser EyeDropper API when available and falls back to the normal picker in other browsers.

Automatic color mode uses the configured colors in light mode and the selected preset's matching dark palette when the visitor prefers dark mode. Always light and Always dark keep the configured colors in both modes. The live preview updates before anything is saved.

The generated website stylesheet is served from Panel Comments, isolated inside the widget's Shadow DOM, and cached under the website's settings version. A saved change automatically produces a new URL, so visitors can cache older versions indefinitely without seeing stale colors.

Custom CSS inside the widget

The Custom stylesheet field is loaded after the preset. It can override the preset using public widget classes such as:

.pc-shell {
  max-width: 70rem;
}

.pc-comment {
  border-radius: 0;
}

.pc-submit {
  text-transform: uppercase;
}

For visitor privacy, custom CSS cannot contain imports, remote URLs, embedded data URLs, font downloads, or executable legacy browser features. Put images and web fonts in the embedding website itself. Custom CSS is limited to 50 KB.

The public styling hooks are:

• Structure: .pc-shell, .pc-header, .pc-header-actions, .pc-title, .pc-sort, .pc-leave-comment, .pc-comments, .pc-comment, .pc-replies
• Comment content: .pc-meta, .pc-avatar, .pc-avatar-initials, .pc-avatar-image, .pc-author, .pc-comment-number, .pc-badge, .pc-edited, .pc-deleted, .pc-body
• Actions and paging: .pc-actions, .pc-action, .pc-link, .pc-subscribe, .pc-more, .pc-more-replies, .pc-pagination, .pc-load-all, .pc-load-all-progress, .pc-load-all-status, .pc-load-all-cancel
• Reactions: .pc-reactions, .pc-page-reactions, .pc-comment-reactions, .pc-reaction-chip, .pc-reaction-picker, .pc-comment-reaction-picker, .pc-reaction-choices, .pc-reaction-choice, .pc-reaction-status
• Search: .pc-search, .pc-search-label, .pc-search-submit, .pc-search-clear, .pc-search-results, .pc-search-result, .pc-search-excerpt, .pc-search-context, .pc-search-branch, .pc-search-ancestor, .pc-search-current, .pc-search-full, .pc-search-more, .pc-search-summary
• Form: .pc-form, .pc-inline-form, .pc-form-header, .pc-form-title, .pc-reply-context, .pc-form-field, .pc-comment-field, .pc-field-label, .pc-fields, .pc-commenter, .pc-commenter-title, .pc-form-footer, .pc-turnstile, .pc-form-status, .pc-submit
• Editor: .pc-editor, .pc-editor-tabs, .pc-editor-tab, .pc-editor-write, .pc-editor-preview, .pc-editor-toolbar, .pc-editor-tool, .pc-editor-monospace, .pc-editor-footer, .pc-markdown-hint, .pc-character-count, .pc-code-block, .pc-code-copy
• Commenter identity: .pc-commenter-account, .pc-account, .pc-account-summary, .pc-account-content, .pc-account-actions, .pc-account-option, .pc-account-option-summary, .pc-account-option-content, .pc-account-field, .pc-account-form, .pc-account-help, .pc-account-status, .pc-account-submit, .pc-guest-tag, .pc-handle, .pc-reserved
• Messages: .pc-status, .pc-notice, .pc-global-message, .pc-global-message.is-danger, .pc-action-challenge

Letting the embedding website supply all CSS

Clear Let Panel Comments load this stylesheet when the actual website should completely control the comment design. In this mode Panel Comments does not request or inject any CSS. Presets, configured colors, and the custom stylesheet are kept in the admin but are not loaded. The widget renders ordinary light-DOM HTML inside <panel-comments>, so the host page's CSS cascade applies normally.

Scope the host site's rules to the element:

panel-comments {
  display: block;
  margin-block: 3rem;
}

panel-comments .pc-comment {
  padding-block: 1.25rem;
  border-bottom: 1px solid currentColor;
}

panel-comments .pc-replies {
  margin-inline-start: 2rem;
}

panel-comments .pc-form {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

panel-comments .pc-leave-comment,
panel-comments .pc-submit {
  background: var(--site-action-color);
  color: white;
}

The honeypot remains browser-hidden through its HTML hidden attribute, not through Panel Comments CSS. Do not override [hidden] inside the widget. Re-enable the stylesheet checkbox at any time to restore the selected isolated design. Reload an already open page after changing the rendering mode because it is selected during widget startup.

.pc-honeypot and .pc-trap are internal anti-spam implementation details, not styling hooks. Do not reveal, reposition, populate, or otherwise target them.

Reaction buttons expose selection through aria-pressed="true"; disabled historical counts remain readable. The editor uses hidden to switch its Write and Preview panels and .is-monospace only as the state class on its textarea. A host theme should keep the reaction picker above surrounding content, preserve horizontal overflow for tables and code, and provide visible keyboard focus for every toolbar and reaction control.

The element emits panel-comments:metadata whenever its public page counts or article reactions change and panel-comments:ready after the initial thread renders. Both events bubble across Shadow DOM. They are behavior hooks rather than styling hooks; host CSS should not depend on them.

State coverage checklist

A complete host theme should check the loading, empty, failure, notice, comment, nested reply, deleted comment, article/comment reactions, selected and disabled reaction states, reaction picker, search result/context, Load more, Load All progress/cancel, composer, inline reply/edit forms, Write/Preview tabs, toolbar, tables, code blocks/copy button, commenter account, challenge, disabled-control, and success states. It should also preserve visible keyboard focus, work at narrow widths, respect reduced motion, and supply appropriate light and dark colors when the host supports both.