Setting separate internal and external link colors in 1.5.11

[WrenM]

What I’m trying to do

I have a CSS snippet, which set my internal links blue and external links pink before Obsidian 1.5.11. However, with the release of 1.5.11, my internal links have turned pink just like my external links.

I would be satisfied with a solution that only restores the colors in edit mode, as I don’t use reading mode.

Here are the relevant parts of the CSS snippet:

/* Internal links */
.cm-s-obsidian span.cm-hmd-internal-link {
  color: #7593ce;   /* Blue */
}

/* External links */
.cm-s-obsidian span.cm-link,
a {
  color: Pink;
}

Things I have tried

I searched the help docs for style settings for CSS variables for links, but they don’t appear to define separate variables for internal and external links. They appear to just lump them together, so that they can’t be set to different colors.

I searched the forum for threads concerning CSS after the release of 1.5.11. I was able to find one thread with a similar topic. However, a moderator is browbeating the original poster, so I’d rather keep my distance.

I tried putting some other excerpts in my CSS snippet file, but didn’t have luck with any. Here’s what I tried:

/* Fixes internal link color, but only in reading mode */
body:is(.theme-dark, .theme-light) {
  --link-color: #7593ce;
}

/* Also only fixes internal link color in reading mode */
.markdown-rendered .internal-link {
  color: #7593ce;
}

/* Turns both internal and external links blue in editor, but removes hover effects for internal links */
.markdown-source-view.mod-cm6 .cm-underline {
  color: #7593ce;
}

/* Hover effect for internal links in edit mode */
.markdown-source-view.mod-cm6 .cm-underline:hover {
  color: #ecddd3;
}

[ariehen]

I don’t see an issue with body { --link-color: #7593ce; } itself. That seems fine for internal links in all viewing modes, but it does carry over to external links in Live Preview at the moment. (orange is my accent color here, not a snippet)

Source mode / Live Preview / Reading view:

Adding the second section to take care of external links almost gets it:

body:is(.theme-dark, .theme-light) {
    --link-color: #7593ce;
    --link-color-hover: #7593ce;
}

a.external-link, 
a.external-link:hover,
.markdown-source-view.mod-cm6 
   :is(.cm-link, .cm-url, .cm-link .cm-underline, .cm-link .cm-underline:hover,
   .cm-url .cm-underline, .cm-url .cm-underline:hover) {
        color: pink;
}

The only thing I can’t seem to get to is the internal [markdown](link.md) in the editor. It’s almost all of the way. Maybe this can help a bit for now.

// moved to custom CSS

[fagoliveira]

I have also noticed this issue after updating to the latest version. Curiously, this only applies to embedded links; raw external links show the intended color, but external markdown links (those within these brackets ) instead show the same color as internal links (those within [[these brackets]] )

[WrenM]

Thank you! Personally, this takes care of it for me; I don’t use the [markdown](link.md) syntax you described.

I tweaked the CSS you gave me, to produce visible hover effects on internal links (in both live preview and reading mode), and on external links (in reading mode). I haven’t managed to get a hover effect on external links, but this is so minor that I don’t even remember if I had that before Obsidian 1.5.11. It makes no difference to me.

body:is(.theme-dark, .theme-light) {
  --link-color: #7593ce;
  --link-color-hover: #ecddd3;
}

a.external-link, 
.markdown-source-view.mod-cm6 
 :is(.cm-link, .cm-url, .cm-link .cm-underline, .cm-link .cm-underline:hover,
 .cm-url .cm-underline, .cm-url .cm-underline:hover) {
      color: pink;
}

a.external-link:hover,
 :is(.cm-link, .cm-url, .cm-link .cm-underline, .cm-link .cm-underline:hover,
 .cm-url .cm-underline, .cm-url .cm-underline:hover) {
      color: #ecddd3;
}

In my original post, I mistakenly used the term “edit mode”, when I should have been saying “live preview mode”, to disambiguate between live preview and source mode. However, I don’t think I can edit it anymore, now that it’s been edited by a moderator.

[ariehen]

@WrenM

I haven’t managed to get a hover effect on external links

Give this version a try with all the :hovers separated out:

body:is(.theme-dark, .theme-light) {
    --link-color: #7593ce;
    --link-color-hover: #ecddd3;
}

a.external-link, 
.markdown-source-view.mod-cm6 
  :is(.cm-link, .cm-url, .cm-link .cm-underline, .cm-url .cm-underline) {
        color: pink;
}

a.external-link:hover,
.markdown-source-view.mod-cm6 
   :is(.cm-link:hover, .cm-url:hover, .cm-link .cm-underline:hover, .cm-url .cm-underline:hover) {
        color: #ecddd3;
}

Hopefully the variable issue will be fixed in the next release.

---

As for the editing of your first post: once you have made a few more topics, replied to posts, given hearts, etc., your “trust level” will go up automatically and you’ll be able to edit your posts. It’s a default forum setting to help prevent SPAM, stealth editing of links, and so on.

[WrenM]

This snippet worked like a charm! Now I’ve got my preferred colors, with hover effects, in source, live preview, and reading modes. Thanks so much!