Add per-user page tone modes to reader

tools/test-reading-ui.js

@@ -81,7 +81,36 @@ module.exports = async function (url, cookie) {
     assert.equal(await page.locator('#readclock .clock-time').textContent(), pausedTime, 'Idle time still accrued');
     await page.mouse.move(20, 200);
     await page.waitForFunction(() => document.querySelector('#readclock .clock-label')?.textContent.includes('Reading'));
+    await load();
+    const background = await page.locator('body').evaluate(body => getComputedStyle(body).backgroundColor);
+    const toneButton = page.locator('#page-tone');
+    await toneButton.click();
+    for (const viewMode of ['flow', 'page', 'book']) {
+      await page.locator(`#modes button[data-mode="${viewMode}"]`).click();
+      const appearance = await page.evaluate(() => ({
+        tone: document.querySelector('#canvas').dataset.pageTone,
+        image: getComputedStyle(document.querySelector('#canvas .pg img')).filter,
+        controls: getComputedStyle(document.querySelector('#bot')).filter,
+        background: getComputedStyle(document.body).backgroundColor,
+      }));
+      assert.equal(appearance.tone, 'inverted');
+      assert.match(appearance.image, /invert\(1\)/);
+      assert.equal(appearance.controls, 'none');
+      assert.equal(appearance.background, background);
+    }
+    for (const [tone, filter] of [['sepia', /sepia/], ['dim', /brightness\(0\.7\)/], ['extra-dim', /brightness\(0\.45\)/]]) {
+      await toneButton.click();
+      const appearance = await page.evaluate(() => ({ tone: document.querySelector('#canvas').dataset.pageTone,
+        filter: getComputedStyle(document.querySelector('#canvas .pg img')).filter }));
+      assert.equal(appearance.tone, tone);
+      assert.match(appearance.filter, filter);
+    }
+    await page.waitForFunction(async () => (await (await fetch('api/me')).json()).settings.pageTone === 'extra-dim');
+    await load();
+    assert.equal(await page.locator('#canvas').getAttribute('data-page-tone'), 'extra-dim');
+    await toneButton.click();
+    await page.waitForFunction(async () => (await (await fetch('api/me')).json()).settings.pageTone === 'original');
     assert.equal(errors.length, 0, errors.join('\n'));
-    console.log('PASS: mobile flow reader fast coverage, 60% exit save with pulse in flight, lookup exclusion, bounded pulse frequency, 30-second idle pause and input resume');
+    console.log('PASS: mobile reading clock and five page tones across Flow, Page and Book without changing the theme');
   } finally { await context.close(); await browser.close(); }
 };