Overriding styles for the cookie banner with an external stylesheet

If the styling options in the Cookiebot Admin aren't sufficient to get the banner look the way you'd like, but the changes you'd like to make don't justify the effort of crafting custom banner, you can consider making small tweaks using CSS overrides.

Nearly every element on a Cookiebot banner has a unique ID or a CSS class. This makes it very easy to target a specific element and adding a rule for it in your own stylesheet.

As an example, below is a standard Cookiebot banner:

Let's say that I don't like the color of the toggles, and I really want to make clear whether the toggle is "on" or "off" by setting the colors to green and red respectively.

To do this, I can inspect the toggles and determine that these are the rules that set the color to blue and very dark gray:

#CybotCookiebotDialog input:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #1032CF;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #141414;
}  

To override these rules, I can add these rules to my own stylesheet, but with the colors I want the toggles to have instead.
If the rule isn't getting applied, you can consider forcing the rule to take precedence by using the !important keyword.

Here's how that might look:

#CybotCookiebotDialog input:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #090 !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #900 !important;
}  

And here is the result this will have on the Cookiebot banner: