CookieTractor with Color Schemes

Our cookie banner can be displayed using different color schemes, including those that follow the visitor's preferences set in their operating system or browser. A common example is Dark Mode, which displays windows and compatible websites with darker tones when the user has requested it. There are many reasons to adapt colors, not least improved accessibility and, in some cases, reduced environmental impact.

Choose a Color Scheme

Within our tool, under the Design tab, you can choose between three color schemes: Light, Dark, and Adaptive. The first two options force the dialog to always appear in either light mode (the default) or dark mode, respectively.

The Adaptive scheme respects the visitor’s system settings and displays the dialog accordingly.

Customize Variables

Both the light and dark schemes can be customized independently. Each has its own set of colors for primary and secondary text and background. If the light colors are customized but the dark ones are not, the dark mode will inherit the light colors by default.

Force Dark Mode on Light sites

If the Adaptive scheme is selected, you can also force the dark mode manually by prefixing dark-mode styles with a CSS selector. This is useful if, for example, your website allows visitors to toggle between light and dark modes and you apply a class like darkmode on the HTML element. In that case, you would enter .darkmode in the Dark color scheme CSS prefix field. All dark mode customizations will then be applied when .darkmode is present in the DOM.

If you use something other than a class to indicate dark mode, such as an attribute [data-colormode='dark'] or an ID #darkmode - that works just as well.

Write Custom CSS

For each color scheme, you can add custom CSS rules in the Custom CSS field to fine-tune the appearance. Every rule will automatically be prefixed with selectors that scope the styles to only affect our dialog. If you've specified a value in the Dark color scheme CSS prefix field, it will also be prepended to all dark mode rules.

Related information