Темы для дефолтного шаблона

Тему дефолтного шаблона задают одним <style>-блоком, который переопределяет переменные Pico CSS и вставляется в админке через HTML Injection. Ни пересборки, ни форка — вставка попадает в <head> после таблицы стилей, поэтому ваши значения побеждают.

🎨 Попробуйте вживую: страница Редактор тем отрисовывает интерактивный редактор прямо на этом сайте — крутите переменные Pico с живым превью, а войдя админом, жмите Save, и он запишет тему за вас.

Редактор — это просто кастомный шаблон (_layouts/theme_editor.html) со встроенным сохранением: он вызывает GraphQL-мутации createHtmlInjection / updateHtmlInjection, гейтит их проверкой админа (currentUser.IsAdmin() в шаблоне, сервер перепроверяет), поэтому Save админа попадает прямо в HTML-инъекцию сайта. Это общий приём — на кастомном шаблоне можно нарастить любой инструмент, который ходит в API: хоть редактор Markdown, ровно так же, как канбан-доска.

Поставить редактор на свой сайт можно из trip2g/theme_editor_template: curl -fsSL https://github.com/trip2g/theme_editor_template/releases/latest/download/theme_editor.html -o _layouts/theme_editor.html, затем добавьте заметку с layout: theme_editor. — крутите переменные Pico с живым превью, а войдя админом, жмите Save, и он запишет тему за вас.

Дефолтный шаблон — это кастомная сборка Pico CSS v2.1.1. Весь его вид — цвета, отступы, шрифты, скругления — держится на CSS-переменных --pico-*. Меняете переменные — и весь сайт перекрашивается разом.

Куда вставлять тему

Админка → SEO & URLs → HTML Injections → + Add.

Заполните форму:

Placement — Head (грузится внутри <head>, поэтому переопределения бьют базовые стили)
HTML Content — ваш блок <style>…</style>
Description — название для себя, например Тёмно-фиолетовая тема
Position — порядок среди вставок (меньше — раньше); оставьте 0
Active From / Active To — необязательное окно дат (удобно для сезонных тем); пусто — работает всегда

Сохраните. Вставка глобальная — действует на каждой странице инстанса. Темы для отдельной заметки нет.

Что вставили, то и отрендерится дословно. Случайный <style> или <script> выполнится. Вставляйте только тот CSS, что писали сами или которому доверяете.

Какие переменные Pico можно переопределять

Это реальные переменные, которые читает шаблон. Переопределяйте любую на :root.

Цвета

Переменная	За что отвечает
`--pico-primary`	Акцентный цвет — ссылки, активное меню, выделения
`--pico-primary-hover`	Акцент при наведении
`--pico-primary-underline`	Цвет подчёркивания ссылок
`--pico-background-color`	Фон страницы
`--pico-color`	Цвет основного текста
`--pico-contrast`	Контрастный текст (меню в шапке)
`--pico-muted-color`	Вторичный/приглушённый текст
`--pico-muted-border-color`	Границы, разделители
`--pico-card-background-color`	Фон карточки / плитки журнала
`--pico-card-sectioning-background-color`	Фон шапки/подвала карточки
`--pico-h1-color` … `--pico-h6-color`	Цвета заголовков
`--pico-code-background-color`, `--pico-code-color`	Инлайн-код
`--pico-mark-background-color`, `--pico-mark-color`	`==выделение==`
`--pico-blockquote-border-color`	Полоса слева у цитаты

Типографика и форма

Переменная	За что отвечает
`--pico-font-family-sans-serif`	Основной шрифтовой стек
`--pico-font-family-monospace`	Шрифт кода
`--pico-font-size`	Базовый размер шрифта
`--pico-line-height`	Межстрочный интервал
`--pico-font-weight`	Базовая насыщенность
`--pico-border-radius`	Скругление углов
`--pico-spacing`	Базовая единица отступа
`--pico-typography-spacing-vertical`	Промежуток между абзацами

Переменные самого trip2g

Переменная	По умолчанию	За что отвечает
`--site-max-width`	`1440px`	Максимальная ширина шапки, контента, подвала
`--header-h`	`56px`	Высота липкой шапки

Светлая и тёмная тема

