obsidian-annotator
obsidian-annotator copied to clipboard
elias-sundqvist
Change color of highlights
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
@kennethleungty Hi, I can change the color of the highlighted text? Which color do you prefer?
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?
@elias-sundqvist Hi, I would like to work on this issue and make the changes as requested by @kennethleungty if you allow.
@kennethleungty waiting for the permission from the admin of this repository. If he allows I will start working,
It would be awesome to be able to choose different colors for different annotations though.
@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.
Is someone dealing this issue? I have analyze the source code and its easily implemented.
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.
Hey @Abhishek7Tech, i just wanted to ask, if somebody is working on it. I do not have the knowledge to implement it myself 😅
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
