Styling DynoStatic widgets

Website appearance is configured under Appearance in the selected website rail. Compatible widgets inherit that appearance by default and may use a deliberate per-widget override in the builder.

Themes, colors, and responsive preview

DynoStatic includes Classic, Minimal, Cards, Editorial, Compact, Soft, Glass, High Contrast, Ocean, Forest, Sunset, Rose, Midnight, and Monochrome themes. Seven separate controls cover background, main text, secondary text, borders, links/buttons, errors, and soft surfaces. Each control has an independent color picker and hex field.

Automatic mode uses the configured light palette and the selected theme's dark palette when the visitor prefers dark mode. Always light and Always dark lock the selected scheme. Builder previews are bounded to desktop, tablet, and mobile widths and must not change the admin viewport itself.

Comment style ownership

Comments support two exclusive modes:

1. DynoStatic-managed: the selected website or widget theme loads inside Shadow DOM.
2. Host-managed: disable built-in comment styles. No comment CSS is requested, and normal light-DOM markup is available to the embedding site's cascade.

Custom website CSS is appended after the selected comment preset. It is limited to 50 KB and cannot load imports, remote or data URLs, fonts, images, or executable legacy browser features. Put site assets in the embedding website.

Public comments styling hooks

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

.dynostatic-comments-honeypot and .dynostatic-comments-trap are internal anti-spam details, and .dynostatic-comments-copy-fallback is a temporary off-screen clipboard control. They are not supported styling hooks. They are documented so theme audits can explicitly exclude them. Do not reveal, reposition, populate, or target them.

Host-owned comment theme example

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

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

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

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

Do not override [hidden]. Reaction buttons expose selection with aria-pressed. Keep reaction pickers above surrounding content, preserve overflow for tables and code, and retain visible keyboard focus.

Shared widget themes

Shared widgets expose .dynostatic-widget as their outer contract and use module-specific semantic markup inside it. Shadow mode receives the versioned assets/widget.css; light mode leaves styling to the host. Avoid selectors tied to temporary builder markup or database identifiers.

State checklist

Check loading, empty, success, validation, offline, and unavailable states; long translated text; touch and keyboard controls; light/dark palettes; reduced motion; and desktop, tablet, and mobile widths. For comments also check deleted comments, deep replies, reactions, search context, Load All progress/cancel, inline reply/edit, Markdown preview, tables, code copy, participant account controls, and verification challenges.