I would like my internal links to be yellow and my external links to remain blue
I’m very new to Obsidian, so I’m still not comfortable enough to understand the topics I visited. I installed the Supercharged plugin, as well as the Style Settings plugin.
I’m comfortable with CSS in general, but I don’t know how it works with Obsidian, what to target, where to add the code, etc.
Any help?
Thanks!
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-link-path$="md"]),
.cm-s-obsidian span.cm-link:has([data-link-path$="md"]),
.cm-s-obsidian span.cm-link:has([data-link-path$="md"]) .cm-underline:hover,
.markdown-rendered .internal-link
{
color: red;
}
Result in source mode:
Result in Live Preview & Reading mode:
If you aren’t using internal [markdown](links.md), you could probably get away with using a few of the custom properties / variables.
body {
--link-color: salmon;
--link-color-hover: #fcb3ab;
--link-external-color: olive;
--link-external-color-hover: #d1e189 ;
}
These can be color names, hex, rbg, hsl, etc.
woofy31’s looks good though, and it seems like it covers most cases.
Thank you for sharing.
It indeed made some changes, but not what I was trying to achieve.
So using your CSS, all links (internal or external) are now that blue that you picked
--link-external-color: blue;
This is the original without CSS
This is after applying your CSS
When I hover over any of the links, the color changes to the original
So my goal would be to have this where internal links to other notes would be yellow and then external links to websites would retain the original lighter blue
I don’t need it to change color when I hover over, though.
Is this possible?
In that case you just use the Obsidian properties as mentioned by ariehen above:
Maybe I’m not understanding how this works, sorry…
When I used @ariehen option, I get this:
So when @ariehen says
Isn’t [markdown](links.md) an internal link, or am I misunderstanding what an internal link is?
Let me see if I can explain what I need
This will be yellow:
[Hazel - Change Filename with Clipboard-Text](Hazel%20-%20Change%20Filename%20with%20Clipboard-Text.md)
This will remain the original light blue from the default theme:
[https://forum.obsidian.md/t/styling-internal-links-with-a-different-color/71489](https://forum.obsidian.md/t/styling-internal-links-with-a-different-color/71489)
Like this:
Now, the CSS you shared, seems to apply that other blue to all links.
What’s weird is that according to the images you shared, you were able to achieve this on your end, where different colors were applied to different types of links. Do you think it’s something else I need to enable or disable?
I installed the Supercharged plugin and Style Settings plugin, but now I disabled them in case there was a conflict, but nothing changed.
Any tips?
Unfortunately I have no idea why it doesn’t work on your end since on my end it works just fine… maybe there’s a conflict from the theme you have? Or some other plugin?
If you just want to style your internal links and leave the external ones as is, doesn’t the below code work? Just remove the parts with the blue links from my CSS code and only keep the below code instead in your CSS snippet:
/* 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-link-path$="md"]),
.cm-s-obsidian span.cm-link:has([data-link-path$="md"]),
.cm-s-obsidian span.cm-link:has([data-link-path$="md"]) .cm-underline:hover,
.markdown-rendered .internal-link
{
color: yellow;
}
The above only colors internal links on my end, and external ones are left as per the theme.
I’m using the default Obsidian theme.
Just disabled all community plugins, restarted Obsidian, no change…
What a bummer…
Even with just this CSS snippet alone it won’t work?
.cm-s-obsidian span.cm-hmd-internal-link,
.cm-s-obsidian span.cm-url:has([data-link-path$="md"]),
.cm-s-obsidian span.cm-link:has([data-link-path$="md"]),
.cm-s-obsidian span.cm-link:has([data-link-path$="md"]) .cm-underline:hover,
.markdown-rendered .internal-link
{
color: yellow;
}
Maybe try adding !important after the color like this:
color: yellow !important;
If this doesn’t work either, I think it’s best if you go into Obsidian’s developer console (ctrl+shift+i) and investigate the CSS styles to see what selector is forcing the blue color.
No luck…
So weird that this doesn’t work.
I started using Obsidian a few months ago and as a beginner, I don’t even have lots of plugins or customization. So it seems that there’s something in the “core” or something that’s causing this
I’ll just add that the default for internal links are [[wikilinks]]. That is what the --link-color: property covers.
[markdown](internal-links) fall in a gray zone between internal and external links for the custom properties. That is why I mentioned “If you aren’t using internal [markdown](links.md)”.
If you’re comfortable with CSS, try going into Obsidian’s developer console (ctrl+shift+i) and investigate the CSS styles to see what selector is forcing the blue color.
I disabled my plugins and reverted to the default theme, and it works just fine, so it’s not the Obsidian core either.
P.S. I do hope you have enabled your CSS snippet in the Appearance settings window to begin with, because it won’t work if you didn’t enable the snippet in the first place 
#justsaying
Yes, because otherwise it wouldn’t apply the CSS you guys were sharing such as the blue and the olive colors 
This is what I see in the Console related to links (I think that’s what you mean)
Then try this snippet instead:
:root, body, .view-content {
--link-color: yellow;
--link-color-hover: yellow;
}
…or both
No luck…
But when I use your original CSS
It does affect the links. It seems that it’s assuming that the internal links are external
Actually my CSS code colors only the externa links in blue, so for some reason your internal links don’t want to get styled…
I see what you mean.
Yeah, that seems to be the issue.
Just to make sure I am doing the right thing when it comes to internal links:
I type [ twice and I get the box to pick a note. Then I select the note and it creates the link, like this:
So this is the internal link, right?
