# Theme
{% hint style="danger" %}
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](https://console.didomi.io/) and this documentation only applies to edge cases or custom implementations that require it.
{% endhint %}
## 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:
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.
## 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)
.
```javascript
```
## 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.
```css
#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.
```css
#didomi-host {
font-family: 'Trebuchet MS' !important;
}
```
### Buttons
You can also modify the style of the buttons by using your own CSS.
```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` |
{% hint style="warning" %}
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.
{% endhint %}
### 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:
```javascript
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).
{% hint style="warning" %}
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.
{% endhint %}
## Some examples
### Example 1 - Popup with shadow, black backdrop and round buttons
#### CSS file
```css
#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;
}
```
{% hint style="info" %}
We use global styles that apply to all screens in that example. Screen-specific selectors are therefore not used.
{% endhint %}
#### Tag configuration
```javascript
```
### Example 2 - Banner notice with colored background and buttons
#### CSS file
```css
#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
```javascript
```
{% hint style="info" %}
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.
{% endhint %}