Add per-user page tone modes to reader

public/reader.js

@@ -45,6 +45,36 @@
   const shift = new Set(D.progress && D.progress.v === D.version ? D.progress.shift : []);
   const zkey = () => (mode === 'flow' && ttb ? 'strip' : mode);
   const zoom = () => S.zoom[zkey()] || 1;
+  const tones = [
+    { id: 'original', label: 'Original' },
+    { id: 'inverted', label: 'Inverted' },
+    { id: 'sepia', label: 'Sepia' },
+    { id: 'dim', label: 'Dim' },
+    { id: 'extra-dim', label: 'Extra dim' },
+  ];
+  const toneButton = $('#page-tone');
+  const toneName = id => tones.find(tone => tone.id === id)?.label || 'Original';
+  function applyTone(id) {
+    S.pageTone = tones.some(tone => tone.id === id) ? id : 'original';
+    canvas.dataset.pageTone = S.pageTone;
+    toneButton.dataset.pageTone = S.pageTone;
+    toneButton.textContent = `Tone: ${toneName(S.pageTone)}`;
+    toneButton.title = `Page images: ${toneName(S.pageTone)}. Click for the next tone; controls and theme stay unchanged.`;
+    toneButton.setAttribute('aria-label', toneButton.title);
+  }
+  applyTone(S.pageTone);
+  let savedTone = S.pageTone, toneSave = Promise.resolve(), toneChange = 0;
+  function cycleTone() {
+    const next = tones[(tones.findIndex(tone => tone.id === S.pageTone) + 1) % tones.length];
+    applyTone(next.id);
+    const change = ++toneChange;
+    toneSave = toneSave.catch(() => {}).then(async () => {
+      await api('api/settings', { pageTone: next.id });
+      savedTone = next.id;
+    }).catch(() => {
+      if (change === toneChange) { applyTone(savedTone); toast('Could not save page tone'); }
+    });
+  }
 
   const pr = D.progress;
   if (pr && !(pr.done && pr.p >= pr.n - 1)) {
@@ -571,6 +601,7 @@
   ver.hidden = D.versions.length < 2;
   ver.onchange = () => { saveProgress(true); location.href = readUrl(D.manga.id, D.chapter.id, ver.value); };
   for (const b of modeBtns) b.onclick = () => { if (b.dataset.mode !== mode) setMode(b.dataset.mode, true); };
+  toneButton.onclick = cycleTone;
   $('#shift').onclick = toggleShift;
   $('#zoomout').onclick = () => stepZoom(-1);
   $('#zoom').onclick = () => setZoom(1);