Настройка цвета в MkDocs-Material

Это короткая заметка об использовании цвета. Более полная информация находится тут.

Вы можете настроить цвет элементов сайта несколькими способами, внеся соответствующие изменения в mkdocs.yml или некоторые другие файлы:

• указав предустановленную цветовую схему;
• указав primary или accent цвет из числа предложенных;
• настроить переключение цветовой схемы;
• указать свои собственные цвета для элементов сайта.

Далее немного более подробно об этих возможностях.

Указание предустановленной цветовой схемы

MkDocs-Material предлагает две цветовые схемы: default (светлая) и slate (темная). Просто добавьте в mkdocs.yml:

theme:
  palette:
    scheme: default

Аналогично можно установить темную цветовую схему.

Указание primary или accent цветов

Элементы primary - это заголовок, боковая панель, текстовые ссылки и некоторые другие. Элементы accent - это те, с которыми можно взаимодействовать, например, ссылки, кнопки или полосы прокрутки.

Чтобы задать цвета элементов primary или accent, добавьте:

theme:
  palette:
    primary: grey
    accent: blue

Доступные цвета для primary: red, pink, purple, deep purple, indigo, blue, light blue, cyan, teal, green, light green, lime, yellow, amber, orange, deep orange, brown, grey, blue grey, black, white.

Цвета для accent доступны из того же набора, но он только до deep orange.

Настройка переключения цветовой схемы

Можно предоставить пользователю возможность переключать схему. Для этого добавьте:

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

Кнопка переключения будет доступна в верхней части страницы. При этом внешний вид кнопки можно также настроить, заменив значение 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

Можно активировать автоматическое переключение схемы в зависимости от цветовой схемы в системе пользователя. Для этого просто добавьте свойство 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

Некоторые современные системы позволяют также автоматически выбирать цветовую схему в зависимости от времени суток пользователя. Для такой настройки добавьте:

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

Указание собственных цветов

Выше было видно, что цвета элементов можно настроить путем выбора значений из определенного набора, но есть возможность указывать свои собственные цвета (но для тех же primary и accent элементов). Для этого создайте дополнительный файл docs/stylesheets/extra.css и добавьте в него:

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

После этого, в mkdocs.yml добавьте:

extra_css:
  - stylesheets/extra.css

В результате изменятся цвета primary элементов для светлой и темной тем.

Наборы собственных цветовых решений можно именовать, получив тем самым свои собственные схемы, например:

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

Для активации именованной схемы[data-md-color-scheme="slate"] { --md-hue: 210; } добавьте в mkdocs.yml:

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

Кроме этого, можно настраивать цветовые наборы с использованием функции hsla, которая позволяет указывать еще и насыщенность:

[data-md-color-scheme="slate"] {
  --md-hue: 210; 
}