# Темы школы

Тема — это ваш CSS, применённый ко всей школе. Здесь про то, куда его писать,
как посмотреть результат до применения и как вернуться назад, если получилось
не то.

Если вы дошли сюда потому, что уже сломали интерфейс, — вам нужен
[Аварийный выключатель](/appearance/kill-switch/), и он открывается без входа
в настройки.

## Тема — сущность, а не поле

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

Что умеет раздел «Оформление» в настройках школы:

- **создать тему** и дать ей имя — «Фирменный стиль», «Новогодняя»;
- **большое поле CSS** с подсветкой и проверкой синтаксиса;
- **предпросмотр до применения** — на настоящих экранах школы, а не на абстрактном
  примере с кнопкой и карточкой;
- **применить** к школе;
- **откатить** к предыдущей редакции — история правок хранится;
- **вернуться к стандартному оформлению** одной кнопкой.

Предпросмотр здесь важнее, чем кажется. Оформление ломается не на кнопке, которую
вы правите, а на экране, о котором вы не подумали, — и увидеть это надо до того,
как его увидит ученик.

## Что писать

В подавляющем большинстве случаев — переопределение переменных. Одна строка
перекрашивает школу целиком:

```css
:root { --brand: #C2185B; }
```

Из `--brand` выводятся акцент, наведение, нажатие, бледная подложка, рамка, цвет
ссылки и кольцо фокуса — **отдельно для светлой и тёмной темы**. Поэтому малиновая
школа остаётся малиновой и в тёмной теме, а не превращается в бурую.

Дальше — шрифт, скругления, плотность:

```css
:root {
  --brand: #C2185B;
  --font-sans-brand: "PT Sans";
  --radius-card: 0;
  --radius-control: 0;
  --space-4: 12px;
}
```

Полный перечень с описаниями и значениями по умолчанию —
[Переменные оформления](/appearance/variables/). Готовый разбор одной задачи
до конца — рецепт [Перекрасить школу под фирменный стиль](/recipes/brand-colors/).

## Чего писать не стоит

**Селекторов по нашей вёрстке.** Классы вроде `.text-body` не являются публичным
контрактом, и правило, написанное по ним, сломается при первой же перевёрстке —
молча, при обновлении, без ошибки в логах. CSS не падает при неверном селекторе,
он просто перестаёт применяться, и вы узнаете об этом от клиента через месяц.

Для случаев «уберите тень у карточки курса» есть [якоря](/appearance/anchors/) —
стабильные атрибуты, которые мы обязуемся не менять. Сейчас их в продукте ещё нет,
и до тех пор такие задачи честно не решаются: подобранный селектор — это отложенная
поломка, а не решение.

**Переменных с пометкой «внутренняя».** Их мы меняем свободно и без предупреждения.

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

## Граница с блоками кода

Тема оформляет **всю школу**. [Блок CSS](/appearance/code-blocks/) в конструкторе
оформляет **свою страницу** и ограничен ею движком.

Разные инструменты, разные места. Страница, переоформившая админку, — дефект,
а не возможность.

## Где тема не применяется никогда

Три места, и все три — те, через которые чинят последствия ошибки:

1. **Экран входа.**
2. **Настройки школы и настройки аккаунта**, включая сам раздел «Оформление».
3. Плюс адрес, открывающий любую страницу без темы.

Это и есть аварийный выключатель. Ему отведена [отдельная
страница](/appearance/kill-switch/) — не для объёма, а потому что её ищут
в панике и находят поиском.