Customizing Hyperlink Color in Dark Theme

Joplin 2.8.8. (prod, darwin)
macOS Big Sur

Hello, apologies if this has been asked and answered already, I did try to search first and read through the results but still can't seem to find the answer to the following: How do I customize the hyperlink color in WYSIWYG editor? Previously, I've followed tutorials here and managed to tweak font-family and other elements in userstyle.css, this time I'd like to learn how to customize hyperlink colors too, please. Here's a screenshot of a note snippet (sorry for outside link, uploading the image returns an error): https://i.imgur.com/12roC0C.png

I'm trying to change the violet color into something else. If you could please point me in the right direction or give tips or advice how to go about it, I'd really appreciate it. Thanks in advance.

You should be able to change it by styling a.

e.g.

a {
    color: #ff0000;
}

Thank you, Daeraxa. Sorry about bothering you and other Joplin mods with
that "delete comment" request; I'm used to quickly deleting something I
just wrote on a board and soon after regretted :wink: Btw, is there a Delete
button/link I could use in the future, so as not to bother you hardworking
folks with inane requests like mine? I tried looking but I might have
missed it.

Cheers! Have a good one.

There is but I think it is time limited, at least at low the low discourse trust levels, its something like a day for new users and a month for regular ones. If it was something sensitive then we would of course delete it but I don't think it was an unreasonable question by any means and is exactly why the forum and community exists.

Thanks! Your reply is reassuring; I mistakenly thought basic questions like the one I posted would fit better in a Google search, and the intermediate to expert users, or at least those with a familiarity with CSS and HTML, should post here (pardon my bad first impression).

Anyway, I had no luck tweaking userstyle.css with your suggested fix; I must be doing it wrong. The targeted links' colors are still unchanged. Can you take a peek please? Here's my file in case you have time:

/* For styling the rendered Markdown */
body {
font-family: "Rooney", serif;
font-size: 14px;
color: #a0a0a0;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-align: left;
letter-spacing: 0px;

/* line-height: 20px; */
line-height: 1.42em !important;
margin-top: 25px !important;
margin-left: 15px !important;
margin-right: 15px !important;
max-width: auto !important;

a {
color: #568203;
}

Any other thing I change in the above lines, except "a {" , will have a noticeable effect. I'm not sure what I've missed.

Is that exactly what you have in the file? In which case you have a missing } to close off the body section.
Otherwise it seems to work fine.

Ah, there it is, the simple solution. Thank you so much, Daeraxa, you sir/ma'am are a God amongst men! Yes, this worked, finally. Such a small but critical oversight.

Now going to look for a way to easily switch between the userstyles for Dark and Light themes without having to open the .css file and manually change font color values (the way Obsidian does :wink: )

Thanks again, cheers!

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.