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.
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:
- 1.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.
- 2.The information popup which can be enabled or disabled depending on your configuration.
- 3.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.
We expose three attributes in the
theme section of the Didomi tag configuration: color, font and buttons.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.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.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>
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. If you prefer to use CSS to change the font globally, you can do it.
#didomi-host {
font-family: 'Trebuchet MS' !important;
}
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 |
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 |
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 |
Sections | Selectors |
Text container (body) | .didomi-popup-body |
Footer | .didomi-popup-footer |
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 |
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 |
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.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 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.
Example 1 - Popup with shadow, black backdrop and round buttons
#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;
}
We use global styles that apply to all screens in that example. Screen-specific selectors are therefore not used.
<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>
#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;
}
<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>
Note that with that configuration, the style provided to the configuration related to the font and the buttons will be global. If you only want the buttons of the banner notice to be styled, please use the CSS selectors explained above.
Last modified 2yr ago