Цветовая палитра

Цветовая схема

Material for MkDocs поддерживает две цветовые схемы: светлую (значение default) и тёмную (значение slate). Чтобы выбрать цветовую схему, используйте следующий код:

theme:
  palette:
    scheme: slate

Нажмите на кнопки, чтобы изменить цветовую схему:

default slate

Основной цвет

Основной цвет используется в шапке сайта, текстовых ссылках и в некоторых других компонентах. Чтобы его изменить, нужно поменять следующее значение на одно из доступных:

theme:
  palette:
    primary: black

Нажмите на кнопки, чтобы изменить основной цвет:

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

Акцентный цвет

Акцентный цвет используется для выделения элементов, с которыми можно взаимодействовать, например, ссылок при наведении, кнопок, колеса прокрутки. Чтобы его изменить, нужно поменять следующее значение на одно из доступных:

theme:
  palette:
    accent: indigo

Нажмите на кнопки, чтобы изменить акцентный цвет:

red pink purple deep purple indigo blue light blue cyan teal green light green lime yellow amber orange deep orange

Переключатель цветовой палитры

Можно также добавить переключатель между светлой и тёмной темой:

theme:
  palette:

    # Переключатель для светлой темы
    - scheme: default
      toggle:
        icon: material/brightness-7
        name: Switch to 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

Список всех доступных иконок можно найти здесь.

title

Это свойство используется в качестве всплывающей подсказки при наведении на переключатель.

Системные предпочтения

Каждая цветовая палитра может быть связана с системными предпочтениями пользователя в отношении светлых и темных тонов с помощью медиа-запроса. Просто добавьте свойство media рядом с определением схемы:

theme:
  palette:

    # Переключатель для светлой темы
    - media: "(prefers-color-scheme: light)"
      scheme: default
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode

    # Переключатель для тёмной темы
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to light mode