> ## Documentation Index
> Fetch the complete documentation index at: https://docs.feedbackloop.page/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS

> Use supported variables and selectors to customize your public pages.

Custom CSS requires **Pro**. For basic templates, images and colors, see the [appearance guide](/customize/appearance).

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.

```css theme={null}
:root {
  --background: #faf8f5;
  --foreground: #292524;
  --card: #ffffff;
  --public-brand-accent: #635bff;
  --public-brand-surface: #e9e7ff;
  --public-brand-foreground: #3730a3;
  --primary: var(--public-brand-accent);
  --ring: var(--public-brand-surface);
  --border: #e7e5e4;
  --radius: 0.75rem;
}
```

## 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:

| Region | Parts |
| - | - |
| Shared shell | `shell`, `header`, `header-content`, `brand`, `logo`, `brand-name`, `navigation`, `nav-link`, `website-link`, `main`, `footer`, `footer-content` |
| Page controls | `page-heading`, `page-description`, `toolbar` |
| Feature requests | `feedback-list`, `feedback-row`, `feedback-title`, `feedback-description`, `vote-controls`, `vote-button`, `vote-score`, `status` |
| Discussion | `discussion`, `comments`, `comment`, `comment-form` |
| Release notes | `release-list`, `release-item`, `release-date`, `release-title`, `article`, `prose`, `article-navigation` |

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.

```css theme={null}
[data-public-part='header'] {
  border-bottom: 0;
}
[data-public-part='main'] {
  max-width: 72rem;
  margin-inline: auto;
}
[data-public-part='feedback-row'] {
  padding-block: 1.5rem;
}
[data-public-part='nav-link'][aria-current='page'] {
  color: var(--public-brand-accent);
}
[data-public-part='prose'] {
  line-height: 1.8;
}
[data-slot='dialog-content'] {
  border-radius: 1rem;
}
@media (max-width: 40rem) {
  [data-public-part='main'] {
    padding-inline: 1rem;
  }
}
```

## 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:

```css theme={null}
@font-face {
  font-family: 'Brand Sans';
  src: url('https://your-cdn.example/brand-sans.woff2') format('woff2');
  font-display: swap;
}
body,
[data-public-part='shell'],
[data-slot='button'],
[data-slot='input'] {
  font-family: 'Brand Sans', sans-serif;
}
```

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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.