← Back to Docs
Theme Customization
Customize the widget using CSS custom properties. Just add a <style> block before the embed script.
Requires Pro plan or above. Free plans use default styling with Threadline branding.
Quick Example
<style>
#threadline-comments {
--tl-color-accent: #059669;
--tl-color-bg: #f0fdf4;
--tl-font-family: 'Inter', sans-serif;
--tl-radius: 12px;
}
</style>
<div id="threadline-comments"></div>
<script src="https://threadline.io/api/embed"
data-site-id="YOUR_SITE_ID"
data-api-url="https://api.threadline.io"
async></script>CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--tl-color-bg | #ffffff | Widget background color |
--tl-color-text | #1a1a1a | Primary text color |
--tl-color-text-muted | #6b7280 | Secondary/muted text (timestamps, metadata) |
--tl-color-border | #e5e7eb | Border color between elements |
--tl-color-accent | #6366f1 | Accent color (links, active states, buttons) |
--tl-color-accent-hover | #4f46e5 | Accent color on hover |
--tl-color-input-bg | #f9fafb | Input and textarea background |
--tl-color-input-border | #d1d5db | Input border color |
--tl-font-family | inherit | Font family. "inherit" matches your site. |
--tl-font-size | 14px | Base font size |
--tl-radius | 8px | Border radius for cards, inputs, buttons |
--tl-max-width | 680px | Maximum width of the comment container |
Dark Mode
@media (prefers-color-scheme: dark) {
#threadline-comments {
--tl-color-bg: #1a1a2e;
--tl-color-text: #e2e8f0;
--tl-color-text-muted: #94a3b8;
--tl-color-border: #334155;
--tl-color-input-bg: #0f172a;
--tl-color-input-border: #475569;
}
}Note: The widget uses Shadow DOM, so your global styles cannot leak in. Only CSS custom properties on #threadline-comments are read. See Shadow DOM isolation for details.
Theme preview gallery
Layout presets (premium, modern, minimal) combined with color modes and primary swatches. Pure CSS/HTML mock cards - no images.