Customizing mkdocs css file

Question

The links within the body change color once you hover and click on the link. Is there a way to have the color fix within the body of the mkdocs. I've been using some mkdocs documentation as an example, but so far I have this

  css: `
    body {
      font-family: ${theme.typography.fontFamily};
      --md-text-color: ${theme.palette.text.primary};
      --md-text-link-color: #8CD7F7;

      --md-code-fg-color: ${theme.palette.text.primary};
      --md-code-bg-color: ${theme.palette.background.paper};

    }

I would like the links to be the same when the user hovers and clicks on it. Whats the correct syntax for when the link is pressed or hovered over.

I've tried adding

.md-nav__link:hover { color: #8CD7F7; }
.md-nav__link--active { color: #8CD7F7; }

within the body, but that's not helping. I wonder if there's different syntax thats supposed to followed when inside the body

Answer 1

In my project I use, for example, two colors.

I created a folder in root called "stylesheets", where I created the extra.css file. That's what's inside of this file:

:root {
  --md-primary-fg-color: #5f64a0;
  --md-accent-fg-color: #5f64a0;
}

The first primary color is responsible for the upper bar (please, correct if I am using a wrong term) with the search to change the color. The second accent color changes the color of the link if you hover. It won't change the color when the link is clicked. If you keep the primary and accent colors the same, you will have the same color for links if you hover and the upper bar. If you comment the primary color, the upper bar will be purple by default and the links will be the accent color. Also, if you specify primary and accent colors, you will get the same color when the link is clicked.

Don't forget to configure your mkdocs.yml:

extra_css:
  - stylesheets/extra.css

theme:
    palette:
      primary: stylesheets/extra.css
    name: material
    logo: 'images/logo.png'