Docs menu

Style the widget

Set the widget's colours, font and corners once, on your project's Styles page. They apply to comments, ratings, polls and forms on every page of your site.

In your project, open Styles. The live preview next to the settings is the real widget, and it updates as you change things. Click Save styles and your site uses the new style from the next page load.

The widget draws inside its own shadow root, so your site's CSS can't restyle it. The Styles page is the way to change how it looks. Every value takes CSS: a colour like #1f2937 or rgb(31 41 55), and a size like 16px or 1rem.

Start from a preset

Browse presets sets every value at once. Pick the closest to your site, then adjust from there: Light, Disfora, Dark, Cupcake, Bumblebee, Emerald, Corporate, Synthwave, Retro, Valentine and Halloween. Reset to defaults goes back to the starting style.

Colours

Each colour is a background paired with the text colour used on it, so text stays readable:

Colour	Used for
Surface	Cards, inputs and dropdowns
Surface alt	Toolbars and empty states
Accent	Your brand colour: buttons and active states
Fill	Main buttons, like Sign in and Comment

Font

Font family takes a CSS font list, and Font size sets the base size, 14px by default. Disfora doesn't load fonts itself, but the widget can use any font your page already loads. To match your site, copy the font-family from your site's CSS:

Font family

Inter, ui-sans-serif, system-ui, sans-serif

Keep a fallback at the end, so the widget still looks right on pages that don't load your font.

Widget container

The box around the whole comments and rating widget. Its Background is transparent by default, so the widget sits on your page's own background with no padding. Give it a background, a Corner radius and Padding to show it as a card instead.

Polls

Polls have their own box: Background (Surface alt if you leave it empty), Corner radius (24px) and Padding (20px).

Corners

Setting	Applies to	Default
Cards	Sections, rating cards and banners	24px
Buttons	Main and action buttons	9999px (pill)
Inputs	The comment editor	24px
Avatars	Reader pictures	9999px (round)
Menus	Dropdown menus	12px

Use 0px for square corners.

Dark sites

The widget has one style. It doesn't switch with a light/dark toggle on your site or the reader's system setting. On a dark site, start from the Dark, Synthwave or Halloween preset. On a site that switches, pick the colours that work for most of your readers.

Ask a question

Something missing or unclear? Ask here and we'll answer in the thread.

Updated October 2026