kiwix / kiwix-js

Fully portable & lightweight ZIM reader in Javascript
https://www.kiwix.org/
GNU General Public License v3.0
300 stars 124 forks source link

Add DarkReader plugin as an optional dark theme #908

Open Jaifroid opened 1 year ago

Jaifroid commented 1 year ago

I have been experimenting (successfully) in KJSW with the open-source DarkReader plugin: https://github.com/darkreader/darkreader. It is a simple JavaScript dependency (single file). It would work only in ServiceWorker Mode. All that is needed is to inject the script into the HTML document, and it analyses the document and generates specific CSS for a dark theme. The advantage of this is that maintenance of it is crowd-sourced, and that there are various options that can be tweaked.

There is one potential disadvantage: to work without the screen flashing to white between each page load, it may be necessary to inject the script into the HTML before it is rendered by the browser, which means adding it at the point at which the HTML is received from the back end. It may be possible to avoid this by hiding the document until the script is added through DOM methods, and then allowing it to render. Either way, I think it can be injected in a way that would not interfere with #870 (i.e. using new libzim WASM).

I would propose including this alongside our exisitng Dark Theme options.

mossroy commented 1 year ago

It might indeed be better to use an existing tool. However, I don't think injecting code in the HTML stream is a good idea in SW mode. It takes the risk to inject it in files that should not have it, or to break them. I understand the flashing issue, and it might be complicated to avoid it.

However, I see there are different generation modes (maybe the less smart ones can be applied without having to wait for the whole page to be loaded), and some APIs to interact programmatically with it

Jaifroid commented 1 year ago

Thank you @mossroy, I agree, and from my experiments I think it should be possible to add the JS using DOM methods only before the page renders, and that this may be sufficient. Yes, there are various modes that require less (or more) processing power.