StylingStyling
Styling for JavaScript
Change the colours, font and layout of the banner and dialogs, and know which tool to use for each.
This page applies to the banner from @cookieyes/vanilla. @cookieyes/core alone draws nothing, so there is nothing for it to style.
The components look finished out of the box. To make them match your site, pick the smallest tool that does the job:
| You want to change | Use | Page |
|---|---|---|
| Brand colour, corner radius, font, backgrounds | theme in start() | Theme tokens |
| Light, dark, or follow the device | colorScheme in start() | Colour scheme |
| Anything else: width, spacing, one button, the toggle | A CSS rule on a data-cy-part selector | Custom CSS, Parts |
| The same, with utility classes | @apply | Tailwind |
| The markup itself | Your own UI on the store | Build your own UI |
The styling is the same in every CookieYes package, so a stylesheet written for the React banner restyles this one unchanged.
Most sites stop at the first row.
Two rules
- Load your CSS after the SDK's stylesheet. The SDK's rules are plain single-class rules, so a rule of yours with the same selector strength wins only if it comes later. Import
styles.cssfirst and your own stylesheet after it. You never need!important. - Set a value in config or in CSS, not both. A
themevalue is written straight onto the component, which beats any stylesheet rule for that variable. If you want to control--cy-primaryfrom CSS, leaveprimaryColorout oftheme.
Good to know
- The banner, dialogs and recall button render into
<body>, not where you placed them, so CSS scoped to your app (.app [data-cy-part], CSS Modules) does not reach them. Use global CSS. - The banner does not inherit your page font. Set
theme.fontFamily. - Every
data-cy-part,data-cy-state,--cy-*andcy-*name is stable across minor versions. Renames come only with a major version. - Which buttons appear, and which one is primary, is not styling: it follows the privacy regulation.