How to change the color of a link in editor mode

[userrand2]

What I’m trying to do

I would like to change the color of external links in editor mode

Things I have tried

I tried

markdown-source-view a[href="https"] {
  color: green;
}

and

.markdown-preview-view .external-link {
    color: blue;
}

I am currently using a theme

[Olondre]

Just in editor mode? Otherwise you can use this snippet for all modes:

body {
    --link-external-color: red;
    --link-external-color-hover: red;
}

Specifically for editor mode would be:

.markdown-source-view {
    --link-external-color: red;
    --link-external-color-hover: red;
}

[JimK]

Hi @userrand2 Try this custom CSS, it works for me in live edit mode. I choose ugly colors so the different selections would stand out.

/*
** Link Text Color 
*/

/* Text Edit and NonEdit */
.cm-s-obsidian span.cm-link {
  color: red;
}
/* Text Hover editing link */
.cm-s-obsidian span.cm-link:hover {
  color: blue;
}

/* URL editing not hover */
.cm-s-obsidian span.cm-url {
  color: Yellow;
}
/* URL editing hover */

.cm-s-obsidian span.cm-url:hover {
  color: green;
}

[userrand2]

Thank you both for your quick help.

@Olondre 's solution:

• Works with the default theme

• Does not with the custom theme I am using (Obsidianite)

@JimK 's solution:

• Only the yellow

.cm-s-obsidian span.cm-url {
  color: Yellow;
}

worked with the default theme.

The link was purple and a lighter purple when hovering in reading mode and purple when hovering in edit mode.

• Did not work with the custom theme I am using (Obsidianite)

Follow up question:

How to override a theme’s color choice ?

[userrand2]

The answer here addresses the question of overriding a theme’s color Have CSS snippet override Theme Style - #2 by ryanjamurphy

[ariehen]

Something about your theme is overriding the --link-external-color that Olondre suggested. Try this one

.markdown-source-view .cm-url {
  color: var(--color-green) !important;
  --link-external-color-hover: var(--color-green);
}

[userrand2]

With the theme Obsidianite, adding the CSS code !important to @Olondre 's solution did not help but adding it to @JimK 's solution did. For the hover I took @Olondre 's solution.

Final code:

.cm-s-obsidian span.cm-url {
  color: orange !important;
}

.markdown-source-view {
    --link-external-color-hover: orange;
}

However, the theme Obsidanite makes the colors of links dark and I decided to change the theme as a result.

Thank you both for your help.

[userrand2]

Thank you, this code works.

With the Obsidianite theme, the colors of external links are still too dark regardless of the color I choose so I will still change the theme but thank you all