Add per-user page tone modes to reader

public/settings.js

@@ -31,6 +31,13 @@
     h('option', { value: 'page' }, 'Always Page (one page at a time)'),
     h('option', { value: 'book' }, 'Always Book (two pages side by side)'));
   startMode.value = S.startMode;
+  const tone = h('select', { onchange: e => save({ pageTone: e.target.value }) },
+    h('option', { value: 'original' }, 'Original'),
+    h('option', { value: 'inverted' }, 'Inverted'),
+    h('option', { value: 'sepia' }, 'Sepia'),
+    h('option', { value: 'dim' }, 'Dim (70% brightness)'),
+    h('option', { value: 'extra-dim' }, 'Extra dim (45% brightness)'));
+  tone.value = S.pageTone;
   const LABEL = { flow: 'Flow', page: 'Page', book: 'Book', strip: 'Webtoon flow' };
   const zooms = () => Object.keys(LABEL).map(k => `${LABEL[k]} ${Math.round((S.zoom[k] || 1) * 100)}%`).join(' · ');
   const zoomText = h('span', { class: 'muted' }, zooms());
@@ -72,6 +79,8 @@
     check('skipCovers', 'Skip chapter cover pages'),
     check('flowPageGap', 'Show a gap between pages in Flow mode',
       'Turn this off for continuous webtoon artwork or text that crosses page edges.'),
+    h('label', { class: 'field' }, h('span', {}, 'Page tone'), tone,
+      h('div', { class: 'muted small' }, 'The reader button cycles through these choices. Only page artwork changes; the site theme and controls stay as they are.')),
     h('div', { class: 'field' }, h('span', {}, 'Page zoom'), zoomText, ' ',
       h('button', { class: 'btn small', onclick: async () => { await save({ zoom: {} }); zoomText.textContent = zooms(); } }, 'Reset to fit'),
       h('div', { class: 'muted small' }, '100% = the page fits the screen. Change it in the reader with Ctrl + mouse wheel, a pinch, or the + / - keys.'))));