Minimal Theme's colorful headings - change markdown link color

[peeragetalkers]

What I’m trying to do

I’m trying to create a CSS snippet for the Minimal Theme’s “Colorful headings” option that will make all link types be the same color as regular heading text.

Claude helped me accomplish this for wikilinks but couldn’t crack markdown links:

Here’s its code:

All three link types are colorful - reading view only

:root {
    --heading-unresolved-opacity: 0.7;
}

/* Reading mode - both wikilinks and markdown links */
.markdown-rendered :is(h1,h2,h3,h4,h5,h6) :is(a.internal-link, a.external-link) {
    color: inherit !important;
}

.markdown-rendered :is(h1,h2,h3,h4,h5,h6) a.is-unresolved {
    color: inherit !important;
    opacity: var(--heading-unresolved-opacity) !important;
    text-decoration-color: inherit !important;
}

/* Live Preview */
.cm-line span.cm-header :is(.cm-hmd-internal-link, .cm-link),
.cm-line span.cm-header :is(.cm-hmd-internal-link, .cm-link) .cm-underline {
    color: inherit !important;
}

.cm-line span.cm-header.cm-hmd-internal-link.is-unresolved,
.cm-line span.cm-header.cm-hmd-internal-link .is-unresolved,
.cm-line span.cm-header .is-unresolved > .cm-underline {
    color: inherit !important;
    opacity: var(--heading-unresolved-opacity) !important;
    text-decoration-color: inherit !important;
}

/* Hover states - for both types of links */
.cm-line span.cm-header :is(.cm-hmd-internal-link, .cm-link):hover,
.cm-line span.cm-header :is(.cm-hmd-internal-link, .cm-link) .cm-underline:hover,
.markdown-rendered :is(h1,h2,h3,h4,h5,h6) :is(a.internal-link, a.external-link):hover {
    color: inherit !important;
    opacity: 1 !important;
    filter: brightness(0.92) !important;
}

Only wikilinks are colorful - reading/source/live preview

:root {
    --heading-unresolved-opacity: 0.7;
}

/* Reading mode */
.markdown-rendered :is(h1,h2,h3,h4,h5,h6) a.internal-link {
    color: inherit !important;
}

.markdown-rendered :is(h1,h2,h3,h4,h5,h6) a.is-unresolved {
    color: inherit !important;
    opacity: var(--heading-unresolved-opacity) !important;
    text-decoration-color: inherit !important;
}

/* Live Preview */
.cm-line span.cm-header.cm-hmd-internal-link,
.cm-line span.cm-header.cm-hmd-internal-link .cm-underline {
    color: inherit !important;
}

.cm-line span.cm-header.cm-hmd-internal-link.is-unresolved,
.cm-line span.cm-header.cm-hmd-internal-link .is-unresolved,
.cm-line span.cm-header .is-unresolved > .cm-underline {
    color: inherit !important;
    opacity: var(--heading-unresolved-opacity) !important;
    text-decoration-color: inherit !important;
}

/* Hover states - both resolved and unresolved go to same darkness */
.cm-line span.cm-header.cm-hmd-internal-link:hover,
.cm-line span.cm-header.cm-hmd-internal-link .cm-underline:hover,
.cm-line span.cm-header.cm-hmd-internal-link.is-unresolved:hover,
.cm-line span.cm-header.cm-hmd-internal-link .is-unresolved:hover,
.markdown-rendered :is(h1,h2,h3,h4,h5,h6) a:hover {
    color: inherit !important;
    opacity: 1 !important;
    filter: brightness(0.92) !important;
}

I want markdown links to be the same color as resolved links (and same as regular text) in the screenshot above.

Things I have tried

I already tried all CSS solutions for this I could find on this forum and reddit.

[peeragetalkers]

Fiddling around with Claude some more, it came up with a version that colors all three link types in Reading and Live Preview views. In Source, all three link types use accent color still but this is an acceptable limitation.

CSS snippet

[Minimal]_Colorful_heading_links.css (2.6 KB)

/**
 * Snippet Name: Colorful Heading Links
 * Version: 1.1
 * Author: Created via Claude
 * Source: https://forum.obsidian.md/t/minimal-themes-colorful-headings-change-markdown-link-color/92739
 * Last Updated: 2024-12-19
 */

/* Reading mode - including popovers */
:is(.markdown-reading-view, .popover.hover-popover .markdown-preview-view) :is(h1,h2,h3,h4,h5,h6) :is(a.internal-link, a.external-link, a:not(.internal-link):not(.external-link)) {
    color: inherit !important;
    text-decoration-color: inherit !important;
}

/* Live Preview */
.markdown-source-view.mod-cm6.is-live-preview {
    .cm-header-1 :is(.cm-formatting-link-start, .cm-formatting-link-end, .cm-link, .cm-url, .cm-string, .cm-underline, .cm-hmd-internal-link) {
        color: var(--h1-color) !important;
        text-decoration-color: var(--h1-color) !important;
    }
    .cm-header-2 :is(.cm-formatting-link-start, .cm-formatting-link-end, .cm-link, .cm-url, .cm-string, .cm-underline, .cm-hmd-internal-link) {
        color: var(--h2-color) !important;
        text-decoration-color: var(--h2-color) !important;
    }
    .cm-header-3 :is(.cm-formatting-link-start, .cm-formatting-link-end, .cm-link, .cm-url, .cm-string, .cm-underline, .cm-hmd-internal-link) {
        color: var(--h3-color) !important;
        text-decoration-color: var(--h3-color) !important;
    }
    .cm-header-4 :is(.cm-formatting-link-start, .cm-formatting-link-end, .cm-link, .cm-url, .cm-string, .cm-underline, .cm-hmd-internal-link) {
        color: var(--h4-color) !important;
        text-decoration-color: var(--h4-color) !important;
    }
    .cm-header-5 :is(.cm-formatting-link-start, .cm-formatting-link-end, .cm-link, .cm-url, .cm-string, .cm-underline, .cm-hmd-internal-link) {
        color: var(--h5-color) !important;
        text-decoration-color: var(--h5-color) !important;
    }
    .cm-header-6 :is(.cm-formatting-link-start, .cm-formatting-link-end, .cm-link, .cm-url, .cm-string, .cm-underline, .cm-hmd-internal-link) {
        color: var(--h6-color) !important;
        text-decoration-color: var(--h6-color) !important;
    }
}

/* Popover preview in Live Preview */
.popover.hover-popover .markdown-preview-view :is(h1,h2,h3,h4,h5,h6) :is(a.internal-link, a.external-link, a:not(.internal-link):not(.external-link)) {
    color: inherit !important;
    text-decoration-color: inherit !important;
}

/* Unresolved and hover states */
.is-unresolved {
    opacity: 0.7 !important;
    &:hover {
        opacity: 1 !important;
        filter: brightness(0.92) !important;
    }
}

:is(a, .cm-link):hover {
    opacity: 1 !important;
    filter: brightness(0.92) !important;
}

Screenshot