CSS variables reference

Every --cy-* variable with its light and dark default, generated from the SDK's stylesheet.

Every variable the SDK reads starts with --cy-. This is the complete list, generated from the stylesheet itself. Nine of them have a theme key; see Theme tokens for how to set them.

Name	Type	Default	Description
`--cy-primary`optional	`color`	`#1863dc`	The primary brand colour: primary buttons, links inside the banner description, the checked toggle track, and the source colour for the focus ring and the primary-hover mix. theme key: `primaryColor` Dark default: `unchanged`
`--cy-primary-hover`optional	`color`	`color-mix(in srgb, var(--cy-primary) 85%, black)`	The primary button's hover colour: a darker mix of --cy-primary, applied on hover in place of the fade every other button gets. No theme key of its own; override it with an author !important rule if you need a different mix. theme key: derived Dark default: `unchanged`
`--cy-bg`optional	`color`	`#ffffff`	The banner card and preferences-dialog surface colour: the background you see behind all of their content. theme key: `backgroundColor` Dark default: `#161b27`
`--cy-text`optional	`color`	`#212121`	Body and heading text colour across every SDK surface. theme key: `textColor` Dark default: `#f3f4f6`
`--cy-muted`optional	`color`	`#6b7280`	Secondary, less prominent text: the frame placeholder's caption text today; reserved for other secondary text as the SDK grows. theme key: `mutedTextColor` Dark default: `#9ca3af`
`--cy-border`optional	`color`	`#f4f4f4`	Hairline borders, dividers, and separators: the banner's own border, the dialog header/footer rules, and the accordion separators. theme key: `borderColor` Dark default: `#2d3748`
`--cy-widget-bg`optional	`color`	`#0056a7`	The background of the floating recall (re-open) widget button. theme key: `widgetBackgroundColor` Dark default: `#1f6fd1`
`--cy-radius`optional	`dimension`	`6px`	Corner rounding for the banner and preferences dialog: one value shared by both; the iframe placeholder scales it down by 40%. theme key: `borderRadius` Dark default: `unchanged`
`--cy-font`optional	`fontFamily`	`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`	The font stack used for every piece of SDK text, across every surface. theme key: `fontFamily` Dark default: `unchanged`
`--cy-focus`optional	`color`	`var(--cy-primary)`	The focus-visible outline colour on buttons, the toggle switch, and the CCPA opt-out checkbox. Defaults to a pure alias of --cy-primary: set focusColor to break that link. theme key: `focusColor` Dark default: `unchanged`
`--cy-on-primary`optional	`color`	`#ffffff`	Automatically computed near-white or near-black text/icon colour, chosen by WCAG relative luminance to be the more readable of the two against --cy-primary. Recomputes only for hex primaryColor values: anything else falls back to white. theme key: derived Dark default: `unchanged`
`--cy-on-widget-bg`optional	`color`	`#ffffff`	Automatically computed near-white or near-black icon colour for the recall widget, chosen the same way as --cy-on-primary but against whichever --cy-widget-bg value actually applies in the active colour scheme. theme key: derived Dark default: `#ffffff`

Copy the defaults

Paste either block into your own :root as a starting point. Setting the variables in CSS works only while the same values are not set in theme.

:root {
  --cy-primary: #1863dc;
  --cy-primary-hover: color-mix(in srgb, var(--cy-primary) 85%, black);
  --cy-bg: #ffffff;
  --cy-text: #212121;
  --cy-muted: #6b7280;
  --cy-border: #f4f4f4;
  --cy-widget-bg: #0056a7;
  --cy-radius: 6px;
  --cy-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cy-focus: var(--cy-primary);
  --cy-on-primary: #ffffff;
  --cy-on-widget-bg: #ffffff;
}

:root {
  --cy-primary: #1863dc;
  --cy-primary-hover: color-mix(in srgb, var(--cy-primary) 85%, black);
  --cy-bg: #161b27;
  --cy-text: #f3f4f6;
  --cy-muted: #9ca3af;
  --cy-border: #2d3748;
  --cy-widget-bg: #1f6fd1;
  --cy-radius: 6px;
  --cy-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cy-focus: var(--cy-primary);
  --cy-on-primary: #ffffff;
  --cy-on-widget-bg: #ffffff;
}

Not controlled by a variable

A few colours are fixed in the stylesheet. Use the selector in the table to change one.

