Skip to main content
Custom CSS requires Pro. For basic templates, images and colors, see the appearance guide. Custom CSS and hiding Feedback Loop branding require Pro. Basic theme, brand image, and brand color remain available on Free. Paid preferences stay saved after a downgrade and apply again when Pro access resumes. Open Configure appearance in your public header. Choose the current Light or Dark template, optionally set one brand image and a brand color, then add CSS for further visual customization. Your brand image serves the header and browser tab. Reset uses the website favicon when available, then header initials and the application favicon. The same stylesheet applies to your feature requests, discussions, release timeline and release articles. Visitors use the selected template; workspace and system theme preferences do not switch it.

Applying and removing styles

Styles apply in this order: selected template, basic brand color, custom CSS. Valid draft changes preview immediately on the real public page. Save changes publishes appearance only and closes the dialog. Cancel, the close button, Escape or clicking outside closes without saving. After saving, use the Feature requests and Release notes links to inspect the other public views. Clear Custom CSS and save to return to the template and basic branding. The dialog uses standard modal behavior, including a dimmed backdrop without blur and keyboard focus containment. Its Light/Dark dropdown also sets the dialog’s theme. The dialog and color picker use the canonical template palette in an isolated shadow root; public CSS and brand colors do not restyle their controls. CSS changes presentation; it does not add content, scripts or behavior.

Semantic variables

Use :root variables such as --background, --foreground, --card, --card-foreground, --popover, --popover-foreground, --muted, --muted-foreground, --border, --input, --ring, --primary, --primary-foreground, --font-heading, and --radius. Public actions and selected votes use --public-brand-accent, --public-brand-surface, and --public-brand-foreground when a brand color is set. Basic branding also sets --ring to the brand surface for focused input borders and focus rings. Set those roles too when overriding action colors.

Stable selectors

html[data-public-template="light"] and html[data-public-template="dark"] identify the selected template. The content root has data-public-page="feedback-list", "discussion", "release-list", or "article". Use [data-public-part="..."] for these named regions: Shared primitive data-slot hooks include button, input, textarea, dialog-content, sheet-content, select-content, dropdown-menu-content, and toast slots. Use accessibility states such as [aria-current="page"], [aria-pressed="true"], and :disabled. Vote buttons expose data-vote-direction="up|down"; basic branding preserves the existing negative-vote color. Selected vote scores expose [data-selected="true"]. Private Tailwind utility classes are not a stable API.

Fonts and images

HTTPS font and image URLs, site-root paths beginning with /, and fragment references beginning with # are permitted. External stylesheet imports (@import), HTTP resources, protocol-relative URLs, data: and script schemes are not supported. Write font declarations directly:
Use your own reachable URLs and fonts you are licensed to serve. Keep fallbacks for resources that fail to load.

Limits and usability

Maximum stylesheet size is 100 KiB of UTF-8 text. Ordinary properties, selectors, nesting, media queries, keyframes and font declarations are supported. Syntax and blocked resources show line/column errors and are checked after a 300 ms pause. Invalid text remains editable, the last valid stylesheet stays visible, and Save is disabled until errors are fixed. Clearing CSS removes custom overrides. Keep text and controls readable, keyboard focus visible, labels intact, and navigation usable. Preserve pending, disabled, selected, destructive and status meanings. Check narrow screens, long content, dialogs and article formatting. Respect reduced-motion preferences. Do not rely on generated class names or remove essential interaction controls. Use Copy agent prompt to copy the complete guide, current CSS and public project context. A green check briefly confirms the copy. If clipboard access is unavailable, select and copy the provided text.