To make your consent popup match your website or brand, you can update its colors. Use the visual editor for Overlay v2 - Google Consent Mode v2 and Overlay v3 - Google Consent Mode v2 templates. Use developer mode for all other templates.

In this article, we’ll show you how to do it.

Before you start

Here are a few things to know before you start:

You can use the visual editor only for Overlay v2 - Google Consent Mode v2 and Overlay v3 - Google Consent Mode v2 templates.
You can’t edit templates that were published before the visual editor was released in the visual editor. To use the visual editor, choose a new template from Template gallery.
Templates created before the visual editor was released are automatically migrated to developer mode. Developer mode lets you manually edit HTML, CSS, or JavaScript code.
Once a template has been edited and saved in developer mode, that template and any copies of it can only be edited in developer mode.
Starting from version 1.1.0, Overlay v2 and v3 templates support CSS variables. In December 2025, these templates were updated to version 1.2.0, so depending on when your setup was created or last updated, you may have version 1.1.0 or 1.2.0.

Change colors in the visual editor for Overlay v2 - Google Consent Mode v2

To change colors using the visual editor for supported templates, Overlay v2 - Google Consent Mode v2 and Overlay v3 - Google Consent Mode v2, follow these steps:

1. Log in to your Cookie Information account.

2. In Consent solutions, select the consent solution you want to update.

3. Go to Consent popup > Template gallery.

Note: You can’t edit the templates you published before this editor was released with the visual editor. You need to choose a new template from Template gallery.

4. Find the template, and click Use this template next to its name.

5. In Customize your template, you can style your template, for instance, the text color.

Note: In the visual editor, settings are grouped into sections:

General appearance – Set background and overlay colors, border radius, spacing, and overall layout.
Typography – Choose fonts and size, and link appearance.
Buttons – Set up button colors, hover states, and border radius.
Toggles – Adjust colors and style for toggle switches.

6. Go to General appearance > Colors

7. Click the color box next to the Text field. This opens the color picker.

8. Use your mouse to drag the circle to your desired color.

Use your mouse to drag the circle to your desired color in Cookie Information visual editor

Note: To change the color, you can also enter a HEX code, for example, #3c88ae, in the field, or adjust the RGB values at the bottom if needed.

11. Once you've picked your color, the color box and HEX field will update automatically.

12. Click Save and publish.

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

13. Done

If your template isn’t supported in the visual editor, or if it has already been edited in developer mode, use the developer-mode instructions below.

Change colors in developer mode for template version 1.1.0

To change colors in developer mode for template version 1.1.0, 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 template 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:

The Published label in consent template in Cookie Information

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

CSS code in Cookie Information consent editor

Note: Make sure your template version is 1.1.0.

7. In CSS code, find the variable representing the text --text-color. You can use these variables in 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
--cookies-list-background	Changes the background color of the cookie list section
--cookies-details-divider	Changes the color of dividers between cookie items in that list

8. Replace the current HEX value with the code for your preferred color, for example #262024.

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.

Change colors in developer mode for template version 1.2.0

To change colors in a consent popup template version 1.2.0, follow these steps:

1. Log in to Cookie Information.

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 template you want to edit.

Note: Make sure your template version is 1.2.0.

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

6. Let’s say you want to change the text color. Go to Template code.

7. In CSS code*, find the variable representing the text --popup-text-color. You can use these variables in the CSS box:

Variable name	What it changes	Notes
--popup-overlay-opacity	Overlay darkness behind the popup	Higher = darker overlay (example: `0.7)`
--popup-bg-color--primary	Popup background color	Example: `#FFFFFF`
--popup-bg-color--secondary	The background of the cookie categories section	Example: `#F4F7F7`
--popup-text-color	Popup text color	Uses RGB values (example: `32, 32, 32`)
--popup-link-color	Popup link color	Example: `#234923`
--popup-border-color	Popup border color	Example: unset
--popup-button-color	Link underline / decoration style (global*)	Also affects the button that opens the popup
--popup-button-font-color	All buttons background color	Example: `#FFFFFF`
--popup-button-color--hover	All buttons text color	Example: `#234923`
--popup-button-font-color--hover	All buttons’ background color on hover	Example: `#FFFFFF`
--popup-toggle-bg-color--active	Active toggle background color	Example: `#2C622C`
--popup-toggle-bg-color--inactive	Inactive toggle background color	Example: `#7D8A89`
--popup-toggle-icon-color	Toggle knob color	Example: `#FFFFFF`

*Global means “default.” It’s used across the popup unless a more specific setting changes it for a specific element.

8. Replace the current RGB values, 32, 32, 32, with the code for your desired color.

Note:

RGB stands for red, green, and blue, the three primary colors of light used in digital screens. RGB values define a color by mixing different intensities of each color. You provide three values, one for each color.
Each value must be a number from 0 to 255, separated by commas. For example:
- rgb(0, 0, 0) = black
- rgb(255, 255, 255) = white
- rgb(255, 255, 0) = yellow

9. Once you’ve done with the changes, click Save and publish.