跳转至

Mkdocs-material个性化设置

1.个性化颜色样式

1.1使用官方提供的颜色样式

在mkdocs.yml文件的主题theme中添加palette属性，可以调整网站的各种显示元素的颜色。例如： 

theme:
  name: material
  palette:
    - media: "(prefers-color-scheme)"
      toggle:
        icon: material/brightness-auto
        name: Switch to light mode

    - media: "(prefers-color-scheme: light)"
      scheme: default
      primary: teal  
      accent: teal
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode

    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      primary: black
      accent: teal
      toggle:
        icon: material/brightness-4
        name: Switch to system preference
- media：媒体查询，用于选择要应用此palette的浏览器。

  • prefers-color-scheme：系统偏好颜色方案,根据浏览器颜色方案自动选择。
  • prefers-color-scheme: light：浅色配色方案
  • prefers-color-scheme: dark：深色配色方案
  • scheme：指定要应用的配色方案，官方提供深色配色方案（Slate）和浅色配色方案（default）。
  • primary：主色，用于导航栏、标题、侧边栏、文本链接和其他几个组件等。默认设置为indigo。
  • accent：强调色，用于表示可以与之交互的元素，例如悬停链接、按钮和滚动条。默认设置为indigo。
  • primary和accent均可用颜色：red、pink、purple、deep purple、indigo、blue、light blue、cyan、teal、green、light green、lime、yellow、amber、orange、deep orange
  • 仅primary可用颜色：brown、grey、blue grey、black、white
  • toggle：切换按钮的图标和名称。
  • toggle.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
  • toggle.name：切换按钮的名称，自定义。

1.2自定义颜色样式

如果不想使用官方提供的配色，希望自定义则需建立自己的CSS文件docs/stylesheets/extra.css，并修改mkdocs.yml文件。

1.2.1自定义配色方案

在docs/stylesheets/extra.css中添加如下代码： 

[data-md-color-scheme="custom_light"] {
  /* 主色 */
  --md-primary-fg-color:        #ffffff;  /* 导航栏前景色 */
  --md-primary-bg-color:        #007bff;  /* 导航栏背景色 */

  /* 辅助色 */
  --md-accent-fg-color:         #ff6347;  /* 链接/按钮高亮色 */

  /* 默认颜色 */
  --md-default-bg-color:        #FFFFFF;  /* 页面背景色 */

  /* 代码块颜色 */
  --md-code-bg-color:           #f8f9fa;  /* 代码背景色 */
  --md-code-fg-color:           #212529;  /* 代码文本色 */

  /* 文本颜色 */
  --md-typeset-color:           #333333;  /* 正文文本颜色 */

  /* 警告颜色 */
  --md-warning-fg-color:        #ffc107;  /* 警告提示框颜色 */

  /* 广告颜色 */
  --md-admonition-fg-color:     #6c757d;  /* 注释框文本色 */

  /* 阴影颜色 */
  --md-shadow-z1:               0 0.2rem 0.5rem rgba(0,0,0,.1); /* 一级阴影 */
}
在mkdocs.yml文件中添加如下代码： 
theme:
  palette:
    scheme: custom_light
extra_css:
  - stylesheets/extra.css
使用data-md-color-scheme选择自定义的配色方案，custom_light为自定义的配色方案名称。 - scheme：自定义配色方案名称，自定义。 - extra_css：自定义CSS文件路径，自定义。

1.2.2自定义primary和accent颜色

在docs/stylesheets/extra.css中添加如下代码： 

:root  > * {
  --md-primary-fg-color:        #dfee0f;
  --md-accent-fg-color:         #10333196;
}
在mkdocs.yml文件中添加如下代码： 
theme:
  palette:
    primary: custom
    accent: custom
extra_css:
  - stylesheets/extra.css

2.个性化字体

2.1使用官方提供的字体

在mkdocs.yml文件的主题theme中添加font属性，可以调整网站的字体。例如：