# Theme the feedback client

Preview light and dark DocDuck feedback client themes, edit supported tokens, and generate an isolated customer snippet.

## Customize the feedback client

The DocDuck feedback client accepts isolated CSS variables for its surfaces, text, controls, selection highlight, spacing, and shadow. Changes apply directly to the customer embed. They do not restyle the documentation site or save anything to a deployed installation.

Use the builder to edit light and dark values independently, inspect the live feedback client states, and copy either a complete snippet or the styles alone. Signed-in visitors can include a selected organization ID; generic output uses no account state and must be completed before deployment.


The theme builder edits DocDuck feedback client CSS variables, previews light and dark palettes independently, and produces either a complete custom-element snippet or styles only. It does not change the Doc Duck documentation theme or save changes to a deployed feedback client.

Choose a light or dark preview, edit token values using CSS color or length syntax, and restore that palette's defaults if needed. Signed-in visitors can place a selected organization ID in the generated snippet; everyone else receives generic code and must add an organization ID before deployment.

### Default light and dark tokens

| Token | Purpose | Light default | Dark default |
| --- | --- | --- | --- |
| `--color-background` | Feedback client surface behind the rating controls, textarea, and confirmation message. | `#ffffff` | `#18181b` |
| `--color-foreground` | Primary text and icon color used throughout the feedback client. | `#18181b` | `#fafafa` |
| `--color-muted` | Hover surface shown behind rating controls. | `#f4f4f5` | `#27272a` |
| `--color-muted-foreground` | Secondary copy and the default rating icon color. | `#71717a` | `#a1a1aa` |
| `--color-border` | Border around the details textarea. | `#d4d4d8` | `#52525b` |
| `--brand-primary` | Brand accent used for the feedback client outline, selection pointer, highlight, and submit button. | `#facc15` | `#facc15` |
| `--color-positive` | Hover color for the helpful feedback icon. | `#16a34a` | `#22c55e` |
| `--color-negative` | Hover color for the unhelpful feedback icon. | `#dc2626` | `#ef4444` |
| `--color-submit-foreground` | Text color inside the submit button. | `#422006` | `#422006` |
| `--color-submit-border` | Border color around the submit button. | `#000000` | `#000000` |
| `--color-selection-highlight` | Highlight color applied to the selected text behind the feedback client. | `#facc15` | `#facc15` |
| `--radius-sm` | Base small radius used by buttons and inputs when not overridden. | `0.25rem` | `0.25rem` |
| `--radius-md` | Base medium radius used by the feedback client container. | `0.5rem` | `0.5rem` |
| `--button-radius` | Corner radius for the rating and submit buttons. | `var(--radius-sm)` | `var(--radius-sm)` |
| `--input-radius` | Corner radius for the details textarea. | `var(--radius-sm)` | `var(--radius-sm)` |
| `--container-radius` | Corner radius for the outer feedback client outline. | `var(--radius-md)` | `var(--radius-md)` |
| `--selection-gap` | Distance between the feedback client outline and its selection pointer. | `5px` | `5px` |
| `--indicator-pip-height` | Height of the triangular pointer below the feedback client. | `8px` | `8px` |
| `--indicator-pip-half-width` | Half-width of the triangular pointer below the feedback client. | `8px` | `8px` |
| `--feedback-icon-size` | Size of each thumbs-up, thumbs-down, and question icon. | `1.5rem` | `1.5rem` |
| `--shadow-widget` | Box shadow applied to the feedback client outline. | `0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a` | `0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a` |

### Generated widget code with theme tokens

Replace `YOUR_ORGANIZATION_ID` before deploying this template:

```html
<!-- DocDuck feedback client -->
<docduck-feedback organization="YOUR_ORGANIZATION_ID" style="color-scheme: light dark;
--color-background: light-dark(#ffffff, #18181b);
--color-foreground: light-dark(#18181b, #fafafa);
--color-muted: light-dark(#f4f4f5, #27272a);
--color-muted-foreground: light-dark(#71717a, #a1a1aa);
--color-border: light-dark(#d4d4d8, #52525b);
--brand-primary: #facc15;
--color-positive: light-dark(#16a34a, #22c55e);
--color-negative: light-dark(#dc2626, #ef4444);
--color-submit-foreground: #422006;
--color-submit-border: #000000;
--color-selection-highlight: #facc15;
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--button-radius: var(--radius-sm);
--input-radius: var(--radius-sm);
--container-radius: var(--radius-md);
--selection-gap: 5px;
--indicator-pip-height: 8px;
--indicator-pip-half-width: 8px;
--feedback-icon-size: 1.5rem;
--shadow-widget: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;"></docduck-feedback>
```

Test both color schemes, keyboard focus, selected text, all feedback choices, the details field, and confirmation state before publishing the styles.


## Apply and test the output

Place the generated variables directly on `<docduck-feedback>`. The custom properties inherit into its isolated shadow root without exposing the widget's internal elements to page styles. If your site supports both color schemes, preserve `color-scheme: light dark` and test both sets of values.

Before publishing, verify keyboard focus, selected-text highlighting, helpful, unhelpful, and question states, the optional details field, and the confirmation message. Check text and control contrast in both palettes. Return to [Get started](/docs/get-started#confirm-the-first-signal) to verify the themed feedback client on a deployed page.