Theming
Color scheme and CSS token overrides for built-in Feedback SDK widgets.
Theming
Theming applies to built-in widgets (FeedbackDialog, ThumbsFeedback). Headless UIs style themselves.
When headless is set on DeckProvider, no theme stylesheet or scope wrapper is injected.
Color scheme
// Default / normal light appearance
<DeckProvider colorScheme="light" …>
// Dark surfaces
<DeckProvider colorScheme="dark" …>
// Follow the OS
<DeckProvider colorScheme="system" …>Token overrides
Pass partial tokens on theme. Overrides win over scheme defaults.
<DeckProvider
colorScheme="light"
theme={{
fontFamily: "Inter, sans-serif", // or "inherit"
primary: "#5B21B6",
primaryForeground: "#ffffff",
background: "#ffffff",
foreground: "#0f172a",
border: "#e2e8f0",
radius: "12px",
}}
>Token → CSS variable map
| Token prop | CSS variable | Role |
|---|---|---|
fontFamily | --deck-fb-font | Font stack |
background | --deck-fb-bg | Surface |
foreground | --deck-fb-fg | Primary text |
muted | --deck-fb-muted | Secondary text |
label | --deck-fb-label | Field labels |
border | --deck-fb-border | Borders |
primary | --deck-fb-primary | Primary button / selected |
primaryForeground | --deck-fb-primary-fg | Text on primary |
secondary | --deck-fb-secondary | Secondary fills |
danger | --deck-fb-danger | Errors |
overlay | --deck-fb-overlay | Modal scrim |
elevated | --deck-fb-elevated | Subtle elevated background |
radius | --deck-fb-radius | Dialog radius |
radiusSm | --deck-fb-radius-sm | Control radius |
Tokens are applied on .deck-feedback-scope. You can also set the CSS variables in your own stylesheet:
.deck-feedback-scope {
--deck-fb-font: inherit;
--deck-fb-primary: #5b21b6;
}Use className on DeckProvider to target that scope from host CSS.
Exports for advanced use
import {
DECK_FEEDBACK_CSS_VARS,
DECK_FEEDBACK_DEFAULT_THEMES,
themeTokensToCssVars,
resolveColorScheme,
getDeckFeedbackBaseStylesheet,
} from "@deck-io/feedback";Most apps only need colorScheme and optional theme props.