Dark mode support

From version 4.8, Digital In-app includes full support of dark mode, where a targeted survey form's appearance is automatically modified to match the operating system's current mode. Usually the mode is light or dark, and is adjusted depending on either the user's preference or the time of day. For example if dark mode is enabled for a user who is targeted at night, the survey form is displayed using darker colors automatically. This feature ensures that the survey's color scheme better matches the current mode, providing a more seamless user experience. Eliminate the need for duplicate surveys by allowing a single survey to adjust to the mode theme, rather than building surveys both for dark and standard modes.

Important: This feature is available upon request. Ask your Medallia expert to file a Feature activation request with Medallia Support.

General information

This feature is supported on Android and iOS, and all of the cross platform frameworks.
When dark mode is enabled, all parts of the survey are adjusted depending on the current mode. This means that invites, all survey form elements, and any Thank you page all adjust their color scheme automatically depending on the mode.
The detection of the operating system's current mode is automatic by default. To manually toggle between different modes use the setCustomAppearance function.

Enable dark mode

Once dark mode has been enabled on a property, configure the surveys you want to support dark mode.

To configure a survey to support dark mode:

Hover the cursor over the survey in one of the views. The three dot button that opens the menu with options is displayed.
From the menu, click the Enable dark mode option.

Once the survey is set to enable dark mode, when the survey is targeted it's display automatically matches the operating system's mode. To revert this change, repeat the process and click the Disable dark mode option.

Customize theme colors

With dark mode support enabled, options are available to customize the colors used when dark mode is detected. For example customize the colors used by the different themes to better suit an app's color scheme.

Change the colors used for the survey form's header.

Options to configure the colors used for the header in dark mode.

Change the colors used for the Thank you prompt.

Options to configure the colors used for the thank you prompt in dark mode.

Advanced users can optionally customize the CSS for further control.

New default Dark Mode design

While running the survey form in dark mode, a basic dark mode design is applied to the survey by default. The color palettes used in the default dark mode design are:

Core Element Color: white
Core Secondary Color: #8E95A4
Survey Background Color: #121826
Component Core Background Color: #242C3C
Rating Squires Border Color: #121826
Sliders Background Color: #242C3C
Text Color: #CED4DA

Custom CSS for dark mode

When the dark mode feature is enabled, if you are using custom CSS you need to add a dark mode CSS class to your CSS file. For example these CSS variables can be customized:

.darkMode{
    --palette-action-hover: rgb(0, 0, 249);
    --palette-core-canvas: #000000;
    --palette-core-secondary: #1d45ff61; 
    --palette-core-component-background: #000000;
    --palette-core-outline: #0047ec;
    --palette-typography-body: #ced4da;
    --palette-core-primary: #FFFFFF;
    --palette-typography-user-input: #ffffff;
}

See CSS customization.