Change the colors in the consent popup

You can change colors in the consent popup to match your branding. In this article, we’ll show you how to do it.

Before you start

Here are a few things to know before you start:

The following guide is for Overlay v2 and Overlay v3 templates, version 1.1.0 or higher.

Starting from version 1.1.0 for those templates, we have introduced CSS (Cascading Style Sheet) variables. They let you change the colors of the consent popup. To use these variables, enter your desired popup color in HEX format, for instance, #2C622C.

These variables are at the top of the CSS box.

Variable name	Elements
--main-color	Renew icon color Accept button color Consent toggle color Cookie category link hover color
--link-color	About cookies link Data processor privacy policy link All links on the cookie policy page
--text-color	All non-clickable text Cookie category title (except Cookie Information branding text)
--hover-color	Accept buttons hover color
--decline-color	Decline all / Save settings / Settings button background color
--decline-text	Decline all / Save settings / Settings button text color
--decline-hover	Decline all / Save settings / Settings button background hover color
--footer-background	Changes the background color for the main text area, category toggles, cookie policy page and branding

To change the colors in the consent popup, follow these steps:

1. Log in to your Cookie Information account.

2. In Consent solutions, find the consent solution you want to change the colors in the consent popup.

3. Go to Consent popup > My templates.

4. Find the consent solution that contains the template for the popup you want to update.

5. Click the ⋯ three-dot icon next to the template name you want to change, then click Edit.

Note: The Published label shows which template is currently active for your consent popup:

6. Let’s say you want to change the text color. In Template code, go to CSS.

7. In CSS code, find the variable representing the text --text-color.

8. Replace the current HEX value with the code for your desired color.

Note: To change the colors of other popup elements, follow the same steps, but use the specific variable and the HEX code for your desired color.

9. Click Save.

Note: Clicking Save only saves changes to your template. To publish the updated template, click Save and publish.

10. Done.