Темизация

Темизация позволяет гибко настраивать визуальное оформление документации, адаптируя ее под ваш бренд или предпочтения.

Упралять темой документации можно с помощью конфигурационного файла theme.yaml в корне проекта либо при сборке через CLI.

Определение темы в файле конфигурации

Структура файла

Файл конфигурации theme.yaml задаёт цветовую палитру вашей документации. Цвет может быть определен как в общем для светлой и для темной темы, так и отдельно для каждой.

Параметры, указанные в секциях light или dark, имеют приоритет над общими значениями. То есть, если переменная определена одновременно и в основной секции, и в light или dark секции, то использоваться будет значение конкретной темы.

Цвет может быть задан в формате rgb, rgba, hex, hsl, hsla или названием цвета.

Пример файла конфигурации:

base-brand: rgb(152, 223, 37)
text-link: red

light:
    text-link: rgb(0, 255, 170)
    quote: rgb(255, 0, 255)

dark:
    quote: rgba(0, 208, 255, 0.33)
    base-background: hsl(30, 46, 41)

Параметр base-brand

Параметр base-brand является основным акцентным цветом темы. От значения base-brand автоматически определяются следующие зависимые параметры:

  • base-selection
  • text-link
  • text-link-hover
  • tab
  • tab-text-hover
  • quote

Любое значение переменной, автоматически рассчитанное от основного акцентного цвета, можно переопределить вручную в конфигурации.

Параметры

Ниже перечислены все возможные парамеры.

Параметры Описание
base-brand Основной акцентный цвет. Цвет табов, цитат, активных переключателей. Относительно него автоматически определяются цвета base-selection, text-link, text-link-hover, tab, tab-text-hover и quote.
base-background Фон страницы.
base-selection Выбранная страница в оглавлении и выбранный пункт дропдауна. Зависит от base-brand.
base-misc-light Фон фрагментов кода в тексте и больших блоков кода.
base-generic Цвет выделяющихся рядов в таблицах, кнопок, строки поиска.
base-generic-hover Цвет кнопок при наведении.
quote Цвет цитат. Зависит от base-brand.
tab Цвет линии табов. Зависит от base-brand.
tab-text-hover Цвет текста табов при наведении. Зависит от text-link.
popup-background Фон всплывающих подсказок.
popup-border Рамка всплывающих подсказок.
text-link Цвет ссылок. Зависит от base-brand.
text-link-hover Цвет ссылок, текста табов, радиобаттонов, пункта аккордиона при наведении. Зависит от base-brand.
text-primary Основоной текст, текст в таблицах.
text-secondary Цвет второстепенного текста. Пункты оглавления, значки настроек, языка и т.д.
text-complementary Цвет текста в блоке кода и пунктов оглавления при наведении. Зависит от base-brand.
text-hint "Предыдущая" и "Следующая" внизу страницы.
line-generic Цвет линии между элементами страницы, внешние рамки таблицы, общая линия табов, общая линия оглавления статьи.
simple-hover Цвет при наведении на страницу в оглавлении, выбранный пункт дропдауна, на значки настроек, языка и т.д.
code Цвет текста в блоке кода. Приоритетнее text-complementary.
code-background Фон блока кода.
inline-code Цвет текста в фрагменте кода.
inline-code-background Фон фрагмента кода.
table Цвет текста в таблице. Приоритетнее text-primary.
table-background Фон таблицы.
table-row-background Цвет фона выделяющихся рядов таблицы.
table-table-outer-border Рамка таблицы.
table-table-inner-border Внутренние рамки таблицы.
note-info Цвет иконки в заметке "Примечание" и заметке со своим заголовком.
note-info-background Цвет фона в заметке "Примечание" и заметке со своим заголовком.
note-info-border Рамка в заметке "Примечание" и заметке со своим заголовком.
note-tip Цвет иконки в заметке "Совет".
note-tip-background Цвет фона в заметке "Совет".
note-tip-border Рамка в заметке "Совет".
note-warning Цвет иконки в заметке "Важно".
note-warning-background Цвет фона в заметке "Важно".
note-warning-border Рамка в заметке "Важно".
note-important Цвет иконки в заметке "Внимание".
note-important-background Цвет фона в заметке "Внимание".
note-important-border Рамка в заметке "Внимание".
mini-toc-border Цвет общей линии оглавления статьи. Приоритетнее line-generic.
mini-toc Цвет текста оглавления статьи. Приоритетнее text-secondary.
mini-toc-hover Цвет текста оглавления статьи при наведении. Приоритетнее text-complementary.
mini-toc-active, Цвет текста активного пункта оглавления статьи. Приоритетнее text-primary.
mini-toc-active-border Цвет линии активного пункта оглавления статьи. Приоритетнее text-primary.

Определение base-brand при сборке

При отсутствии файла конфигурации цвет base-brand можен быть задан с помощью ключа запуска --theme

Например:

yfm -i ./input-folder -o ./ouput-folder --theme 'rgb(152, 223, 37)'
Предыдущая
Файл конфигурации линтера
Следующая
Расширенная навигация