Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add DarkReader plugin as an optional dark theme #908

Open
Jaifroid opened this issue Nov 6, 2022 · 2 comments
Open

Add DarkReader plugin as an optional dark theme #908

Jaifroid opened this issue Nov 6, 2022 · 2 comments

Comments

@Jaifroid
Copy link
Member

Jaifroid commented Nov 6, 2022

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
Copy link
Contributor

mossroy commented Nov 7, 2022

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
Copy link
Member Author

Jaifroid commented Nov 7, 2022

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.

@Jaifroid Jaifroid added this to the v3.7 milestone Nov 10, 2022
@Jaifroid Jaifroid modified the milestones: v3.7, v3.8 Jan 3, 2023
@Jaifroid Jaifroid modified the milestones: v3.8, v3.9 Apr 22, 2023
@Jaifroid Jaifroid modified the milestones: v3.11, v4.0 Nov 1, 2023
@Jaifroid Jaifroid modified the milestones: v4.0, v4.1 Feb 21, 2024
@Jaifroid Jaifroid modified the milestones: v4.1, v4.2 Jul 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants