How do I edit the appearance of a link?

[ReaderGuy42]

I would like to change the way links [[ ]] look. Using @pseudometa’s theme as a basis, I’m trying to change them.

For example, to get a blue highlight, I put bold around highlights, so **==hello==** would appear blue, with this code:

span.cm-strong.cm-highlight {
    font-style: initial;	
    background-color: var(--highlight-blue);
    color: #222;
}

body > .app-container div.markdown-preview-view strong > mark {
	font-style: initial !important;
	background-color: var(--highlight-blue);
	color: #222;
}

Now I’d like to apply this logic to links, but I can’t figure it out. I tried replacing cm-strong.cm-highlight with cm-link.cm-highlight but that doesn’t work.

I’m trying to use the console/elements to view what class the links use/are, but I’m not sure I’m using it right, or understanding it.
What cm- kind of thing would I have to use for this?

Thanks!

[ReaderGuy42]

Sorry for the hasty self-reply, but I figured it out. I had missed the (probably obvious) button on the console to inspect elements (I’m new to this). So I figured out that I need to use cm-highlight.cm-hmd-internal-link And now that works

Edit: In case anyone reads this, I’m still having trouble with this after all. It seems I can have the color applied to highlit links either in edit mode OR in preview mode, but not both.

span.cm-highlight.cm-hmd-internal-link {
    font-style: initial;	
    background-color: var(--highlight-link);
    color: #222;
}

body > .app-container div.markdown-preview-view mark > hmd-internal-link {
	font-style: initial !important;
	background-color: var(--highlight-link);
	color: #222;
}

If I change the last hmd-internal-link to just internal-link the color is applied in preview mode, but NOT in editor mode.

I tried just copying that last block and having one with the hmd and one without but that didn’t work.

Any ideas?
Thanks!

[Angel]

There will be differences, but these are the selectors I use for reading and editing modes:

/* << EDITING link color INTERNAL >>  */
.cm-s-obsidian span.cm-hmd-internal-link {
  font-weight: 400;
  color: var(--linkpink)  !important;
}

/* << READING link color INTERNAL >>  */
.markdown-preview-view .internal-link {
  font-weight: 400;
  color: var(--linkpink)  !important;
}

Angel

[ReaderGuy42]

Perfect, thank you!!
For me it looks like this:

span.cm-highlight.cm-hmd-internal-link {
  /*  font-style: initial; */	
    background-color: var(--highlight-link);
    color: #222 !important;
}

body > .app-container div.markdown-preview-view mark > .internal-link {
     background-color: var(--highlight-link);
     color: #222 !important;
}

[Angel]

Thanks for sharing.

Angel