Add a Lights Off switch as fallback

Terminal mode does not work well for complicated / scanned PDFs. Use a
(dirty) color-inversion switch to handle them.

README.md

@@ -12,6 +12,8 @@ of (non-scanned) PDF files. Read it as if it's on a terminal screen!
 2. `cd` into the root directory and run `./install.sh`
 3. Follow onscreen instructions
 
+![Screenshot](plugin/images/screenshot.png)
+
 ## Notes
 
 Define your colors in `./plugin/colors.json` Default colors are taken from the
@@ -24,6 +26,10 @@ between Terminal mode and normal view.
 text changes only the font-size without touching their position. This may result
 in disjoint / overlapping text; **this is not a bug**.
 
+Terminal mode is not suitable for complicated PDFs (LaTeX maths, Indic scripts)
+because the text layer will mostly contain rubbish. For them as well as scanned
+PDFs use the Lights Off switch (which simply inverts the colors) as a fallback.
+
 ## Why *pdfless*?
 
 I love reading on the terminal. The dark background, the colors, the monospaced

plugin/pdfless.css

@@ -5,6 +5,7 @@
   --termColor: #f7f7f7;
   --termBG: #242424;
   --termHL: #b0b0b0;
+  --lightsOff-icon: url(../plugin/images/toolbarButton-lightsOff.svg);
   --termMode-icon: url(../plugin/images/toolbarButton-termMode.svg);
   --fontInput-icon: url(../plugin/images/secToolbarButton-fontInput.svg);
   --colorInput-icon: url(../plugin/images/secToolbarButton-colorInput.svg);
@@ -14,7 +15,8 @@
 }
 @media (prefers-color-scheme: dark) {
   :root {
-    --termMode-icon: url(../plugin/images/toolbarButton-termMode-dark.svg);
+  --lightsOff-icon: url(../plugin/images/toolbarButton-lightsOff-dark.svg);
+  --termMode-icon: url(../plugin/images/toolbarButton-termMode-dark.svg);
   --fontInput-icon: url(../plugin/images/secToolbarButton-fontInput-dark.svg);
   --colorInput-icon: url(../plugin/images/secToolbarButton-colorInput-dark.svg);
   }
@@ -72,6 +74,9 @@
   content: var(--colorInput-icon);
   color: var(--termColor) !important;
 }
+.toolbarButton.lightsOff::before, .secondaryToolbarButton.lightsOff::before {
+  content: var(--lightsOff-icon);
+}
 .toolbarButton.termMode::before, .secondaryToolbarButton.termMode::before {
   content: var(--termMode-icon);
 }

plugin/pdfless.html

@@ -1,4 +1,7 @@
 <template id="toolbarAddon">
+  <button id="lightsOff" class="toolbarButton lightsOff hiddenLargeView" title="Toggle Lights" tabindex="29">
+    <span>Lights Off</span>
+  </button>
   <button id="termMode" class="toolbarButton termMode hiddenLargeView" title="Toggle Terminal Mode" tabindex="30">
     <span>Terminal Mode</span>
   </button>
@@ -27,11 +30,20 @@
     ><label for="imageEnable" class="toolbarLabel">Images</label>
   </div>
   <div class="horizontalToolbarSeparator"></div>
+  <button id="secLightsOff" class="secondaryToolbarButton lightsOff visibleLargeView" title="Toggle Lights" tabindex="49">
+    <span>Lights Off</span>
+  </button>
   <button id="secTermMode" class="secondaryToolbarButton termMode visibleLargeView" title="Toggle Terminal Mode" tabindex="50">
     <span>Terminal Mode</span>
   </button>
 </template>
 
+<style id="lightsOffTheme">
+  .pdfViewer {
+    filter: invert(86%);
+  }
+</style>
+
 <style id="termModeTheme">
   .page {
     background-color: var(--termBG) !important;

plugin/pdfless.js

@@ -22,6 +22,7 @@ async function pdfLessInit() {
     toolbar.prepend(docFrag.getElementById("toolbarAddon").content);
     let secToolbar = document.getElementById("secondaryToolbarButtonContainer");
     secToolbar.prepend(docFrag.getElementById("secToolbarAddon").content);
+    document.head.appendChild(docFrag.getElementById("lightsOffTheme"));
     document.head.appendChild(docFrag.getElementById("termModeTheme"));
     document.head.appendChild(docFrag.getElementById("termModeFont"));
   }
@@ -44,12 +45,14 @@ function getPdfLessConfig() {
     textColors: {},
     docStyleElem: document.documentElement.style,
     colorInputElem: document.getElementById("colorInput"),
+    lightsOffCSS: document.getElementById("lightsOffTheme"),
     termModeCSS: document.getElementById("termModeTheme"),
     termModeFontCSS: document.getElementById("termModeFont")
   };
 }
 
 function pdfLessLoad(config) {
+  config.lightsOffCSS.disabled = true;
   config.termModeCSS.disabled = config.termModeFontCSS.disabled = true;
   if (config.termColors.background) {
     config.docStyleElem.setProperty("--termBG", config.termColors.background);
@@ -99,9 +102,14 @@ function pdfLessLoad(config) {
   document.getElementById("fontEnlarge").onclick = function(e) {
     termFontResize(1 + config.fontScaleFactor);
   }
+  document.getElementById("lightsOff").onclick = toggleLightsOff;
+  document.getElementById("secLightsOff").onclick = toggleLightsOff;
   document.getElementById("termMode").onclick = toggleTermMode;
   document.getElementById("secTermMode").onclick = toggleTermMode;
 
+  function toggleLightsOff() {
+    config.lightsOffCSS.disabled = !config.lightsOffCSS.disabled;
+  }
   function toggleTermMode() {
     const toTermMode = config.termModeCSS.disabled;
     if (toTermMode) {