Change color of internal links in v1.7.7

I want to change the color of the internal-link, while keeping the color of the external-link as default. I use the CSS suggested in Setting separate internal and external link colors in 1.5.11 as follows:

body:is(.theme-dark, .theme-light) {
    --link-color: rgb(249, 166, 138);
    --link-color-hover: rgb(252, 197, 182);
}
a.external-link, 
.markdown-source-view.mod-cm6 
  :is(.cm-link, .cm-url, .cm-link .cm-underline, .cm-url .cm-underline) {
        color: rgb(166, 138, 249);
}
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: rgb(197, 182, 252);
}

where internal-link color rgb(249, 166, 138) and rgb(252, 197, 182) are orange and light orange, repectively, and external-link color rgb(166, 138, 249) and rgb(197, 182, 252) are default purple and default light purple, respectively.

Everything works fine in reading view, as shown in the image below:

In editing view, however, I found two problems that confused me, as shown in the image below:

  1. Color of Internal Markdown links remains unchanged (both when displaying and editing)
  2. Color of Internal Markdown links remains unchange when editing in table

I’ve searched and tried a lot but nothing seems to work. I think the best solution which I expect is to find all internal-links and change the color, not to change the color of all links and then change the color of the external-links back to default.

Thanks advanced for your help!

References

Code

## Linking Notes and Files

- Internal Wikilink: [[Obsidian]], [[Obsidian#Internal links]]
- Internal Markdown: [Obsidian](Obsidian.md), [Obsidian#Internal links](Obsidian.md#Internal%20links)
- External URL: https://help.obsidian.md
- External Markdown: [Obsidian Help](https://help.obsidian.md)

| Type              | Code 1                                      | Example 1                                 | Code 2                                                    | Example 2                                               |
| ----------------- | ------------------------------------------- | ----------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------- |
| Internal Wikilink | `[[Obsidian]]`                              | [[Obsidian]]                              | `[[Obsidian#Internal links]]`                             | [[Obsidian#Internal links]]                             |
| Internal Markdown | `[Obsidian](Obsidian.md)`                   | [Obsidian](Obsidian.md)                   | `[Obsidian#Internal links](Obsidian.md#Internal%20links)` | [Obsidian#Internal links](Obsidian.md#Internal%20links) |
| External URL      | `https://help.obsidian.md`                  | https://help.obsidian.md                  |                                                           |                                                         |
| External Markdown | `[Obsidian Help](https://help.obsidian.md)` | [Obsidian Help](https://help.obsidian.md) |                                                           |                                                         |

Is this sufficient enough for you? :))

.cm-url,
.cm-url a.cm-underline,
.cm-link:has(~ .external-link) a.cm-underline,
.external-link {
    color: red !important;
}

Thanks for your kind help! You change the color of two external links, but I want to change two internal ones. With the help your code, I’ve got

body {
    --link-color: rgb(249, 166, 138) !important;
    --link-color-hover: rgb(252, 197, 182) !important;
}  /*change color of internal Wikilinks*/

.cm-link a.cm-underline {
  color: rgb(249, 166, 138) !important;
}
.cm-link a.cm-underline:hover {
  color: rgb(252, 197, 182) !important;
}  /*change color of both internal and external Markdown links*/

.cm-link:has(~ .external-link) a.cm-underline {
  color: rgb(166, 138, 249) !important;
}
.cm-link:has(~ .external-link) a.cm-underline:hover {
  color: rgb(197, 182, 252) !important;
}  /*change color of external Mardown links back to default*/

which solves the “displaying” of internal markdown links, but “editing” part of problem 1 and problem 2 remain. This is good enough to me. Hope for some better solutions.

Oh I thought you want external link to be changed. Here is a better code, but I can only do so much for source mode since I see no way to distinguish between internal and external links.

/* live-preview mode */
.markdown-source-view.is-live-preview {
    .cm-url a.cm-underline,
    span.cm-link:not(.cm-formatting),
    .cm-link:not(:has(~ .external-link)) .cm-underline,
    span.cm-hmd-internal-link:not(:has(.is-unresolved)),
    span.cm-hmd-internal-link:not(:has(.is-unresolved)) .cm-underline {
        color: palevioletred;
    }

    .is-unresolved,
    .is-unresolved .cm-underline {
        color: blue;
    }

    :is(
        .cm-url a.cm-underline,
        span.cm-link:not(.cm-formatting),
        .cm-link .cm-underline,
        span.cm-hmd-internal-link:not(:has(.is-unresolved)),
        span.cm-hmd-internal-link:not(:has(.is-unresolved)) .cm-underline,
    ):hover {
        color: green;
    }

    :is(
        .is-unresolved,
        .is-unresolved .cm-underline
    ):hover {
        color: greenyellow;
    }

    span.cm-url:not(.cm-formatting),
    .cm-url:not(.cm-formatting) a.cm-underline,
    .cm-link:has(~ .external-link):not(.cm-formatting),
    .cm-link:has(~ .external-link) a.cm-underline,
    .external-link {
        color: orange;
    }

    :is(
        span.cm-url:not(.cm-formatting),
        .cm-url:not(.cm-formatting) a.cm-underline,
        .cm-link:has(~ .external-link):not(.cm-formatting),
        .cm-link:has(~ .external-link) a.cm-underline,
        .external-link
    ):hover {
        color: orangered;
    }
}

/* source mode */
.markdown-source-view:not(.is-live-preview) {
    .cm-link:not(.cm-formatting),
    .cm-hmd-internal-link {
        color: palevioletred;
    }

    :is(
        .cm-link:not(.cm-formatting),
        .cm-hmd-internal-link
    ):hover {
        color: green;
    }

    span.cm-url:not(.cm-formatting),
    .cm-url:not(.cm-formatting) a.cm-underline,
    .cm-link:has(~ .external-link):not(.cm-formatting),
    .cm-link:has(~ .external-link) a.cm-underline,
    .external-link {
        color: orange;
    }
}