Keep colorful headings when they're links?

[greys]

Hi all, hopefully someone figured this out already? I can’t seem to fix this within standard theme and plugin settings.

What I’m trying to do

I really like the idea of having colourful headings - used to do this with Style Settings plugin, now using the built-in “Colorful headings” setting in the Minimal Theme Settings plugin.

What I’m trying to do is keep headers colorful even after they become internal links.

In my daily note template, I update headings to internal links. So that I can see which major parts of the day were spent on working on most important areas.

What I would like is to have the headings show up as multi-colored ones, but instead they become the “internal link” color.

Attached are two examples - one with standard template and another one with some of the same headers turned into internal links (see how they’re all showing in blue color now)

.

Does anyone know what I should update CSS wise to make sure h1/h2/h3/h4 links are staying colourfull in image 2 just like normal non-linked headings in image 1?

Thanks everyone!

[ariehen]

It’s a bit long, but this might work. It will only work for notes already created, not “unresolved” links (links to notes not-yet-created) or external links. Tested with the Minimal theme.

.markdown-rendered h1 > a.internal-link, .cm-header.cm-header-1.cm-hmd-internal-link {
    color: var(--color-red); }

.markdown-rendered h2 > a.internal-link, .cm-header.cm-header-2.cm-hmd-internal-link {
    color: var(--color-orange); }

.markdown-rendered h3 > a.internal-link, .cm-header.cm-header-3.cm-hmd-internal-link {
    color: var(--color-yellow); }

.markdown-rendered h4 > a.internal-link, .cm-header.cm-header-4.cm-hmd-internal-link {
    color: var(--color-green); }

.markdown-rendered h5 > a.internal-link, .cm-header.cm-header-5.cm-hmd-internal-link {
    color: var(--color-blue); }

.markdown-rendered h6 > a.internal-link, .cm-header.cm-header-6.cm-hmd-internal-link {
    color: var(--color-purple); }

Live Preview:

Reading/Rendered:

[greys]

Yes, this looks great!

Weird behaviour: the very last section of my daily notes doesn’t seem to be following this (doesn’t get the colours).

Have added your code using CSS Snippets and think I’ll know where to look/fix this further now. Thanks so much!

[greys]

Actually, it wasn’t “the very last section” - it was just the “unresolved” links - so links pointing nowhere. I kind of like this behaviour - the heading will only stay coloured if it’s pointing to an existing page (or if/when I create it).

Thanks again for helping me!