Dark or light mode handling

[razzeee]

Expected behaviour

The tool should print, if it's using a dark desktop or a light desktop (and therefore chrome)

It would also be nice, to pass parameters, to change which one it's using.

Actual behaviour

There is no way to tell, if it scans the light or the dark version of my website

Steps to reproduce

1. Run npx pa11y https://flathub.org
2. Try to figure out if it ran on the light or the dark variant

Environment

  System:
    OS: Linux 6.6 Fedora Linux 39 (Workstation Edition)
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
    Memory: 13.89 GB / 30.58 GB
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.10.0 - /tmp/fnm_multishells/80861_1706093862733/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.2.3 - /tmp/fnm_multishells/80861_1706093862733/bin/npm
  pa11y: 7.0.0

[aarongoldenthal]

My experience is for troubleshooting issues like this, using the --screen-capture <path> CLI argument or screenCapture configuration option lets you see the page to know exactly what Pa11y is analyzing. In this case you'll see that Pa11y runs Chrome with the default value, which is prefers-color-scheme: light.

I don't know of a way to change this through the chromeLaunchConfig settings (maybe someone else does). Puppeteer does allow this to be changed through the page API, so without a Pa11y change it might require something like this example, which manually creates the browser and page so that the page can be manipulated before passing to Pa11y.

import puppeteer from 'puppeteer';
import pa11y from 'pa11y';

const runPa11y = async (url, colorScheme) => {
    const page = await browser.newPage();
    await page.emulateMediaFeatures([
        { name: 'prefers-color-scheme', value: colorScheme }
    ]);
    const results = await pa11y(url, {
        browser,
        page,
        screenCapture: `pa11y-${colorScheme}.png`
    });
    await page.close();
    return results;
};

const url = 'https://github.com/pa11y/pa11y/';
const testCases = [
    { url, colorScheme: 'dark' },
    { url, colorScheme: 'light' }
];

const browser = await puppeteer.launch();
const results = await Promise.all(
    testCases.map(async ({ url, colorScheme }) => {
        await runPa11y(url, colorScheme);
    })
);
// do something with results
await browser.close();

It does seems like adding a dedicated option to simplify this would be beneficial, especially for something many users are likely to want.

[ptmkenny]

Chome seems to have a flag feature (flags and features are not the same) for forcing dark mode as described here:

--enable-features=WebContentsForceDark

Is there a way to make use of that with pa11y?