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);
}

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.

There are 3 different popups. The notice popup, the information and the preference popups.

Information and preference popups only :

Notice

Banner selectors

Don't forget to prefix those selectors with #didomi-host .didomi-notice-banner if you only want to change this screen.

Information and preferences

Don't forget to prefix those selectors with #didomi-host #didomi-consent-popup if you only want to change this screen.

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.

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

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;
}

We use global styles that apply to all screens in that example. Screen-specific selectors are therefore not used.

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>

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.

PreviousPreferences NextAB tests

Last updated 3 years ago

Introduction

Tag configuration

Color

Font

Buttons

Customize with your own CSS

Font

Buttons

Screens Selectors

Popup

Information and preference popups only :

Notice

Banner selectors

Information and preferences

Information and preferences popup selectors

Information content selectors

Preferences content selectors

Custom CSS

Some examples

Example 1 - Popup with shadow, black backdrop and round buttons

CSS file

Tag configuration

Example 2 - Banner notice with colored background and buttons

CSS file

Tag configuration