Change color of highlights

[kennethleungty]

Any way to change the color of the highlighted text? The current light yellow is too bright and can make the text difficult to read

[Abhishek7Tech]

@kennethleungty Hi, I can change the color of the highlighted text? Which color do you prefer?

[kennethleungty]

I believe the current color is #FFFFB1. My personal preference is #FCF485. Would it be possible to have an option for users to choose between a few colors for the highlight?

[Abhishek7Tech]

Yes it's possible. We can make it happen.

[kennethleungty]

That would be great :+1:

[Abhishek7Tech]

@elias-sundqvist Hi, I would like to work on this issue and make the changes as requested by @kennethleungty if you allow.

[Abhishek7Tech]

@kennethleungty waiting for the permission from the admin of this repository. If he allows I will start working,

[iuryt]

It would be awesome to be able to choose different colors for different annotations though.

[elias-sundqvist]

@elias-sundqvist Hi, I would like to work on this issue and make the changes as requested by @kennethleungty if you allow.

Hi, sorry for not responding @Abhishek7Tech, I'm busy with work and can't spend much time on the plugin these days, but I'm happy to see other people contribute. Feel free to fork the repo and make a PR with any changes.

[sergioagp]

Is someone dealing this issue? I have analyze the source code and its easily implemented.

[dany-cmd]

+1 is someone dealing with this feature?

[elias-sundqvist]

Well, I'm not working on it at least, and I haven't heard anything more from @Abhishek7Tech My hope was always that it would be implemented by hypothes.is at some point and I could easily add that feature to the plugin just by updating hypothes.is. This issue has been open for a while though, and there is not much activity around it. It seems like highlight colors is not a priority for them.

If someone want's to implement the feature I'm happy to review and merge the PR, but I won't be implementing it myself in the foreseeable future.

[Abhishek7Tech]

Hi@dany-cmd , you can work on this issue.

[dany-cmd]

Hey @Abhishek7Tech, i just wanted to ask, if somebody is working on it. I do not have the knowledge to implement it myself 😅

[desaixie]

I had a bit of success on this but couldn't get it to work all the way. By opening the developer console with ctrl-shift-i and clicking down the HTML tree of the annotator, I was able to track down the annotations. They look like this <rect x="143.11458206176758" y="657.8021087646484" width="48.92338180541992" height="14.666666984558105" class="hypothesis-svg-highlight"></rect> inside a <div class="canvasWrapper"></div>. I also traced down these two files highlighter.js and highlights.scss that are responsible for the annotation highlights. I was able to manually change the fill color of the highlights to red in the developer console, which finally made the annotation highlights noticeable in the dark mode.

However, I had no success when trying to make this permanent using a .css snippet. I created an annotation-color.css snippet which I put into .obsidian/snippets/ and enabled it in the appearance setting.

.hypothesis-highlight.hypothesis-highlight.is-transparent {
  background-color: rgba(255, 0, 0, 0.5) !important; /* Red with opacity */
}
.hypothesis-svg-highlight {
  fill: rgba(255, 0, 0, 0.5) !important; /* Red with opacity */
}
.hypothesis-highlights-always-on .hypothesis-svg-highlight {
  fill: rgba(255, 0, 0, 0.5) !important; /* Red with opacity */
}
.canvasWrapper .hypothesis-highlight-layer .hypothesis-svg-highlight {
  fill: rgba(255, 0, 0, 0.5) !important; /* Semi-transparent red */
}
.canvasWrapper .hypothesis-highlight-layer .hypothesis-highlights-always-on .hypothesis-svg-highlight {
  fill: rgba(255, 0, 0, 0.5) !important; /* Semi-transparent red */
}

This might be caused by some silly mistakes since I'm not good with css and I'm new to Obsidian. While creating a button in the annotator could require some more work, all I need is to be able to change the annotation highlight color permanently in the javascript code or via a css snippet. Can anyone help me with this? @Abhishek7Tech @elias-sundqvist @sergioagp