颜色设置¶

正如任何符合规范的 Material Design 实现一样，Material-for-MkDocs 支持 Google 的原始主题颜色，并且可以通过 mkdocs.yml 文件轻松配置这些颜色。此外，通过使用CSS变量，你还可以仅用几行CSS代码来自定义颜色，以符合你的品牌形象。

配置¶

主题颜色¶

配色方案¶

Material-for-MkDocs 支持两种配色方案：一个 light 模式，它被称为 default ，和一个 dark模式，它被称为 slate 。配色方案可以通过 mkdocs.yml 来设置：

theme:
  palette:
    scheme: default

点击下面的按钮进行主题颜色的切换：

主色调¶

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

theme:
  palette:
    primary: indigo

点击下面的按钮切换站点的主色调：

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

强调色¶

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

theme:
  palette:
    accent: indigo

点击下面的按钮切换站点的强调色：

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

主题颜色切换¶

提供浅色和深色主题颜色使您的文档在一天中的不同时间阅读起来很愉快，因此用户可以相应地进行选择。在 mkdocs.yml 中添加以下行：

theme:
  palette: # (1)!

    # Palette toggle for light mode
    - scheme: default
      toggle:
        icon: material/brightness-7 # (2)!
        name: Switch to dark mode

    # Palette toggle for dark mode
    - scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to light mode

1、 注意 theme.palette 设置现在定义为一个列表。

2、输入几个关键字，使用我们的 icon search 找到匹配的图标，然后点击短代码将其复制到剪贴板：

这个配置将在搜索栏旁边呈现一个主题颜色切换。注意，您还可以为 primary 和 accent 定义单独的设置。

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

此属性必须指向引用与主题绑定的有效图标路径，否则构建将不成功。一些流行的组合：

• + – 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

此属性用作开关的 title 属性，并应设置为可识别的名称，以提高可识别性。它呈现为tooltip。

系统设置¶

通过使用媒体查询，每个主题颜色都可以与用户对于明暗外观的系统偏好相关联。只需在 mkdocs.yml 中的 scheme 定义旁边添加一个 media 属性：

theme:
  palette:

    # Palette toggle for light mode
    - media: "(prefers-color-scheme: light)"
      scheme: default
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode

    # Palette toggle for dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to light mode

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

自动 light / dark 模块¶

最新一些的操作系统允许在白天和夜晚之间自动切换明暗外观。Material-for-MkDocs 增加了对自动明暗模式的支持，将主题颜色的选择委托给用户的操作系统。在 mkdocs.yml 文件中添加以下行：

theme:
  palette:

    # Palette toggle for automatic mode
    - media: "(prefers-color-scheme)"
      toggle:
        icon: material/brightness-auto
        name: Switch to light mode

    # Palette toggle for light mode
    - media: "(prefers-color-scheme: light)"
      scheme: default # (1)!
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode

    # Palette toggle for dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to system preference

1、 您还可以为每种主题颜色分别定义primary和accent的设置，即为明模式和暗模式设置不同的颜色。

现在，每当操作系统在明暗外观之间切换时，Material-for-MkDocs 都会更改主题颜色，即使用户没有重新加载网站也是如此。

自定义¶

自定义颜色¶

Material-for-MkDocs 使用 CSS variables 来实现颜色。如果您想要对主题颜色之外的颜色进行自定义（例如，使用您品牌的特定颜色），您可以添加一个 additional style sheet 并调整CSS变量的值。

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

theme:
  palette:
    primary: custom

假设您是 YouTube ，并且想要将主色设置为您品牌配色。只需添加：

: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 部分中的说明进行设置：

[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)! */
}

1、 其中 hue 值必须在[0, 360] 范围内