How to change internal and external link color in the live preview & reading view?

[mws]

I have a CSS snippet that changes the color of both internal and external links to be this particular shade of red (#F83E43). However, the snippet only works for the reading view and not both as I would like it to be. In the live preview, the links are a lighter color of the custom accent color I have set; which is the same shade of red. (#F83E43)

Here’s the code to the snippet:

/* Default color for all links in both views */
.markdown-preview-view a, .cm-s-obsidian a {
  color: #F83E43 !important; /* Default color for all links */
}

/* External link color in both views */
.markdown-preview-view a.external-link, .cm-s-obsidian a.external-link {
  color: #4CAF50; /* External links color */
}

/* Unresolved (non-existent) links color in both views */
body .markdown-preview-view a.is-unresolved, 
body .cm-s-obsidian .cm-hmd-internal-link.cm-hmd-unresolved,
body .cm-s-obsidian span.cm-hmd-unresolved {
    color: #721e21 !important; /* Darker color for unresolved links */
}

/* Dotted underline on hover for unresolved links in reading view */
body .markdown-preview-view a.is-unresolved:hover {
    text-decoration: underline dotted !important;
}

/* Dotted underline on hover for unresolved links in editing view */
body .cm-s-obsidian .cm-hmd-internal-link.cm-hmd-unresolved:hover,
body .cm-s-obsidian span.cm-hmd-unresolved:hover {
    text-decoration: underline dotted !important;
}

Any help to fix this is greatly appreciated!

[ariehen]

It may be a theme issue. As is, your snippet is coloring mostly all links #F83E43 because of the color: #F83E43 !important; line.

Live Preview | Reading view

You could have a look through a similar topic and try some of the suggestions there:

Styling internal links with a different color

OK, so here’s what I came up with (via a custom CSS snippet, no plugins whatsoever): /* target external links in ALL views */ body { --link-external-color: blue; --link-external-color-hover: blue; } /* revert undesired edit-mode external link parenthesis coloring */ .cm-s-obsidian span.cm-url.cm-formatting-link-string { color: var(--text-faint); } /* target both internal WIKI links & MD links in ALL views */ .cm-s-obsidian span.cm-hmd-internal-link, .cm-s-obsidian span.cm-url:has([data-…

[mws]

This thread helped, thank you. Specifically the “:root” solution!

Styling internal links with a different color

Ok, it’s working. Here’s what’s happening: 1 - Wikilinks has to be ON 2 - When I make changes to the .css file, even with Wikilinks turned on, the old links I created are not automatically updated so that’s why I wasn’t seeing any changes with your code. Only when I created new links was I able to see the changes [image] So I only needed the small code to make it work: :root, body, .view-content { --link-color: #E7BC39; --link-color-hover: #d9ae2c; } Really appreciate your time a…