Dark mode is a display setting for user interfaces (UI) to toggle between either showing dark text on a light background, or showing light text on a dark background. It is designed to reduce eye strain, particularly in low-light environments, by minimizing the amount of light emitted by the device's screen.
Switching between light mode and dark mode is often a preferred option for people who spend a lot of time using electronic devices, as it can reduce the amount of blue light emitted by the screen at night, which can interfere with sleep patterns.
Dark mode settings are available in most modern handheld devices. It aids in extending the battery life of these devices, especially with OLED or AMOLED screens, as these displays use less power to produce black pixels than white ones.
Why should I do dark-mode testing?
Automated testing on mobile devices with dark mode settings can help ensure that an application or website is fully functional and optimized for both light and dark display modes.
Testing both modes can help identify any display issues or user experience problems that may arise when switching between the modes. For example, you want to make sure that the color of your text is always legible, depending on the background of the text. If your app uses a black color for text, but switches to a dark background in dark mode as well, the text may no longer be legible.
By utilising automated dark mode testing, you can test for certains things such as:
-
Lack of contrast:
Some color combinations may be less visible or distinguishable in a dark mode setting, or in light-mode (default mode).
-
Implementation required:
Check all screens in your mobile app to see if dark mode is implemented correctly. You may have forgotten to add dark mode to some parts of your app.
-
Automatically switch dark/light mode:
Make sure your mobile app knows when to switch to dark or light mode, depending on the Operating System's preferences.
How to run dark mode and light mode tests with Appium?
Appium is an open-source mobile testing framework that allows you to run automated tests against native mobile iOS and Android apps.
With Appium, you can use mobile:setAppearance for iOS (XCUITest) and either specify a style of dark or light:
executeScript("mobile:setAppearance", "{style: 'dark'}")You can specify either
darkorlightas a style
On Android, you can use the following command to toggle dark mode on the device:
adb shell cmd uimode night yesWhere you specify either yes or no to change the dark mode settings.
Common issues when implementing dark mode in a mobile app.
Below are some of the most common issues when first implementing dark mode in a mobile iOS or Android app.
-
Insufficient contrast:
Some UI elements may not have enough contrast against a dark or light background, making these difficult to read or interact with.
-
Incompatible graphics
Certain graphics used in your app may not look as good in dark mode as they would in light mode. You may have to change the graphic to make sure it looks good in both modes.
-
Third-party libraries
Some third party libraries that your app might be using, may not (yet) support dark mode. This might cause visible glitches or inconsistencies in your UI.
Using TestingBot to test dark mode for your native mobile app.
TestingBot provides a grid of physical mobile devices and emulators/simulators, which all come equipped with the possibility to enable or disable dark-mode.
By simple using mobile: setAppearance with the JavascriptExecutor functionality of Appium, you can enable or disable dark mode during your automated testing.
See the example below on how to run an automated Appium test on TestingBot, where we change the device to use Dark mode at the start of the test.
var wd = require('wd');
var assert = require('assert');
var asserters = wd.asserters;
var testingbotKey = "key",
testingbotSecret = "secret";
desiredCaps = {
'name': 'My First App Test',
'deviceName' : 'Galaxy S8',
'platformName': 'Android',
'version': '9.0',
'app' : 'https://testingbot.com/appium/sample.apk',
'realDevice': true
};
driver = wd.promiseRemote("http://" + testingbotKey + ":" + testingbotSecret + "@hub.testingbot.com/wd/hub");
driver
.init(desiredCaps)
.then(function () {
return driver.execute('mobile: setAppearance', [{ 'style': 'dark' }]);
})
.then(function () {
return driver.waitForElementByAccessibilityId('inputA', asserters.isDisplayed && asserters.isEnabled, 30000);
})
.then(function (inputA) {
return inputA.sendKeys("10");
})
.then(function () {
return driver.waitForElementByAccessibilityId('inputB', asserters.isDisplayed && asserters.isEnabled, 30000);
})
.then(function (inputB) {
return inputB.sendKeys("5");
})
.then(function () {
return driver.waitForElementByAccessibilityId('sum', asserters.isDisplayed && asserters.isEnabled, 30000);
})
.then(function (textOutput) {
return textOutput.text().then(function(value) {
if (value === "15")
assert(true);
else
assert(false);
});
})
.fin(function() { return driver.quit(); })
.done();By using a combination of TestingBot's extensive device grid and Appium's automated testing capabilities, you can test to make sure your app looks and functions correctly in dark mode on a wide variety of Android and iOS phones and tablets.
