Theming Override Tokens
CSS custom properties for overriding individual banner roles like toggle colors, the focus ring, and the preferences modal size.
The appearance settings in the dashboard set a small number of theme colors, and most banner elements inherit from them. The checked toggle track and focus ring inherit from your primary color, the unchecked track from your muted color, and the toggle thumb from your background color. For most themes that inheritance is exactly what you want.
Sometimes a design pins one of those parent colors. A common example: giving Accept and Reject buttons identical styling for equal prominence forces the primary color to a value that works poorly as a toggle accent or focus ring, especially on dark themes. For those cases, the SDK exposes override tokens that break the inheritance for one role at a time.
Available tokens
| Token | Inherits from | Controls |
|---|---|---|
--cs-toggle-checked-color | --cs-color-primary | Track color of a checked toggle |
--cs-toggle-track-color | --cs-color-muted | Track color of an unchecked toggle |
--cs-toggle-thumb-color | --cs-color-bg | The toggle thumb |
--cs-focus-ring-color | --cs-color-primary | Keyboard focus rings on buttons, toggles, and the close button |
--cs-color-primary-border | transparent | Border of primary buttons (Accept All, Save Preferences) |
--cs-prefs-max-width | 550px | Preferences modal width (modal layout only) |
--cs-prefs-max-height | 85vh | Preferences modal height (modal layout only) |
Every token falls back to its parent when unset, so you only declare the ones you want to change. On screens smaller than 768px, the preferences modal automatically fills the screen, so the width and height tokens don't apply.
Setting tokens
Declare them on #consentstack-root in the Custom CSS field of the dashboard's Appearance tab (Pro plan and above), or in your own site stylesheet on any plan:
#consentstack-root {
--cs-toggle-checked-color: #ff5722;
--cs-focus-ring-color: #ff5722;
--cs-toggle-thumb-color: #ffffff;
--cs-prefs-max-width: 800px;
}That is the whole pattern. The SDK's stylesheet reads these variables directly, so there is no specificity to fight and no selectors to reverse-engineer.
A dark theme example
Suppose your banner background is dark and you style Accept and Reject identically for equal prominence, which pins your primary color to a dark value. Without overrides, the checked toggle track, thumb, and focus ring all inherit colors that vanish against the dark surface. With overrides:
#consentstack-root {
/* brand accent for state indicators */
--cs-toggle-checked-color: #ff5722;
--cs-focus-ring-color: #ff5722;
/* keep the thumb visible on both track states */
--cs-toggle-thumb-color: #ffffff;
--cs-toggle-track-color: #3a3f47;
/* give the primary button a visible boundary */
--cs-color-primary-border: #3a3f47;
}Disabled toggles need no override: the SDK blends the track toward your background color automatically, so the required Essential category stays legible on light and dark themes.