How do I use dark and light themes?

Dark mode will be available for all custom designs.
The following switch is added to the interface, handling how the browser or OS pick up the theme.

This switch can always be toggled, without loss of custom colors set for the dark theme. ( it only handles how the survey should pick the color scheme )

The switch initializes the following behaviour:

Survey type	Switch turned OFF	Switch turned ON

Survey type

Switch turned OFF

Switch turned ON

Native SDK

The form opens in light mode. An app can force a dark color scheme:

Android method call

Globally:

Mopinion.initialise([,,,]ThemeMode.Dark)

iOS method calls

Globally:

MopinionSDK.configuration.setColorScheme(.dark)

Temporary per event:

var myConfig = MopinionSDK.configuration

myConfig.setColorScheme(.dark)

MopinionSDK.event([,,] configuration: myConfig)

The form opens in a color scheme based on the Android / iOS system mode: light scheme in light mode, dark scheme in dark mode.

An app can still override this behaviour on Android using the ThemeMode or on iOS using the configuration.setColorScheme().

Webview

The form will always show in light mode, unless the color scheme is forced with a url parameter ( info below )

The form will try to match the browsers colorscheme ( we check this with window.matchMedia('(prefers-color-scheme: dark)') ).
Forcing the color scheme will overwrite this behaviour.

Web

The form will always show in light mode, unless the color scheme is forced in the surveys options( info below )

The form will try to match the browsers colorscheme ( we check this with window.matchMedia('(prefers-color-scheme: dark)') ).
Forcing the color scheme will overwrite this behaviour.

Forcing the color scheme:

Web: For web, it will be possible to force the color scheme by adding the following option to the deployment options: colorScheme: 'light' | 'dark'
This option can be passed by adding the option in the Pastease snippet: Pastease.load(id, { survey: { colorScheme: 'dark' } })

For example:

(function(){var id="cQIhp2s8rTu7EkCqleAky0cfFz8az09H4OR6qRUh";var js=document.createElement("script");js.setAttribute("type","text/javascript");js.setAttribute("src","https://deploy.mopinion.com/js/pastease.js");js.async=true;document.getElementsByTagName("head")[0].appendChild(js);var t=setInterval(function(){try{Pastease.load(id, { survey: { colorScheme: 'dark' } });clearInterval(t)}catch(e){}},50)})();

Styling in the form editor:

All options that can be styled seperately for dark or light scheme are hinted with an icon. All other settings apply to both schemes.

Colors that are set in light mode, but not in dark mode will be inherited:

Example: Numeric rating color set in light mode ( the selected color will not be inherited from the dark mode )

Numeric rating in dark mode: ( the hover color is inherited from the light mode )