Element	Declaration	Override selector
the dimmed backdrop behind the preferences dialog (no dedicated token yet; see below)	`.cy-dialog-overlay { background: rgba(0, 0, 0, 0.4); }`	`[data-cy-part="overlay"][data-cy-part]` Not variable-controlled. The SDK's own `.cy-dialog-overlay` rule is (0,1,0); a plain `[data-cy-part="overlay"]` selector is also (0,1,0) and only ties, winning on source order alone. Repeating the attribute lifts your rule to (0,2,0), which wins outright: `[data-cy-part="overlay"][data-cy-part] { background: rgba(0, 0, 0, 0.6); }`.
the toggle switch's track in its off state	`.cy-toggle-track { background: #8a8a8a; }`	`[data-cy-part="toggle"][data-cy-part][data-cy-state="off"] .cy-toggle-track` Not variable-controlled. The switch's colour is painted by the `.cy-toggle-track` child, so a rule on `[data-cy-part="toggle"]` alone has no visible effect: you must reach the track. This is the same selector documented in the Part & state contract, kept in the same doubled-attribute form used for the "on" state (which must beat a higher-specificity `:checked` sibling rule) so both states use one consistent pattern: `[data-cy-part="toggle"][data-cy-part][data-cy-state="off"] .cy-toggle-track { background: #e2e2e2; }`.
the recall widget's hover-tooltip background	`.cy-widget::before { background: #4e4b66; }`	`[data-cy-part="recall"][data-cy-part]::before` Not variable-controlled. `[data-cy-part="recall"]::before` alone is (0,1,1), tying the SDK's own `.cy-widget::before` rule; repeating the attribute lifts it to (0,2,1), which wins outright.
the recall widget's hover-tooltip text colour	`.cy-widget::before { color: #fff; }`	`[data-cy-part="recall"][data-cy-part]::before` Not variable-controlled. Same tooltip element as the background above: one doubled-attribute rule can set both properties at once.
the recall widget's hover-tooltip arrow	`.cy-widget::after { border-right-color: #4e4b66; }`	`[data-cy-part="recall"][data-cy-part]::after` Not variable-controlled. `[data-cy-part="recall"]::after` alone is (0,1,1), tying the SDK's own `.cy-widget::after` rule; repeating the attribute lifts it to (0,2,1), which wins outright. Keep this in sync with the tooltip background above: the arrow is a CSS triangle colour-matched to the tooltip.
the CCPA opt-out checkbox's border	`.cy-optout-checkbox { border: 1px solid #000; }`	`.cy-optout-checkbox.cy-optout-checkbox` Not variable-controlled, and the checkbox carries no data-cy-part. Repeating the class lifts the override from a tying (0,1,0) to a winning (0,2,0), the same technique as the Cancel button above.
the CCPA opt-out checkbox's unchecked fill	`.cy-optout-checkbox { background: #fff; }`	`.cy-optout-checkbox.cy-optout-checkbox` Not variable-controlled. Same element and technique as its border above.
the CCPA opt-out checkbox's checkmark	`.cy-optout-checkbox:checked::after { border: solid #fff; }`	`.cy-optout-checkbox.cy-optout-checkbox:checked::after` Not variable-controlled. The SDK's own rule is `.cy-optout-checkbox:checked::after` at (0,2,1); repeating the base class lifts the override to (0,3,1), which wins outright.
the CCPA opt-out success panel's background	`.cy-optout-success { background: #e5f4ef; }`	`.cy-optout-success.cy-optout-success` Not variable-controlled, and this panel carries no data-cy-part. Repeating the class lifts the override from a tying (0,1,0) to a winning (0,2,0).
the CCPA opt-out success panel's checkmark icon	`.cy-optout-success-icon { color: #00754e; }`	`.cy-optout-success-icon.cy-optout-success-icon` Not variable-controlled. Same doubled-class technique as the panel background above.
the CCPA opt-out success panel's main message text	`.cy-optout-success-text { color: #14142a; }`	`.cy-optout-success-text.cy-optout-success-text` Not variable-controlled. Same doubled-class technique as the panel background above.
the CCPA opt-out success panel's smaller subtext	`.cy-optout-success-subtext { color: #4e4b66; }`	`.cy-optout-success-subtext.cy-optout-success-subtext` Not variable-controlled. Same doubled-class technique as the panel background above.
the "Always Active" badge on a required category row	`.cy-always-active { color: #008000; }`	`.cy-always-active.cy-always-active` Not variable-controlled, and this badge carries no data-cy-part. Repeating the class lifts the override from a tying (0,1,0) to a winning (0,2,0).
the cookie audit table's background, inside an expanded category	`.cy-audit-table { background: #f4f4f4; }`	`.cy-audit-table.cy-audit-table` Not variable-controlled, and this element carries no data-cy-part. Repeating the class lifts the override from a tying (0,1,0) to a winning (0,2,0).

Machine-readable

The same data is published as a W3C Design Tokens file at /design-tokens/cookieyes.tokens.json, for design tools and code generators.

Next steps

Theme tokens: set these through initCookieYes()
Custom CSS: set them, or anything else, in CSS

CSS variables reference

Copy the defaults

Not controlled by a variable

Machine-readable

Next steps

On this page