Dark Mode for Mobile Apps

OneTrust Mobile now supports the use of Dark Mode colors and styling for Banner and Preference Centers. The ability to easily enable Dark Mode allows customers to give their users the flexibility to chose a preferred in app experience, can help reduce eye strain for users, and makes applications easier to use in the evening and at night.

Things to Know

  • Dark Mode is currently available for iOS, Android, Xamarin, and Unity mobile Banner and Preference Centers.

  • Custom Dark Mode styling is available within the Mobile Banner and Preference Centers to support organizational branding in a Dark Mode palette.

  • Dark Mode is not supported if the UI on the SDK level is using custom UX parameters. Any colors being used will show the same in Light and Dark modes.

  • Dark Mode is also available for the following:

    • Vendor List

    • SDK List

To enable Dark Mode

  1. On the Cookie Consent menu, select Templates. The Templates screen appears.

  2. Select an existing template to edit.
  3. The Details screen appears. Navigate to the Mobile App Template setting.

  4. On the Mobile App Template setting, select the Enable Dark Mode setting.


To configure Banner Templates

  1. On the Cookie Consent menu, select Templates. The Templates screen appears.

  2. Click Add New or select an existing template to edit.
  3. The Details screen appears. Navigate to the Mobile App Template setting.

  4. On the Mobile App Template setting, enable the Mobile App setting and check the Enable Dark Mode setting.
  5. On the Banner tab, select the Mobile App tab. The Mobile App screen appears.

  6. Click the Dark Mode tab to render a preview of the mobile Banner in Dark Mode.
  7. Expand the Dark Mode Styling section to select compatible Dark Mode colors. To see all available customization options for the Banner, see Dark Mode Color Properties.


To configure Preference Center Templates

  1. On Cookie Consent menu, select Templates. The Template screen appears.

  2. Click Add New or select an existing Template to edit.
  3. The Details screen appears. Navigate to the Mobile App Template setting section.

  4. On the Mobile App Template setting, enable to Mobile App setting and check the Enable Dark Mode setting.
  5. On the Preference Center tab, select the Mobile App tab. The Mobile App screen appears.

  6. Click the Dark Mode tab to render a preview of the mobile Preference Center in Dark Mode.
  7. Expand the Dark Mode Styling menu section to select compatible Dark Mode colors. To view all available customization options for Preference Centers, see Dark Mode Color Properties.


Dark Mode Color Properties

Note:

Dark Mode enabled Banner and Preference Center templates will pull from the default color palette unless customized in the Dark Mode Styling area of the template.



Section

Element Name

Banner

Background Color

Text Color

Link Color

Accept/Reject Button Color

Accept/Reject Button Text Color

Manage Preferences Button Color

Manage Preferences Button Text Color

Close Button Color

Close Button Text Color

Preference Center

Background Color

Text Color

Link Color

Always Active Text Color

Accept/Reject Button Color

Accept/Reject Button Text Color

Save Preferences Button Color

Save Preferences Button Text Color

Close Button Color

Close Button Text Color

Toggle Track Color (Active)

Toggle Track Color (Inactive)

Search Bar Background Color

Category Name Text Color

FAQs

What happens when the Mobile App template is not enabled?

The Mobile App will revert back to the Web Browser styles, which reflect a Light Mode color scheme.

What happens when the Mobile App Template is enabled, but Dark Mode is not enabled?

The Mobile App will revert back to Web Browser styles

What do Developers or QA need to do to configure Dark Mode?

Once enabled on the Template, Dark Mode settings will be automatically applied based on the device settings. Developers or QA do not need to perform any backend configuration.