更改颜色¶

作为任何适当的材料设计实施，MkDocs材料支持谷歌的原始[调色板]，可以通过以下方式轻松配置 mkdocs.yml。此外，颜色可以通过几行CSS进行定制通过使用[CSS变量][自定义颜色]来适应您的品牌标识。

配置¶

调色板¶

配色方案¶

MkDocs的材质支持两种配色方案：一种是__light模式__，它只是称为“默认”，以及一个名为“板岩”的__dark模式。配色方案可以通过mkdocs.yml进行设置：

theme:
  palette:
    scheme: default

单击互动程序以更改配色方案：

原色¶

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

theme:
  palette:
    primary: indigo

单击互动程序以更改主色：

请参阅下面的指南，了解如何设置[自定义颜色]。

重点色¶

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

theme:
  palette:
    accent: indigo

单击互动程序以更改重点颜色：

请参阅下面的指南，了解如何设置[自定义颜色]。

调色板切换¶

提供浅色和深色调色板使您的文档令人愉快在一天中的不同时间阅读，因此用户可以相应地进行选择。添加将以下行转换为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

请注意，“theme.palette”设置现在被定义为列表。
输入几个关键字，使用我们的[图标搜索]找到完美的图标，然后单击短代码将其复制到剪贴板：

此配置将在搜索栏旁边呈现调色板切换。请注意，您还可以为`primary定义单独的设置以及每个调色板的[重音][调色板.重音]。

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

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

+ – 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”属性，应设置为一个可辨别的名称，以提高可访问性。它被渲染为[工具提示]。

系统偏好¶

每个调色板都可以链接到用户对光线的系统偏好通过使用媒体查询来显示深色外观。只需在旁边添加一个“media”属性 mkdocs.yml中的“方案”定义：

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

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

自动亮/暗模式¶

较新的操作系统允许在亮暗之间自动切换白天和晚上出现。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

您还可以为`primary和每个调色板都有不同的颜色，即不同的颜色亮暗模式。

MkDocs的材料现在将在每次操作时更改调色板系统在亮和暗外观之间切换，即使用户没有重新加载网站。

自定义¶

自定义颜色¶

MkDocs的材质使用[CSS变量]实现颜色（自定义属性）。如果你想自定义调色板之外的颜色（例如使用您的品牌特定颜色），您可以添加[附加样式表]，然后调整CSS变量的值。

首先，设置[primary][palette.primary]或[speech][paletter.speech]值在mkdocs.yml到custom中，向要定义的主题发出信号自定义颜色，例如，当你想覆盖“原色”时：

theme:
  palette:
    primary: custom

Let's say you're YouTube, and want to set the primary color to your brand's palette. Just add:

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

有关所有CSS变量的列表，请参阅包含[color-definitions]的文件。

自定义配色方案¶

除了覆盖特定颜色外，您还可以创建自己的命名配色方案通过将定义包装在[data-md配色方案=“…”]中 [属性选择器]，然后您可以通过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

此外，“板岩”配色方案通过“hsla”定义了它的所有颜色color函数，并从-md-hue` CSS变量推断其颜色。你可以通过以下方式调整“slate”主题：

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

“色调”值必须在“[0，360]”范围内`