How to change the link color that has not been hovered over?

[Guangzhen-Jin]

I was looking into tweaking the default dark theme colors for our own use. Everything else is working by setting the corresponding color variable defined in this file. But I was stuck while trying to change the "background" link (i.e. the link that has not been hovered by the cursor) colors.

For example, this is the color (light blue) of a link while it has not been hovered by a cursor:

And this is the color (changed to slightly darker blue) when you hover your cursor over it.

Which color variable controls each link color? Thank you!

P.S. I've tried --md-accent-bg-color:, --md-accent-fg-color: and --md-primary-fg-color: but neither works.

[kamilkrzyskow]

Hello @Guangzhen-Jin,
using the Material theme docs as a reference, it's --md-typeset-a-color for not hovered, and --md-accent-fg-color for hovered.
All is wrapped in .md-typeset a selector.

[Guangzhen-Jin]

Thank you! @kamilkrzyskow

I think I found something similar from the inspector. But I've tried the following in my ./stylesheets/extra.css and --md-typeset-a-color won't work for me (--md-accent-fg-color did change the hovered color). Did I miss anything?

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: red;
  --md-accent-fg-color: blue;
}

P.S. I also noticed this section under _scheme.scss. Not sure how it affects the color theme definition.

  // Adjust link colors for dark primary colors
  @each $name, $color in (
    "pink":                            hsl(340, 81%, 63%),
    "purple":                          hsl(291, 53%, 63%),
    "deep-purple":                     hsl(262, 73%, 70%),
    "indigo":                          hsl(219, 76%, 62%),
    "teal":                            hsl(174, 100%, 40%),
    "green":                           hsl(122, 39%, 60%),
    "deep-orange":                     hsl(14, 100%, 65%),
    "brown":                           hsl(16, 45%, 56%),

    // Set neutral colors to indigo
    "grey":                            hsl(219, 66%, 62%),
    "blue-grey":                       hsl(219, 66%, 62%),
    "white":                           hsl(219, 66%, 62%),
    "black":                           hsl(219, 66%, 62%)
  ) {
    [data-md-color-scheme="slate"][data-md-color-primary="#{$name}"] {
      --md-typeset-a-color: #{$color};
    }
  }

[kamilkrzyskow]

Yes, you're correct, thanks for pointing this out.

The SCSS for this specific scheme color is scoped to the primary color too. So in the inspector it's shown that the applied override is crossed off. And this selector for the color definition has higher Specificity, [data-md-color-scheme="slate"][data-md-color-primary="black"]. You can add one more attribute without a value to override it properly.

[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-typeset-a-color: red;
  --md-accent-fg-color: blue;
}

[Guangzhen-Jin]

Awesome! It is now working for me. Thank you! @kamilkrzyskow