Theme
This section describes how to configure the Didomi consent notice through its programmatic API and the window.didomiConfig object.
Most configuration options are available through the Didomi Console and this documentation only applies to edge cases or custom implementations that require it.
Introduction
We have options to easily customize your notice and popups via the Didomi tag configuration. Our current implementation includes the customization of the theme color, the font and the buttons and other parts can be customized via CSS.
Our consent management flow includes 3 different screens:
The notice which is the first screen displayed when a user arrives on your website. It can be a banner attached to a side of the screen, a floating panel or a popup.
The information popup which can be enabled or disabled depending on your configuration.
The preferences popup that allows users to choose what purpose or vendor they want to allow.
Our theming options will change the style globally, which means that if you change the font or the color of the buttons, it will be changed on every screen. If you need more specific styling or style other parts of the workflow, you can always use your own CSS on top of ours.
Tag configuration
We expose three attributes in the theme section of the Didomi tag configuration: color, font and buttons.
Color
The color attribute controls the entire theme color like the popup borders and the highlighted buttons. It is used throughout the workflow UI to make it match your main brand color automatically.
The linkColor attribute controls the color of all the links in the banner/popup.
Font
The font attribute determines the font used in the consent UIs, from the banner to the popups. You only need to set it once to have it applied globally.
Buttons
We use two different types of buttons:
Regular buttons (
regularButtons): our basic button used throughout the consent workflow (Learn More, Disagree, etc.). Those buttons are grey by default.Highlighted buttons (
highlightButtons): used when we want to emphasize an action. Those buttons use the theme color by default.
Here is an example of a regular button (on the left) and a highlighted button (on the right)
.
<script type="text/javascript">
window.didomiConfig = {
theme: {
color: '#3F51B5', // Principal color used by the SDK
linkColor: '#3F51B5',
font: 'Arial', // Font used by the SDK
buttons: {
regularButtons: { // Learn more/disagree/disagree to all buttons.
backgroundColor: '#eeeeee',
textColor: '#999999',
borderColor: 'rgba(34, 34, 34, 0.2)',
borderWidth: '1px',
borderRadius: '0px'
},
highlightButtons: { // Agree/save/agree to all buttons.
backgroundColor: 'rgb(194, 39, 45)',
textColor: '#ffffff',
borderColor: 'rgba(194, 39, 45, 0.3)',
borderWidth: '1px',
borderRadius: '0px'
}
}
}
};
</script>Customize with your own CSS
You can use CSS classes and IDs to go even deeper into the customization of the notice and popups. Here is an example of customization that adds a shadow to the highlighted button of the notice. If you want to override a property already used in our style, you may have to add !important or use a more precise selector.
#didomi-host .didomi-notice-banner .didomi-buttons .didomi-button-highlight {
box-shadow: 7px 10px 28px -12px rgba(0,0,0,0.75);
}As you can see, the top-most parent selector is #didomi-host . All our elements live in that parent div and you should always use it as your base selector to limit your CSS to our SDK.
Font
If you prefer to use CSS to change the font globally, you can do it.
#didomi-host {
font-family: 'Trebuchet MS' !important;
}Buttons
You can also modify the style of the buttons by using your own CSS.
/* How to change all the buttons on all the screens */
#didomi-host .didomi-buttons .didomi-button {
box-shadow: 7px 10px 12px -12px rgba(0,0,0,0.75);
}
/* How to change all the buttons for one specific screen (here the preferences popup) */
#didomi-host #didomi-consent-popup .didomi-consent-popup-preferences .didomi-buttons .didomi-button {
box-shadow: 7px 10px 12px -12px rgba(0,0,0,0.75);
}
/* How to change the standard buttons on all the screens */
#didomi-host .didomi-buttons .didomi-button.didomi-button-standard {
box-shadow: 7px 10px 12px -12px rgba(0,0,0,0.75);
}Sections
Selector(s)
Buttons container
.didomi-buttons
Buttons
.didomi-button
Regular Button
.didomi-button-standard
Highlighted Button
.didomi-button-highlight
Screens Selectors
If you want to change one screen in particular, you will have to specify the selector. Here is the list of the different screens you can customize and their selectors.
Screens
Selector(s)
Backdrop (for popups)
.didomi-popup-backdrop
Notice (as a banner)
.didomi-notice-banner
Notice (as a popup)
.didomi-notice-popup
Information and Preferences popup
#didomi-consent-popup
Content of the Information popup
#didomi-consent-popup .didomi-consent-popup-information
Content of the Preferences popup
#didomi-consent-popup .didomi-consent-popup-preferences
Popup
There are 3 different popups. The notice popup, the information and the preference popups.
Sections
Selectors
Exterior border of the popup
.didomi-exterior-border
Popup container
.didomi-popup-container
Information and preference popups only :
Sections
Selectors
Text container (body)
.didomi-popup-body
Footer
.didomi-popup-footer
Notice
Banner selectors
Don't forget to prefix those selectors with #didomi-host .didomi-notice-banner if you only want to change this screen.
Sections
Selectors
Border of the notice
.didomi-border
Text
.didomi-notice-text
Information and preferences
Information and preferences popup selectors
Don't forget to prefix those selectors with #didomi-host #didomi-consent-popup if you only want to change this screen.
Sections
Selectors
Header
.didomi-popup-header
Header title
.didomi-popup-header .didomi-popup-title
Information content selectors
Don't forget to prefix those selectors with #didomi-host #didomi-consent-popup .didomi-consent-popup-information if you only want to change this screen.
Preferences content selectors
Don't forget to prefix those selectors with #didomi-host #didomi-consent-popup .didomi-consent-popup-preferences if you only want to change this screen.
Sections
Selectors
Purposes buttons
.didomi-components-radio__option
Please only use those documented classes and IDs. The undocumented ones that exist in our HTML may be removed or modified and may break your style.
Custom CSS
Custom CSS can be specified as part of the theme configuration object to further customize the look and feel of the consent notice.
You can do so by specifying the theme.css property in the Didomi configuration object.
The theme.css property is a stringified value with the CSS rules you want to apply to the consent notice:
window.didomiConfig = {
theme: {
css: `
#didomi-consent-popup .didomi-popup-header {
text-align: center;
}
`,
},
};With the theme.css configuration, you can also specify media queries (to override the default UI for different breakpoints) and target pseudo-elements for the consent notice (e.g. ::before and ::after pseudo-elements).
Only use the documented classes and IDs. The undocumented ones that exist in our HTML may be removed or modified at any time and may break your style.
Some examples
Example 1 - Popup with shadow, black backdrop and round buttons
CSS file
#didomi-host .didomi-popup-backdrop {
background-color: hsla(0,0%,10%,.8) !important;
}
#didomi-host .didomi-exterior-border {
box-shadow: 7px 10px 28px -12px rgba(0,0,0,0.75);
border: 1px solid rgba(0,0,0,0.1) !important;
}
#didomi-host .didomi-popup-container {
border: 0 !important;
}
#didomi-host .didomi-popup-header {
text-align: center;
}
#didomi-host .didomi-popup-title {
width: 100%;
}
#didomi-host .didomi-buttons .didomi-button {
box-shadow: 7px 10px 12px -12px rgba(0,0,0,0.75);
}
#didomi-host .didomi-popup-footer {
border-top: 1px solid rgba(139,185,212,0.4);
}
#didomi-host .didomi-components-radio__option {
border: 2px solid rgba(139,185,212,0.6) !important;
border-radius: 5px;
box-shadow: 0px 0px !important;
}Tag configuration
<script type="text/javascript">
window.didomiConfig = {
theme: {
buttons: {
regularButtons: {
backgroundColor: 'white',
borderColor: 'rgba(0,0,0,0.1)',
borderWidth: '1px',
borderRadius: '10px'
},
highlightButtons: {
backgroundColor: '#8BB9D4',
textColor: 'white',
borderColor: 'rgba(139,185,212,0.2)',
borderWidth: '2px',
borderRadius: '10px'
}
}
}
};
</script>Example 2 - Banner notice with colored background and buttons
CSS file
#didomi-host .didomi-notice-banner {
background-color: #ECC193 !important;
color: white !important;
border-top: 2px solid rgba(236, 193, 147, 0.3) !important;
box-shadow: 1px 7px 17px 3px rgba(0,0,0,0.75);
}
#didomi-host .didomi-notice-banner .didomi-notice-text {
font-size: 14px;
font-weight: 700;
}
#didomi-host .didomi-notice-banner .didomi-buttons .didomi-button-standard {
padding: 8px 10px !important;
min-width: 100px !important;
}
#didomi-host .didomi-notice-banner .didomi-buttons .didomi-button-highlight {
text-decoration: none !important;
min-width: 100px !important;
padding: 8px 10px !important;
}Tag configuration
<script type="text/javascript">
window.didomiConfig = {
theme: {
font: "Trebuchet MS",
buttons: {
regularButtons: {
backgroundColor: '#DA7F6D',
textColor: 'white',
borderWidth: '0px',
borderRadius: '15px'
},
highlightButtons: {
backgroundColor: '#FBE394',
textColor: '#B56A44',
borderWidth: '0px',
borderRadius: '15px'
}
}
}
};
</script>Last updated