更改颜色¶

与任何适当的 Material Design 实现一样，Material for MkDocs 支持 Google 的原始调色板，可以通过 mkdocs.yml 轻松配置。此外，可以使用 CSS 变量使用几行 CSS 自定义颜色，以适应您的品牌标识。

配置¶

调色板¶

配色方案¶

Material for MkDocs 支持两种配色方案：浅色模式（简称 default）和深色模式（称为 slate）。颜色方案可以通过 mkdocs.yml 进行设置：

theme:
  palette:
    scheme: default

基础颜色¶

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

theme:
  palette:
    primary: indigo

基础颜色支持以下几种：
alt text

强调色¶

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

theme:
  palette:
    accent: indigo

调色板切换¶

提供浅色和深色调色板可使您的文档在一天中的不同时间阅读舒适，因此用户可以相应地进行选择。将以下行添加到 mkdocs.yml：

theme:
  palette: 

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

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

此配置将在搜索栏旁边呈现调色板切换。请注意，您还可以为每个调色板定义 Primary 和 Accent 的单独设置。

系统首选项¶

通过使用媒体查询，可以将每个调色板链接到用户对浅色和深色外观的系统首选项。只需在 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

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

自动亮/暗模式¶

较新的操作系统允许在白天和黑夜自动切换浅色和深色外观。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 
      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

现在，每当作系统在浅色和深色外观之间切换时，Material for MkDocs 都会更改调色板，即使用户没有重新加载站点也是如此。

自定义¶

自定义颜色¶

Material for MkDocs 使用 CSS 变量（自定义属性）实现颜色。如果您想自定义调色板之外的颜色（例如，使用您的品牌特定颜色），您可以添加额外的样式表并调整 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

自定义配色方案¶

除了覆盖特定颜色外，您还可以通过将定义包装在 [data-md-color-scheme=“...”] 属性选择器中来创建自己的命名配色方案，然后您可以通过 mkdocs.yml 进行设置，如配色方案部分所述：

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