Dark Mode testing with Appium

Dark mode is a setting, available on both Android and iOS, which toggles the interface appearance of the phone to use either the standard light mode setting or a dark mode.

When dark mode is enabled, the phone will switch to a dark background with lighter foreground colors, which enables better viewing in low-light conditions.

Changing Dark Mode

This example will use mobile: setAppearance to set the appearance to dark (dark mode).

const { remote } = require('webdriverio');

const capabilities = {
  'platformName': 'Android',
  'appium:app': 'https://testingbot.com/appium/sample.apk',
  'appium:deviceName': 'Pixel 8',
  'appium:platformVersion': '14.0',
  'appium:automationName': 'UiAutomator2',
  'tb:options': {
    'name': 'Dark Mode Test',
    'realDevice': true
  }
};

const driver = await remote({
  hostname: 'hub.testingbot.com',
  port: 443,
  protocol: 'https',
  path: '/wd/hub',
  user: 'api_key',
  key: 'api_secret',
  capabilities
});

// Enable dark mode
await driver.execute('mobile: setAppearance', { style: 'dark' });

const inputA = await driver.$('~inputA');
await inputA.setValue('10');

const inputB = await driver.$('~inputB');
await inputB.setValue('5');

const sum = await driver.$('~sum');
const value = await sum.getText();
console.assert(value === '15', 'Sum should be 15');

await driver.deleteSession();

Make sure to always stop your test (driver.deleteSession()), otherwise it will continue running, leading to a timeout.

const { remote } = require('webdriverio');

const capabilities = {
  'platformName': 'iOS',
  'appium:app': 'https://testingbot.com/appium/sample.ipa',
  'appium:deviceName': 'iPhone 15',
  'appium:platformVersion': '17.0',
  'appium:automationName': 'XCUITest',
  'tb:options': {
    'name': 'Dark Mode Test',
    'realDevice': true
  }
};

const driver = await remote({
  hostname: 'hub.testingbot.com',
  port: 443,
  protocol: 'https',
  path: '/wd/hub',
  user: 'api_key',
  key: 'api_secret',
  capabilities
});

// Enable dark mode
await driver.execute('mobile: setAppearance', { style: 'dark' });

const inputA = await driver.$('~inputA');
await inputA.setValue('10');

const inputB = await driver.$('~inputB');
await inputB.setValue('5');

await driver.deleteSession();

Make sure to always stop your test (driver.deleteSession()), otherwise it will continue running, leading to a timeout.