> ## Documentation Index
> Fetch the complete documentation index at: https://faq.exode.biz/llms.txt
> Use this file to discover all available pages before exploring further.

# Темы оформления

> Светлая и тёмная тема, тема по умолчанию и настройка фирменных цветов школы

Раздел «Цветовая схема» на вкладке `Настройки → Оформление и бренд` (`/manage/school/settings/preferences`) управляет темами оформления и фирменными цветами школы. Настройки применяются к публичному сайту и личному кабинету учеников.

<img src="https://mintlify.s3.us-west-1.amazonaws.com/exode-faq/images/online-schools/school-setup/themes.png" alt="Настройка цветовой схемы и фирменных цветов" />

## Доступные темы

Приложение поддерживает две цветовые схемы (`AppColorScheme`):

| Тема    | Код (`AppColorScheme`) | Описание                      |
| ------- | ---------------------- | ----------------------------- |
| Светлая | `BrightLight`          | Светлое оформление интерфейса |
| Тёмная  | `SpaceGray`            | Тёмное оформление интерфейса  |

Управление темами делится на два параметра: какие темы доступны пользователю и какая тема применяется по умолчанию.

### Темы, доступные пользователям

В выпадающем списке выбирается, между какими темами сможет переключаться посетитель школы:

| Значение         | Что доступно пользователю                       |
| ---------------- | ----------------------------------------------- |
| Светлая и тёмная | Обе темы, пользователь переключает сам          |
| Только тёмная    | Интерфейс всегда в тёмной теме (`SpaceGray`)    |
| Только светлая   | Интерфейс всегда в светлой теме (`BrightLight`) |

### Тема по умолчанию

Если пользователю доступны обе темы, дополнительно выбирается тема по умолчанию:

| Значение       | Поведение                                              |
| -------------- | ------------------------------------------------------ |
| Системная тема | Тема подбирается по настройкам устройства пользователя |
| Тёмная тема    | По умолчанию открывается тёмная тема                   |
| Светлая тема   | По умолчанию открывается светлая тема                  |

<Note>
  Когда доступны обе темы, в настройках отображается переключатель «Светлая / Тёмная» — он меняет тему предпросмотра, чтобы вы могли настроить фирменные цвета отдельно для каждой схемы.
</Note>

## Фирменные цвета

Ниже переключателя тем задаются фирменные цвета школы. Каждый цвет настраивается отдельно для светлой и тёмной темы через `ColorPicker`.

| Переменная                     | Что задаёт                                         | Значение по умолчанию (светлая) | Значение по умолчанию (тёмная) |
| ------------------------------ | -------------------------------------------------- | ------------------------------- | ------------------------------ |
| `--accent`                     | Акцентный цвет (ссылки, активные элементы, кнопки) | `#fa6c1c`                       | `#fa6c1c`                      |
| `--text_primary`               | Основной цвет текста                               | `#000000`                       | `#e1e3e6`                      |
| `--button_commerce_background` | Фон кнопки покупки/коммерции                       | `#4bb34b`                       | `#4bb34b`                      |

Рядом с каждым цветом есть иконка-подсказка с описанием, за что он отвечает. Если цвет изменён относительно значения по умолчанию, появляется кнопка возврата к базовому цвету.

<Steps>
  <Step title="Выберите тему предпросмотра">
    Переключателем «Светлая / Тёмная» выберите схему, для которой настраиваете цвета.
  </Step>

  <Step title="Задайте цвет">
    Нажмите на образец цвета рядом с нужной переменной и выберите значение.
  </Step>

  <Step title="Автосохранение">
    Изменения сохраняются автоматически (с небольшой задержкой) и сразу применяются к интерфейсу.
  </Step>

  <Step title="Сброс при необходимости">
    Чтобы вернуть базовый цвет, нажмите иконку сброса рядом с переменной.
  </Step>
</Steps>

<Tip>
  Настраивайте цвета отдельно для светлой и тёмной темы — один и тот же акцент может по-разному читаться на светлом и тёмном фоне.
</Tip>