Theme builder

Pick a preset, adjust the colours, copy the snippet, paste it next to your embed. The preview is the real widget rendering sample comments — nothing you do here touches a server.

Preset

Editing

Tokens

Tick the box beside a token to keep it when you press Randomize.

What do these checks mean?

Each line compares a text colour with the colour behind it. The ratio runs from 1:1 (identical) to 21:1 (black on white). WCAG AA asks for 4.5:1 so normal-size text stays readable for low-vision visitors and on dim screens.

A warning is advice, not a block. The snippet still copies. A warning on a pair you cannot see in the preview, such as a hover colour, still matters.

A transparent background is checked against the site background you picked above the preview.

Import a theme

Paste a mount element, a style="…" value or a #garrul { … } block. Only --garrul-* values are read. This replaces the current tweaks.

Pin data-theme: Dark/light scope:

Using your theme

Which output should I use?

CSS is the full theme, both light and dark halves. Use it for almost every site.

HTML attribute is the small version: a preset name, a pinned data-theme and one half of your tweaks as an inline style. Use it when you cannot edit the site stylesheet.

iframe is for the iframe embed only. It takes a built-in preset and a theme, nothing else.

Copy share link is not for your site. It is for showing someone else, or coming back later.

Add the CSS to my site

Copy the CSS tab output.
Paste it into your site stylesheet. The rules target your #garrul mount element. The --garrul-* variables pass through the widget's shadow root, so no other selector is needed.
If the output starts with a comment such as add data-preset="…" or add data-theme="…", add that attribute to the mount element too. The comment is a reminder, not part of the theme.
Reload the page. A cached stylesheet is the usual reason a change does not show.

Dark mode. The default scope follows the reader's OS through prefers-color-scheme. If your site has its own toggle, pick .dark / .light class, [data-theme] attribute or a custom prefix so the widget switches with your site, not the OS.

Add the HTML attributes

Open your admin dashboard and copy the mount element it gives you.
Add the attributes from the HTML tab to that element. Keep its data-slug and data-api exactly as they are.
Save and reload.

An inline style cannot switch with the OS, so with no pin this tab shows the light half only. Pin data-theme to light or dark, or use the CSS tab, if you need both.

Use the iframe

Append the parameters to your /embed/?slug= URL, after the slug. The iframe is a separate document, so your page's CSS cannot reach it. Colour tweaks are dropped and custom presets are unavailable. Only the built-in presets work.

Share, save or restore a theme

The share link holds the whole theme in the part of the URL after #. Browsers do not send that part to a server. Nothing is stored here. Anyone who opens the link sees your theme in their own builder.

To restore a theme you already use, open Import a theme and paste your mount element, a style="…" value or your #garrul { … } block.

Limits to know about

Fonts. --garrul-font only works for fonts your page already loads. A font loaded by @font-face cannot be declared inside the widget.

Colour and shape only. The builder sets the documented --garrul-* variables. It cannot restyle individual elements inside the widget. The variable names are a stability contract, so a theme keeps working across releases.

Contrast warnings are advice. The snippet still copies. See What do these checks mean? above.

Preview version. The preview renders the Garrul release named in the footer. If your Worker runs an older release, upgrade it before you judge small differences.