Elements to set colors for links

[stephffuller]

I've tried inspecting the pages once rendered for the correct element to set to change link colors, but the only one I could find was md-typeset-a, which affects other elements as well. What are the correct elements for material that would accomplish the following without affecting other page elements?

/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */
a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}

Current extra.css below with our theme colors defined and you can see my unsuccessfull attempt at getting link colors to work at the bottom.

:root {
--color-dark: black;
--color-light: white;
--color-accent: #501D60;
--md-default-fg-color:var(--color-dark);
--md-default-fg-color--light:var(--color-dark);
--md-default-fg-color--dark:var(--color-light);
--md-default-bg-color:var(--color-light);
--md-default-bg-color--light:var(--color-light);
--md-default-bg-color--dark:var(--color-dark);
--md-default-fg-color--lighter:var(--color-dark);
--md-primary-fg-color:var(--color-dark);
--scrollbar-highlight-color:var(--color-accent);
--md-code-fg-color:var(--color-accent);
--md-code-bg-color:var(--color-light);
--md-code-hl-color:var(--color-accent);
--md-typeset-color:var(--color-dark);
--md-typeset-a-color:var(--color-dark);
--md-typeset-a-hl-color:var(--color-accent);
--md-typeset-a-color--light:var(--color-accent);
--md-typeset-a-hl-color--light:var(--color-dark);
--md-typeset-a-color--dark:var(--color-light);
--md-warning-fg-color: red;
--md-footer-fg-color:var(--color-light);
--md-accent-fg-color:var(--color-accent);
}
.md-header {
background-color: var(--color-accent);
box-shadow: 0 0 .2rem #0000,0 .2rem .4rem #0000;
color: var(--color-light);
display: block;
left: 0;
position: sticky;
right: 0;
top: 0;
z-index: 4
}
.md-footer {
background-color: var(--color-accent);
color: var(--color-light)
}
@top-right {
content: "User Guide";
}
.md-nav__link--active {
color: var(--color-accent);
}
}

[kamilkrzyskow]

Hello @stephffuller,
if you can, please elaborate what other elements shouldn't be affected by .md-typeset a? Navigation elements? Everything in an <a> tag is a link, so everything should be affected. Perhaps you only want to style the links inside of the content area in the middle?

Then try putting your changes to the typeset colors inside a more specific CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

.md-content__inner .md-typeset a {
  /* --md-typeset... */
}

[stephffuller]

I think it was typeset that I tried, not typeset_a, which set the color of everything. The problem is that even setting md-typeset-a-color in the extra.css doesn't seem to be working to change the color of links.

[kamilkrzyskow]

If for some reason overriding the --md-typeset-a-color doesn't work as expected, then please create a full minimal reproduction and create a bug report Issue.

You can also just override the setting itself without relying on the color variables 🤔

.md-typeset a {
  color: custom-color;
}

Read up on the specificity rule linked above, as this is the key to overriding properly. The new CSS rule must be at least as specific as the rule it is overriding. So if :root doesn't work maybe :root > * would 🤔

[stephffuller]

Tried both of those and couldn't get what I wanted to work (active links and just links in general, not when hovering) are shown in the accent color I have set. I tried just setting the color explicitly, and that didn't work either. Interestingly, the color is shown when I hover, but not when active. If I click the link a second time, then it shows the color, but only until I click somewhere in the page body.

:root > * {
  --color-dark: #171F2E;
  --color-light: #EFEFF0;
  --color-accent: #E84200;
  --color-accent-2: #3A6B72;
  --color-accent-3: #637FAE;
  --md-default-fg-color:var(--color-dark);
  --md-default-fg-color--light:var(--color-dark);
  --md-default-fg-color--dark:var(--color-light);
  --md-default-bg-color:var(--color-light);
  --md-default-bg-color--light:var(--color-light);
  --md-default-bg-color--dark:var(--color-dark);
  --md-default-fg-color--lighter:var(--color-dark);
  --md-primary-fg-color:var(--color-dark);
  --scrollbar-highlight-color:var(--color-accent);
  --md-code-fg-color:var(--color-accent);
  --md-code-bg-color:var(--color-light);
  --md-code-hl-color:var(--color-accent);
  --md-typeset-color:var(--color-dark);
  --md-warning-fg-color: #723A4E;
  --md-footer-fg-color:var(--color-light);
  --md-accent-fg-color:var(--color-accent);
}
@page {
  size: letter portrait;
  margin: 25mm 10mm 25mm 10mm;
  counter-increment: page;
  font-family: "IBM Plex Sans","Inter","Inconsolata";
  white-space: pre;
  color: var(--color-light);
  @top-left {
    content: "Page " counter(page);
  }
  @top-right {
    content: "Platform User Guide";
  }
  .md-typeset a {
    color: #E84200;
  }
  .md-typeset a:active {
    color: #E84200;
  }
}

I'll try to create that minimal environment and submit the bug when I have a free moment. We're working on switching over from legacy gitbooks cli to mkdocs at the moment, so things are moving quickly.

[stephffuller]

Update. Our site switched over to mkdocs using mkdocs-material yesterday. Same config files etc, but somehow now the links are working properly. md-typeset-a is even working properly with :root > * { set. Not sure what happened, but it's working now, so we're all good. Many thanks for the assist, @kamilkrzyskow 🥇