Документация LMS версия 0.1.0

Документация/Рецепты/Перекрасить школу под фирменный стиль

Перекрасить школу под фирменный стиль

Задача: школа выглядит как наш продукт, а должна выглядеть как ваша школа — фирменный цвет, свой шрифт, свои углы.

Сколько занимает: пять минут на цвет, полчаса вместе с проверкой.

Работает ли сегодня: да, целиком. Это единственный рецепт в разделе, который не упирается ни в API, ни в якоря.

Что понадобится #

Право менять настройки школы и фирменный цвет в шестнадцатеричном виде — тот самый, который лежит в вашем брендбуке.

Шаг 1. Одна строка #

Настройки школы → «Оформление» → создать тему → в поле CSS:

:root {
  --brand: #C2185B;
}

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

И всё это — отдельно для светлой и тёмной темы. Малиновая школа остаётся малиновой в тёмной теме, а не превращается в бурую.

Почему одна переменная, а не десять #

Из --brand производные считаются формулами в цветовом пространстве, где светлота отделена от насыщенности. Две из них считаются не «покрасивее», а по порогу контраста:

  • --text-accent — акцент, когда он текст или ссылка. Всегда темнее заливки, потому что текст обязан давать контраст 4.5:1, а фирменный цвет школы этого не гарантирует.
  • --text-on-accent — цвет надписи поверх акцентной заливки. Считается сам: на тёмном акценте светлый, на светлом — тёмный. Поэтому у школы с песочным фирменным цветом не получится белых букв на жёлтой кнопке.
  • --focus-ring — кольцо фокуса. Намеренно не равно акценту: у светлой школы акцент даёт 1.5:1, кольцо исчезает, и вместе с ним исчезает возможность работать с клавиатуры.

Задав десять переменных руками, вы эти пороги потеряете. Задав одну — получите их бесплатно.

Шаг 2. Шрифт #

:root {
  --brand: #C2185B;
  --font-sans-brand: "PT Sans";
}

Менять --font-sans целиком не нужно: --font-sans-brand стоит первой в её списке, а запасные варианты на случай «шрифт не загрузился» останутся нашими.

Шрифт должен быть доступен браузеру: системный, подключённый через @font-face в той же теме или через ваш CDN.

Шаг 3. Углы и плотность #

:root {
  --brand: #C2185B;
  --font-sans-brand: "PT Sans";

  /* Острые углы вместо скруглённых */
  --radius-control: 0;
  --radius-card: 0;

  /* Плотнее: было 16, стало 12 */
  --space-4: 12px;

  /* Плоско: без теней у карточек */
  --shadow-card: none;
}

Полный перечень с описаниями и значениями по умолчанию — Переменные оформления.

Шаг 4. Применить #

Предпросмотр → применить. История правок сохраняется: если получилось не то, откат к предыдущей редакции — одна кнопка.

Что проверить обязательно #

Четыре вещи. Первые три — за минуту, четвёртая — то, из-за чего вообще написан этот раздел.

1. Тёмная тема. Переключите тему в системе или в настройках и пройдите те же экраны. Акцент в тёмной теме автоматически светлеет — убедитесь, что получившийся оттенок вам подходит.

2. Кольцо фокуса. Нажмите Tab несколько раз на любом экране. Кольцо должно быть видно на каждом элементе. Если вы не переопределяли --focus-ring, оно видно по построению; если переопределяли — проверьте на светлых подложках.

3. Текст на акценте. Найдите главную кнопку и прочитайте надпись на ней. Если вы не трогали --text-on-accent, она читается по построению.

4. Экраны, которые темой не оформляются. Их три: вход, настройки школы и настройки аккаунта. Они специально исключены, и это значит, что там ваш фирменный цвет не появится. Это не ошибка — это аварийный выключатель: экран, на котором чинят последствия неудачной темы, ломать нельзя в принципе.

Чего этим не сделать #

Спрятать конкретный элемент. Переменные меняют вид везде, где используются. Задачи вида «убрать колонку из таблицы заказов» решаются якорями, а их в продукте пока нет.

Поменять цвета состояний. Зелёное «оплачено» и красное «отказ» не отдаются школе намеренно: они должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда.

Написать селектор по нашей вёрстке. Технически можно, но это отложенная поломка: при первой же перевёрстке правило перестанет применяться — молча, при обновлении, без ошибки в логах.

Готовый пример целиком #

Скопируйте, замените цвет и шрифт на свои:

:root {
  /* Единственное обязательное */
  --brand: #C2185B;

  /* Необязательное */
  --font-sans-brand: "PT Sans";
  --radius-control: 4px;
  --radius-card: 4px;
  --shadow-card: none;
}

Всё остальное — акцент, наведение, нажатие, ссылки, кольцо фокуса, тёмная тема — посчитается само.

Эта страница в Markdown