How to change contrast of highlights in typst app?

Questions
1

I’m using dark mode in browser typst app. The search function highlight is pretty hard to see, so I spent enormous amount of time locating the text I searched in the window. Is there a way how to increase the highlight contrast in the app? Couldn’t find it in the settings.

If there’s no such setting, I’d like to propose increasing the contrast and/or adding a highlight animation to point readers attention to the highlighted text.

2

#ffff0054 looks pretty good to me. You can use any CSS modification plugin (like Stylus) and use something like this:

@keyframes searchHighlight {
  0%, 66% {
    opacity: 0.5;
  }
  33%, 100% {
    opacity: 1;
  }
}

.cm-searchMatch {
  animation: searchHighlight 1s ease-in-out;
  background-color: #ffff007f !important;
}
1 Like
3

Thanks for the reply, sadly I have no clue how to implement CSS plugins :sweat_smile: Hopefully the devs will address this feature for us mortals eventually.

4

I linked to the working browser plugin. Just install it and add CSS snippet to the typst.app domain/URL.

5

Maybe this will come across as rude but that isn’t my intention. It probably does count as a rant.

The power to fix this problem right now, without waiting on the devs is just outside of your current abilities. To achieve it you’ll need to learn a couple new skills, specifically how to install the Stylus extension, and how to add a new style to it.

@Andrew already linked to the extension website. You can also (probably) find it in your browser’s extension library (here it is for Firefox).

The style itself was also provided for you.

I won’t give you the steps in excruciating detail since I think that goes against the “you can do it if you try” message I’m trying to convey*. But the basic process goes something like this:

  • Install the extension
  • Open a Typst project
  • Click on the Stylus extension icon and click Manage
  • Somewhere on the page there is a + icon that will create a new style. Click that
  • Paste in the style that Andrew posted
  • At the top of the page change it so this style is only applied to pages on the domain typst.app
  • Give this a meaningful name (top left of page)
  • Save

Go back to your Typst project, search for some text, click on the Stylus icon again. There should be a checkbox next to the name you gave. If you toggle it on/off a few times you should see something changing on the page.

The feature request that matters to you, but may not matter to another soul on the planet, is now “implemented”.

If you got this to work, congratulations. Not only did you solve this single problem you are having, but you also learned something - extended what you as an individual are capable of.

To sum it up, you will be surprised at what you can achieve if you try.

I realize not everyone has the same experience or skills, and lack of time can restrict even more than those two, but I think I have more faith in the abilities of people on this forum asking questions than they do in themselves. People don’t know how to do things, that’s the default. But we also can make attempts, notice behaviours, learn skills, and just play around with things.

* Plus I am not invested enough in solving your problem to spend the time writing out the steps like that.

2 Likes
6

Alright thanks a lot I can try :sweat_smile:

7

Nah, you can just bring up the extension popup, and on the required webpage it will give you an option to create a style for the specific path/URL depth, basically separated by forward backslashes (and periods for subdomains). So you can do one less step.

1 Like
8

Actually, at least with Dark Reader, I did have issues finding stuff if there are any matches at all (for a while now). So now I’m using this style. I wonder if flashing will be more annoying or helpful after an extended use. Also, can just change color to red, which should be very noticeable, without any animation.