Готовые темы
В репозитории лежат семь тем. Шесть — это одна папка с theme.json: меняются только цвета, радиусы и, у одной, размеры текста. Седьмая показывает полный набор: бренд, логотип, свой CSS.
Ниже — палитры тем. Как это выглядит целиком, проще посмотреть у себя: тема ставится в пак за одну команду.
Светлые
Бумага
Тёплая бумага, приглушённый синий, острые углы. Для практики, которую читают часами.
Слива
Серо-лиловый нейтрал, сливовый акцент, крупные скругления.
Высокий контраст
Чистый контраст, двойные границы, крупный текст — для проектора и слабого зрения.
Тёмные
Синька
Чертёжная синька, циан, нулевые радиусы.
Хвоя
Хвойная тёмная, мятный акцент, мягкие скругления.
Уголь и янтарь
Тёплый уголь и янтарь, малые радиусы.
Фирменная тема курса
Седьмая тема — пример полного набора для конкретного заказчика: пара «жёлтый и почти чёрный», обе схемы, кнопки-пилюли, логотип и favicon в assets/, свой theme.css на три десятка строк.
Она же — напоминание про права: логотип и фирменные цвета принадлежат заказчику, и использовать их в своём курсе можно только с его разрешения.
Поставить тему в пак
cp -r themes/forest/. packs/<ваш-пак>/theme/
docker compose -f deploy/student/docker-compose.yml restart runner
Переделать под свой курс
Проще править готовую палитру, чем собирать с нуля: в темах уже согласованы статусы и подсветка кода.
title, subtitle, logoText, footer — название курса, номер модуля, к кому идти с вопросами.
Минимум — bg, surface, panel, ink, muted, line, accent, on-accent. Остальное подтянется из дефолта.
scheme: "auto" оставит студенту переключатель, "light" или "dark" зафиксируют одну и спрячут кнопку.
Логотип, favicon и шрифты — файлами в theme/assets/: образ работает без интернета, внешние адреса блокирует CSP.