Add option for separate link colours

[Andre601]

I checked that...

• ... the documentation does not mention anything about my idea
• ... to my best knowledge, my idea wouldn't break something for other users
• ... there are no open or closed issues that are related to my idea

Description

It would be a nice addition to have two options to set a different colour for links and when hovering over them.
The available colours could just be the one already provided and it could default to either the primary or accent colour depending on what option is missing or invalid.

The reason is simple: Readability.
Depending on what colour theme (background colour) and primary/accent colours you have set are links barely readable.
This is especially the case when using links in inline code, as - depending on your modifications - the text becomes barely distinguishable from the code background.

I f.e. want to use indigo as primary colour, but due to me using css for having a dark theme is the link colour barely readable on inline code, forcing me to either customize the CSS (Which I'm not good at) or switch to a different, much brighter colour which I wouldn't like to do.

Use Cases

The aforementioned cases would apply here and I'm sure people would love to have a colour for links, different to the primary and accent colour set.

Screenshots / Mockups

Colour indigo while using a dark theme:

Colour yellow without any custom CSS:

[squidfunk]

This topic can (and will) be revisited when implementing dark mode, as some more variables/branches could be necessary.

[squidfunk]

Added in 1fc6af1#diff-84f37ad4f75d6bdb8cc32a1b513f5e65R65 as part of the dark mode branch.

[squidfunk]

Released as part of 5.2.0! You can now set the link color with --md-text-link-color.

[Andre601]

Would this be set within custom css?

[facelessuser]

Yes, it is a CSS variable.

[Andre601]

I'm not quite sure how I would now implement this (I honestly assumed this to become an option in the mkdocs.yml)

Like what css would I have to add/alter in order to display the link as a bright blue (cyan?) and make it brighter when hovering over it?

[squidfunk]

we might add a tutorial on this in the future, but I currently don’t have the time to write one. There might also be some guidance on the tutorials branch, see open PRs. The issue itself is fixed, as the variable is now defined.

[Andre601]

I tried to add it now, but still are lost

What I tried:

body {
  --md-text-link-color: #3498db;
}

The above doesn't work. I did add it as extra_css and there's no other css files that would alter colors on any way.
I use css and not scss, so it might by a syntax issue?
From my basic css knowledge should it accept hexadecimal values, right?

[squidfunk]

You need to understand CSS Specificity

[denreyrey]

In your extra.css file, you'll need to add (for the color of the links)
:root>* {
--md-typeset-a-color: #3498db;
}

And then in mkdocs.yml (for color on hover)
theme:
name: material
custom_dir: overrides
palette:
# try other colors https://squidfunk.github.io/mkdocs-material/getting-started/#primary-colors
primary: white
accent: purple

extra_css:

• stylesheets/extra.css
• https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css

Hope it works :) I did it like this