Didomi - Developers documentation
  • Introduction
  • SDKs
    • Introduction
    • Web SDK
      • Getting started
      • Tags and vendors management
        • Tags management
          • Events & Variables
            • Deprecated
            • Custom events
          • Tag managers
            • Adobe Launch/DTM
            • Eulerian
            • Google Tag Manager
              • Configure the Didomi / GTM integration
              • Didomi's GTM template
            • Tealium
            • Other tag managers
        • Custom Didomi <script> tags
        • Third-party integrations
          • Google Ad Manager / AdSense
            • GDPR via Non-Personalized Ads
              • Share consent and load/refresh ads
              • Share consent without loading or refreshing ads
            • US states laws
          • Google Consent Mode V2
          • Kameleoon
          • Piano Analytics (AT Internet)
          • Prebid
            • GDPR via IAB TCF
            • US states laws
          • Salesforce DMP (Krux)
        • IAB frameworks
        • Programmatic API
      • Configuration
        • Bots (SEO & Performance tools)
        • Configuration by URL
        • Cookies and storage
        • Custom domains for events
        • Notice
          • Behavior
          • Interactions
          • Look and feel
        • Preferences
        • Theme
      • AB tests
      • Custom domain
        • Domain delegation
        • Reverse proxy
      • Share consents between domains
      • Share consents across devices
      • Pass user choices in query string
      • Serve Didomi assets from your domain
      • Reference
        • API
          • Deprecated
        • Events
      • Performance
      • Versions
    • Mobile and TV SDKs
      • Android and Android TV
        • Setup
        • Logging
        • Reference
          • API
            • Deprecated
          • Events
        • Versions
      • iOS and tvOS
        • Setup
        • Logging
        • App Tracking Transparency (iOS 14.5+)
        • Reference
          • API
            • Deprecated
          • Events
        • Versions
      • Unity
        • Setup
        • Reference
        • Versions
        • Troubleshooting
      • React Native
        • Setup
        • Reference
          • Deprecated
        • Versions
      • Flutter
        • Setup
        • Reference
        • Versions
      • Consent notice
        • Getting started
        • Customize the notice
        • Customize the preferences popup
        • Customize the theme & UI
        • Load notice by ID
      • Third-party SDKs
      • Share consents across devices
      • Share consent with WebViews
      • Google Consent Mode v2
      • FAQ
    • AMP SDK
      • Blocking Behaviors
        • Load immediately on page load
        • Load only after consent (positive or negative)
        • Load only after positive consent
      • Consent status for vendors
    • Help & Support
  • API
    • Introduction
      • Authentication
      • Errors
      • Pagination
      • Filters
      • Caching
      • Rate limiting
      • Quotas
      • Translations
    • Data Manager
      • Regulations
      • Configuration Tree
      • Purposes
        • Purposes & Vendors Numerical IDs
      • Preferences Library
      • User Rights
    • Widgets
      • Consent notices
        • Notices
        • Configurations
        • Multi-Regulation Configurations
          • Migration of Existing Notices and API Updates
        • Deployments
        • Tutorials
          • Create and publish a consent notice
          • Create and publish a multi-regulation consent notice
      • Privacy widgets
        • Create a widget
        • Retrieve widgets
        • Edit a widget
          • Content & Design
            • Themes & Shapes
            • Components
              • auth
              • dsar_form
              • footer
              • header
              • preference
              • preference_value
              • save
              • section
              • sections
            • Options
          • Purposes & preferences
          • Settings
        • Deploy a Widget
          • Use your own subdomain
          • Use your own domain
          • Implement an embeddable widget on your website
        • Authentication
          • Manage authentication providers
          • Authenticate your end-user
        • Archive a widget
        • Headless widgets
          • Public Methods
          • Custom elements
          • Custom events
          • Event listeners
        • Tutorial
          • Launch a Preference Center from a mobile app
    • Compliance Reports
      • Properties
      • Reports
      • CSV format reference
      • Websites
    • Consents and Preferences
      • Events
        • Generate IAB TCF consent string
      • Links
      • Proofs
      • Tokens
      • Secrets
      • Users
      • Tutorial
        • Collect and operate data
    • Privacy Requests
      • Requests
      • Notes
      • Links
      • Emails
  • Integrations
    • Introduction
      • Quotas
    • Generic integrations
      • Batch export
        • Destinations
          • AWS S3 Bucket (owned by Didomi)
          • GCP Storage Bucket
        • Exported data
          • Notices consents
        • Logs
      • Webhooks
      • Batch import
      • Analytics export
        • Destinations
          • AWS S3 Bucket (owned by Didomi)
          • GCP Storage Bucket
    • Third-party apps
      • CMP integrations
        • Didomi-mParticle integration for your CMP
        • Deploy Didomi’s SDK for your Adobe Commerce website
      • Preference Management Platform integrations
        • Actito
        • Adobe Campaign Classic
        • Adobe Experience Cloud
        • Adobe Marketo Engage
        • Adobe Source Connector
        • Braze
        • Dotdigital
        • Hubspot
        • Mailchimp
        • Microsoft Dynamics 365
        • Salesforce Marketing Cloud
        • Salesforce Sales & Service Cloud
        • Selligent
        • Brevo (ex Sendinblue)
    • Tutorials
      • Configure a HTTP webhook
      • Configure a batch export
      • Configure an analytics export
    • Emailing
      • Configurations
        • Actito Email
        • Actito SMS
        • Adobe Campaign Classic
        • Adobe Campaign Standard
      • Emails
        • Templates
        • Manage your templates
Powered by GitBook
On this page
  • Introduction
  • Tag configuration
  • Color
  • Font
  • Buttons
  • Customize with your own CSS
  • Font
  • Buttons
  • Screens Selectors
  • Popup
  • Notice
  • Information and preferences
  • Custom CSS
  • Some examples
  • Example 1 - Popup with shadow, black backdrop and round buttons
  • Example 2 - Banner notice with colored background and buttons
  1. SDKs
  2. Web SDK
  3. Configuration

Theme

PreviousPreferencesNextAB tests

Last updated 4 years ago

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 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:

  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.

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

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.

Here is an example of a regular button (on the left) and a highlighted button (on the right) .

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