Add ability to invert colors on the preview page in a web browser
Andrew15-5 opened this issue · 11 comments
Since Dark Reader is disabled... Well, I can't use it anymore (unless I change the source code). I use Okular to view PDF files, which has 3 color inversion methods that are generally look good. For preview, I'm currently using MuPDF which has one basic color inversion shortcut. With typst-preview I'm basically stuck with eye-burning white background (although I did found a cool extension that dims everything, including typst-preview and videos: https://mehmetb.github.io/dimmer/). The only workaround (besides modifying index.html) is to always include #set page(fill: black); #set text(fill: white) (which won't fix bright images).
I was thinking about either adding a flag --no-ignore-dark-reader (which is a pretty easy fix). Or create (find) some color inversion tool for the preview (or maybe some simple CSS rules).
you can set background color and text color in typst sourcecode, or inject your own css.
we prefer present the compile result "as-is", the same as official webapp. although you can customize it using custom css rules through browser extensions or something
adding a inversion filter might make sense, though
perhaps using something like this: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert . we can add a cli flag to control this. as for dark reader, i remember it cause problems and doesnt correctly recognize texts so we disable it.
as for dark reader, i remember it cause problems and doesnt correctly recognize texts so we disable it.
I don't know what are you talking about. I switched Dark Reader to Filter/Filter+ mode and the background was pitch black and the text was pure white. In Dynamic mode, text is dark and barely visible.
perhaps using something like this: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert
Yes, this is exactly what I had in mind (I've encountered it when was creating a patch for the Dark Reader). And it looks like every browser supports it: https://caniuse.com/?search=invert.
I don't know what are you talking about. I switched Dark Reader to Filter/Filter+ mode and the background was pitch black and the text was pure white. In Dynamic mode, text is dark and barely visible.
thanks for elaborating this. we previously received reports of "preview is blank" from multiple darkreader users.
I switched to pre dark reader commit and preview was indeed blank. But when I allowed the plugin in the most recent commit, then the preview was working as expected. I don't know if the problem was specifically with the dark reader.
A simple work-around can be achieved by inserting filter: invert(1); to index,html.
The file is at ~/.vscode/extensions/mgt19937.typst-preview-0.9.2-linux-x64/out/frontend/index.html for linux.
...if you are using VS Code. Otherwise, you can modify source in several different ways to achieve the more or less same result.
A simple work-around can be achieved by inserting
filter: invert(1);toindex,html.The file is at
~/.vscode/extensions/mgt19937.typst-preview-0.9.2-linux-x64/out/frontend/index.htmlfor linux.
it seems that it does not work any more...
A simple work-around can be achieved by inserting
filter: invert(1);toindex,html.The file is at
~/.vscode/extensions/mgt19937.typst-preview-0.9.2-linux-x64/out/frontend/index.htmlfor linux.
it seems that it does not work any more...
you dont need this now. see pr link above