更改颜色¶

作为任何合适的 Material Design 实现，Material for MkDocs 支持 Google 的原始 color palette，可以通过 mkdocs.yml 轻松配置。此外，可以通过几行 CSS 自定义颜色，以适应您品牌的身份，使用 CSS variables。

配置¶

颜色调色板¶

颜色方案¶

5.2.0 default

Material for MkDocs 支持两种颜色方案：明亮模式，称为 default，和 黑暗模式，称为 slate。可以通过 mkdocs.yml 设置颜色方案：

theme:
  palette:
    scheme: default

点击一个图块以更改颜色方案：

主色¶

0.2.0 indigo

主色用于标题、侧边栏、文本链接和其他几个组件。要更改主色，请在 mkdocs.yml 中将以下值设置为有效的颜色名称：

theme:
  palette:
    primary: indigo

点击一个图块以更改主色：

请参阅下面的指南以了解如何设置 custom colors。

强调色¶

0.2.0 indigo

强调色用于表示可交互的元素，例如悬停链接、按钮和滚动条。可以通过选择有效的颜色名称在 mkdocs.yml 中更改它：

theme:
  palette:
    accent: indigo

点击一个图块以更改强调色：

请参阅下面的指南以了解如何设置 custom colors。

颜色调色板切换¶

7.1.0 .zip

提供明亮和黑暗的颜色调色板使您的文档在一天中的不同时间都易于阅读，因此用户可以相应选择。在 mkdocs.yml 中添加以下行：

theme:
  palette: # (1)!

    # 明亮模式的调色板切换
    - scheme: default
      toggle:
        icon: material/brightness-7 # (2)!
        name: 切换到黑暗模式

    # 黑暗模式的调色板切换
    - scheme: slate
      toggle:
        icon: material/brightness-4
        name: 切换到明亮模式

请注意，theme.palette 设置现在被定义为一个列表。
输入几个关键词以使用我们的 icon search 查找完美的图标，并单击短代码将其复制到剪贴板：

此配置将在搜索栏旁边渲染一个颜色调色板切换。请注意，您还可以为每个颜色调色板定义单独的 primary 和 accent 设置。

每个切换必须设置以下属性：

icon

此属性必须指向有效的图标路径，引用主题中捆绑的任何图标，否则构建将无法成功。一些流行的组合：

+ – material/brightness-7 + material/brightness-4
+ – material/toggle-switch + material/toggle-switch-off-outline
+ – material/weather-night + material/weather-sunny
+ – material/eye + material/eye-outline
+ – material/lightbulb + material/lightbulb-outline

name

此属性用作切换的 title 属性，应设置为可辨别的名称以提高可访问性。它呈现为 tooltip。

系统偏好¶

7.1.0 .zip

每个颜色调色板可以通过使用媒体查询链接到用户的系统偏好（明亮和黑暗外观）。只需在 mkdocs.yml 中的 scheme 定义旁边添加一个 media 属性：

theme:
  palette:

    # 明亮模式的调色板切换
    - media: "(prefers-color-scheme: light)"
      scheme: default
      toggle:
        icon: material/brightness-7
        name: 切换到黑暗模式

    # 黑暗模式的调色板切换
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      toggle:
        icon: material/brightness-4
        name: 切换到明亮模式

当用户首次访问您的网站时，媒体查询按定义的顺序进行评估。第一个匹配的媒体查询选择默认颜色调色板。

自动明亮/黑暗模式¶

9.5.0 .zip

较新的操作系统允许在白天和夜间自动切换明亮和黑暗外观。Material for MkDocs 添加了对自动明亮/黑暗模式的支持，将颜色调色板选择委托给用户的操作系统。在 mkdocs.yml 中添加以下行：

theme:
  palette:

    # 自动模式的调色板切换
    - media: "(prefers-color-scheme)"
      toggle:
        icon: material/brightness-auto
        name: 切换到明亮模式

    # 明亮模式的调色板切换
    - media: "(prefers-color-scheme: light)"
      scheme: default # (1)!
      toggle:
        icon: material/brightness-7
        name: 切换到黑暗模式

    # 黑暗模式的调色板切换
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      toggle:
        icon: material/brightness-4
        name: 切换到系统偏好

您还可以为每个颜色调色板定义单独的 primary 和 accent 设置，即明亮和黑暗模式的不同颜色。

Material for MkDocs 现在将在操作系统在明亮和黑暗外观之间切换时更改颜色调色板，即使用户不重新加载网站。

自定义¶

自定义颜色¶

5.0.0 .zip

Material for MkDocs 使用 CSS variables（自定义属性）实现颜色。如果您想超出调色板自定义颜色（例如，使用您品牌特定的颜色），可以添加 additional style sheet 并调整 CSS 变量的值。

首先，在 mkdocs.yml 中将 primary 或 accent 值设置为 custom，以向主题发出您想定义自定义颜色的信号，例如，当您想覆盖 primary 颜色时：

theme:
  palette:
    primary: custom

假设您是 YouTube，并希望将主色设置为您品牌的调色板。只需添加：

docs/stylesheets/extra.css mkdocs.yml

:root  > * {
  --md-primary-fg-color:        #EE0F0F;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark:  #90030C;
}

extra_css:
  - stylesheets/extra.css

请参阅包含 color definitions 的文件以获取所有 CSS 变量的列表。

自定义颜色方案¶

除了覆盖特定颜色外，您还可以通过将定义包装在 [data-md-color-scheme="..."] attribute selector 中来创建自己的命名颜色方案，然后可以通过 mkdocs.yml 设置，如 color schemes 部分所述：

docs/stylesheets/extra.css mkdocs.yml

[data-md-color-scheme="youtube"] {
  --md-primary-fg-color:        #EE0F0F;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark:  #90030C;
}

theme:
  palette:
    scheme: youtube
extra_css:
  - stylesheets/extra.css

此外，slate 颜色方案通过 hsla 颜色函数定义其所有颜色，并从 --md-hue CSS 变量推导其颜色。您可以通过以下方式调整 slate 主题：

[data-md-color-scheme="slate"] {
  --md-hue: 210; /* (1)! */
}

hue 值必须在 [0, 360] 范围内。