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, the Overlay v2 and v3 templates support CSS variables. You can use these to customize the colors of the consent popup.
To change a color, enter a HEX color code, like
#2C622C.
These variables are at the top of the CSS box.In December 2025, we updated the Overlay v2 and v3 templates to version 1.2.0. Depending on when your setup was created or last updated, you may have either version 1.1.0 or 1.2.0.
Check your template version before you make any changes:
Part 1 applies to Overlay v2 and v3 templates (v1.1.0)Part 2 applies to Overlay v2 and v3 templates (v1.2.0)
Here’s what each variable controls in v1.1.0
Variable name | Elements |
--main-color |
|
--link-color |
|
--text-color |
|
--hover-color |
|
--decline-color |
|
--decline-text |
|
--decline-hover |
|
--footer-background |
|
Here’s what each variable controls in v1.2.0
Variable name | What it changes | Notes |
--popup-overlay-opacity | Overlay darkness behind the popup | Higher = darker overlay (example: |
--popup-overlay-blur | The background blur behind the popup | 0px = no blur |
--popup-bg-color--primary | Popup background color | Example: |
--popup-bg-color--secondary | The background of the cookie categories section | Example: |
--popup-text-color | Popup text color | Uses RGB values (example: |
--popup-link-color | Popup link color | Example: |
--popup-border-width | Popup border width | Example: 0px |
--popup-border-color | Popup border color | Example: unset |
--popup-border-radius | Popup corner roundness | Example: 5px |
--popup-font-family | Popup font family | Example: system-ui, -apple-system, Roboto, sans-serif |
--popup-font-size | Popup font size | Example: 16px |
--popup-link-decoration | Link decoration style | Example: underline |
--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: |
--popup-button-color--hover | All buttons text color | Example: |
--popup-button-font-color--hover | All buttons’ background color on hover | Example: |
--popup-button-border-radius | All buttons corner roundness | Example: 10px |
--popup-toggle-bg-color--active | Active toggle background color | Example: |
--popup-toggle-bg-color--inactive | Inactive toggle background color | Example: |
--popup-toggle-icon-color | Toggle knob color | Example: |
--popup-toggle-border-radius | Toggle corner roundness | Example: 100px |
*Global means “default.” It’s used across the popup unless a more specific setting changes it for a specific element.
Note: The font family must be either a single <string> value or a space-separated sequence of <custom-ident> values.
Change colors in a consent popup template version 1.1.0
To change colors in a consent popup 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:
6. Let’s say you want to change the text color. In Template code, go to CSS.
Note: Make sure your template version is 1.1.0.
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.
Change colors in a consent popup template version 1.2.0
To change colors in a consent popup template version 1.2.0, follow these steps:
1. Log in to your 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 update.
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.
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)= blackrgb(255, 255, 255)= whitergb(255, 255, 0)= yellow
9. Once you’ve done with the changes, click Save and publish.
Note: Clicking Save only saves changes to your template. To publish the updated template, click Save and publish.
10. Done.