自定义 mkdocs css 文件

Question

将鼠标悬停并单击 link 后，正文中的 link 会改变颜色。有没有办法在 mkdocs 的正文中修复颜色。我一直在使用一些 mkdocs documentation 作为示例，但到目前为止我有这个

  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};

    }

我希望 link 在用户悬停并单击它时相同。按下或悬停 link 时的正确语法是什么？

我试过添加

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

在体内，但这没有帮助。我想知道在体内时是否应该遵循不同的语法

Answer 1

在我的项目中，我使用了两种颜色。

我在根目录下创建了一个名为“stylesheets”的文件夹，我在其中创建了 extra.css 文件。这就是这个文件的内容：

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

第一个原色负责上栏（如果我使用了错误的术语，请更正）与搜索更改颜色。如果您悬停，第二种强调色会更改 link 的颜色。单击 link 时不会更改颜色。如果您保持主色和强调色相同，那么当您将鼠标悬停在上部栏时，link 将具有相同的颜色。如果您注释原色，则上部栏默认为紫色，link 将成为强调色。此外，如果您指定原色和强调色，单击 link 时将获得相同的颜色。

不要忘记配置您的 mkdocs.yml:

extra_css:
  - stylesheets/extra.css

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

自定义 mkdocs css 文件

Customizing mkdocs css file

css

mkdocs