Шаблон умеет светлый и тёмный режимы и запоминает выбор читателя. Он ставит data-theme="light" или data-theme="dark" на элемент <html>. Палитра Pico по умолчанию — лазурная (#0172ad светлая, #01aaff тёмная).

Оформляйте каждый режим отдельно:

:root — оба режима
:root[data-theme="light"] — только светлый
:root[data-theme="dark"] — только тёмный

Готовый пример: фиолетовая тема

Вставьте это в Head-вставку. Она переакцентирует оба режима и затемняет тёмный фон.

<style>
:root {
  --pico-primary: #7c3aed;
  --pico-primary-hover: #6d28d9;
  --pico-primary-underline: rgba(124, 58, 237, 0.45);
  --pico-border-radius: 0.75rem;
  --pico-font-family-sans-serif:
    "Inter", system-ui, -apple-system, sans-serif;
  --site-max-width: 1100px;
}

:root[data-theme="light"] {
  --pico-background-color: #faf9fc;
  --pico-primary: #7c3aed;
  --pico-primary-hover: #6d28d9;
}

:root[data-theme="dark"] {
  --pico-background-color: #0f0f16;
  --pico-card-background-color: #191922;
  --pico-color: #e6e6ee;
  --pico-primary: #a78bfa;
  --pico-primary-hover: #c4b5fd;
}
</style>

Поменяйте шесть hex-значений — получите другой бренд. Всё остальное — карточки, меню, коллауты, код — перекрасится от этих переменных.

Не пишите a { color: purple !important } и не перекрашивайте .content h1 вручную. Вы будете драться с базовой таблицей стилей через !important и сломаете тёмную тему. Переопределяйте переменные — одно изменение, оба режима, без !important.

Кастомные классы, за которые можно цепляться

Для правок сверх цветов шаблон использует стабильные BEM-классы. Цельтесь в них из вставленного CSS:

Класс	Элемент
`.site-header`, `.site-header__logo`, `.site-header__nav`	Верхняя шапка
`.site-footer`, `.site-footer__column-title`	Подвал
`.layout`, `.layout__main`, `.layout__sidebar`	Сетка страницы
`.content`, `.content__title`, `.content__body`	Область текста заметки
`.magazine`, `.magazine-item`, `.magazine-item__title`	Сетка связанных заметок
`.sidebar-nav`	Навигация в сайдбаре
`.callout`, `.callout--<тип>`	Коллауты Obsidian (`--note`, `--warning`, `--tip`, …)

У коллаутов на каждый тип есть переменные --callout-color и --callout-bg, так что один тип можно перекрасить, не трогая остальные:

<style>
.callout--tip { --callout-color: #7c3aed; --callout-bg: rgba(124, 58, 237, 0.1); }
</style>

Подключить свой шрифт

Pico читает тот шрифтовой стек, который вы зададите. Импортируйте файл, затем направьте на него переменную:

<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap");
:root { --pico-font-family-sans-serif: "Manrope", system-ui, sans-serif; }
</style>

Импортируйте из Head-вставки, чтобы шрифт был доступен до первой отрисовки.

Дизайн-заметка: живой редактор тем (идея, ещё не сделано)

Визуального редактора тем сегодня нет. CSS правится руками.

Но его можно собрать из уже готовых кусков. Редактор тем мог бы приехать как кастомный лейаут — тот же механизм, на котором работает Kanban-доска: файл в _layouts/, выбираемый через layout: во фронтматтере. Такой лейаут рисовал бы палитры-пикеры, показывал живой предпросмотр страницы с выбранными --pico-* и при сохранении вызывал бы GraphQL-мутацию updateHtmlInjection, записывая сгенерированный <style> в ту самую Head-вставку, которую вы сейчас заполняете руками.

Всё нужное уже на месте: кастомные лейауты, хранилище HTML-вставок в админке и GraphQL-мутация для записи в него. Не хватает самого UI редактора. Пока его не собрали, эта страница — ручной путь, а ручной путь — это всего лишь блок <style>.

Смотрите также

Дефолтный шаблон — структура, шапка, подвал, сайдбары
BEM-именование в шаблонах — классы, за которые можно цепляться
yield_blocks — CSS/JS на страницу вместо глобального
Кастомные шаблоны — заменить шаблон целиком