How can I change text color of external links when hovering over them in Editing mode?

Custom CSS & Theme Design
1

What I’m trying to do

As I said in the the title, I’m trying to change the color of external links and urls when hovering over them with the mouse in Source Mode. I think the major problem stands with the fact that I use the Minimal Theme.

Things I have tried

This is the script I’ve tried:

.theme-light {
  --text-highlight-bg: rgba(210,231,209,255);
}
/* CSS snippet to change link hover text color in Obsidian */

/* Target all links or hyperlinks in general */
a:hover {
  color: rgba(109, 180, 120, 1); /* Hover text color */
  transition: color 0.3s ease; /* Smooth transition */
}

/* Specifically target external links */
a.external-link:hover {
  color: rgba(109, 180, 120, 1); /* Hover text color for external links */
  transition: color 0.3s ease;
}

/* Default color for external links in source view */
.markdown-source-view .cm-url {
    color: var(--link-external-color, inherit) !important; /* Default link color */
}

/* Hover color for external links in source view */
.markdown-source-view .cm-url:hover {
    color: var(--link-external-color-hover, red) !important; /* Hover link color */
}

But it didn’t work in Editing mode, while it did in Reading mode. How can I fix this problem?

2

I can’t test it now, but as I can see, there are more classes that you need to include in your CSS:

.markdown-source-view.mod-cm6 .cm-link .cm-underline:hover

I changed the color: variable to blue, and I get blue text when I hover over external links.

Can try and test when behind “proper” :slight_smile: computer.

Cheers, Marko :nerd_face:

3

Just to double check, you mean

in Source mode only, or both Source mode and Live preview (the two “editing” modes)?

I started to write something up for source mode only, got distracted, and then Marko’s post made me think you probably mean both editing modes. :sweat_smile:

1 Like
4

I’ve actually solved it. Asked ChatGPT to improve and solve on my previous code and it worked `.theme-light {
–text-highlight-bg: rgba(210,231,209,255);
}
/* Default color for external links in source view /
.markdown-source-view .cm-url {
color: inherit !important; / Default color for external links in Source View */
}

/* Hover color for external links in source view /
.markdown-source-view .cm-url:hover {
color: rgba(109, 180, 120, 1) !important; / Hover color for external links in Source View */
transition: color 0.3s ease;
}

/* Default color for external links in Reading View /
.markdown-preview-view a[href^=“http”]:not([href=“obsidian.md”]) {
color: inherit !important; /* Default color for external links in Reading View */
}

/* Hover color for external links in Reading View /
.markdown-preview-view a[href^=“http”]:not([href=“obsidian.md”]):hover {
color: rgba(109, 180, 120, 1) !important; /* Hover color for external links in Reading View */
transition: color 0.3s ease;
}

/* Default color for external links in Live Preview /
.cm-preview a[href^=“http”]:not([href=“obsidian.md”]) {
color: inherit !important; /* Default color for external links in Live Preview */
}

/* Hover color for external links in Live Preview /
.cm-preview a[href^=“http”]:not([href=“obsidian.md”]):hover {
color: rgba(109, 180, 120, 1) !important; /* Hover color for external links in Live Preview */
transition: color 0.3s ease;
}

/* Default color for internal links in source view /
.markdown-source-view a[href^=“#”] {
color: inherit !important; / Inherit the default theme color for internal links in Source View */
}

/* Hover color for internal links in source view /
.markdown-source-view a[href^=“#”]:hover {
color: rgba(109, 180, 120, 1) !important; / Hover color for internal links in Source View */
transition: color 0.3s ease;
}

/* Default color for internal links in Reading View (preview mode) /
.markdown-preview-view a[href^=“#”]:not([href=“obsidian.md”]) {
color: inherit !important; /* Default color for internal links in Reading View */
}

/* Hover color for internal links in Reading View (preview mode) /
.markdown-preview-view a[href^=“#”]:not([href=“obsidian.md”]):hover {
color: rgba(109, 180, 120, 1) !important; /* Hover color for internal links in Reading View */
transition: color 0.3s ease;
}

/* Default color for internal links in Live Preview /
.cm-preview a[href^=“#”]:not([href=“obsidian.md”]) {
color: inherit !important; /* Default color for internal links in Live Preview */
}

/* Hover color for internal links in Live Preview /
.cm-preview a[href^=“#”]:not([href=“obsidian.md”]):hover {
color: rgba(109, 180, 120, 1) !important; /* Hover color for internal links in Live Preview */
transition: color 0.3s ease;
}

`