如何为 mkdocs-material 指定自定义原色？答案

【问题标题】：How do I specify custom primary color for mkdocs-material?如何为 mkdocs-material 指定自定义原色？
【发布时间】：2020-07-21 15:28:38
【问题描述】：

我正在使用mkdocs-material 创建文档网站。如何指定我自己的自定义原色和副色？

我不想使用任何现有的颜色

【问题讨论】：

标签： material-design mkdocs

【解决方案1】：

我找到了路。

首先你在docs/stylesheets/中创建一个extra.css

:root {

    /* Primary color shades */
    --md-primary-fg-color: #861f41;
    --md-primary-fg-color--light: #861f4194;
    --md-primary-fg-color--dark: #ac325a;
    --md-primary-bg-color: hsla(0, 0%, 100%, 1);
    --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
    --md-text-link-color: hsla(231, 48%, 48%, 1);

    /* Accent color shades */
    --md-accent-fg-color: rgb(98, 18, 189);
    --md-accent-fg-color--transparent: hsla(189, 100%, 37%, 0.1);
    --md-accent-bg-color: hsla(0, 0%, 100%, 1);
    --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
  }
  
  :root > * {
  
    /* Code block color shades */
    --md-code-bg-color: hsla(0, 0%, 96%, 1);
    --md-code-fg-color: hsla(200, 18%, 26%, 1);

    /* Footer */
    --md-footer-bg-color: #861f41;
    --md-footer-bg-color--dark: hsla(0, 0%, 0%, 0.32);
    --md-footer-fg-color: hsla(0, 0%, 100%, 1);
    --md-footer-fg-color--light: hsla(0, 0%, 100%, 0.7);
    --md-footer-fg-color--lighter: hsla(0, 0%, 100%, 0.3);
  }

然后在mkdocs.yml中配置

extra_css:
  - stylesheets/extra.css

注意：使用“--md-text-link-color”设置超链接颜色已被“--md-typeset-a-color”弃用。可以在以下位置阅读所有颜色定义：

https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss

【讨论】：

--md-text-link-color 对您有用吗？我试图让超链接的颜色与--md-primary-fg-color 不同，但没有任何运气。

【解决方案2】：

很好，这个对我帮助很大

但是，不要忘记将 extra_css 作为外部键

edit_uri: ""
url_start: "..."

# Copyright
copyright: "..."

extra_css: # <-------- HERE
- stylesheets/extra.css 

# Configuration
theme:
  name: material
  custom_dir: material
 ...

【讨论】：

是的，如果没有 config 键，它将无法工作。不过，我确实在答案中提到了这一点。
谢谢！在没有意识到的情况下，我在theme 中添加了extra_css，但这不起作用。