Темы и внешний вид
Elftia предлагает богатый набор параметров настройки внешнего вида, позволяющих создать персонализированное AI-рабочее пространство. На этой странице подробно описаны все настройки оформления.
Все параметры внешнего вида находятся в разделе Настройки → Внешний вид.
Режим темы
Elftia поддерживает три режима темы:
| Режим | Описание |
|---|---|
| Светлая тема | Тёплый белый фон, идеально подходит для хорошо освещённых помещений |
| Тёмная тема | Тёплый угольно-серый фон, снижающий нагрузку на глаза; идеален для работы в ночное время |
| Как в системе | Автоматически переключается в зависимости от настройки светлой/тёмной темы операционной системы |
Как установить режим:
- Откройте Настройки → Внешний вид.
- В разделе Режим темы нажмите на карточку нужного режима.
- Переключение вступает в силу немедленно — перезапуск не требуется.
Тёмная тема Elftia использует тёплые тона, а не чистый чёрный цвет, что делает её визуально мягче и комфортнее. Светлая тема также использует тёплый кремовый оттенок вместо чистого белого, снижая резкость бликов.
Акцентный цвет
Акцентный цвет — это тематический цвет, применяемый к таким элементам интерфейса, как кнопки, ссылки и выбранные состояния.
Стандартная палитра
Elftia предоставляет тщательно подобранный набор стандартных цветов, которые применяются одним нажатием:
- Каждый стандартный цвет настроен как для светлой, так и для тёмной темы, чтобы обеспечить хороший контраст и визуальное качество.
- Палитра охватывает тёплые, холодные и нейтральные оттенки.
Пользовательские цвета
Если стандартные цвета вас не устраивают, вы можете настроить акцентный цвет:
- Найдите опцию пользовательского цвета в разделе палитры.
- Введите значение цвета в одном из следующих форматов:
- HEX: например
#FF6B35 - HSL: например
hsl(20, 100%, 60%)
- HEX: например
- Область предварительного просмотра показывает эффект выбранного цвета в реальном времени.
При выборе акцентного цвета убедитесь, что он имеет достаточный контраст как в светлой, так и в тёмной теме. Слишком светлый цвет может не выделяться в светлой теме, и то же самое справедливо для слишком тёмного цвета в тёмной теме.
Настройки шрифтов
Elftia позволяет изменить шрифты, используемые в интерфейсе.
Шрифт UI (без засечек)
Шрифт без засечек, используемый для текста интерфейса; по умолчанию — Inter.
- В разделе настроек Шрифт найдите поле ввода шрифта UI.
- Введите название шрифта (он должен быть установлен в вашей системе), например:
"Noto Sans SC"— Source Han Sans"Microsoft YaHei"— Microsoft YaHei"PingFang SC"— PingFang (macOS)
- Оставьте поле пустым, чтобы использовать шрифт по умолчанию — Inter.
Шрифт для кода (моноширинный)
Моноширинный шрифт, используемый для блоков кода и редактора; по умолчанию — JetBrains Mono.
- Введите название шрифта в поле ввода шрифта для кода, например:
"Fira Code"— шрифт для программирования с поддержкой лигатур"Source Code Pro"— шрифт для программирования от Adobe"Cascadia Code"— шрифт для программирования от Microsoft
- Оставьте поле пустым, чтобы использовать шрифт по умолчанию — JetBrains Mono.
Изменения шрифта применяются ко всему интерфейсу немедленно. Если указанный шрифт не установлен в вашей системе, браузер автоматически переключится на шрифт по умолчанию.
Обои
Elftia позволяет установить фоновые обои для интерфейса с эффектом матового стекла. Источником обоев может быть изображение или градиент; в сочетании с многоуровневой настройкой цвета и прозрачности можно добиться как строгого делового вида, так и эффектного атмосферного.
Источник обоев
У обоев есть два взаимоисключающих источника (если настроены оба, приоритет имеет градиент):
| Источник | Как установить | Примечания |
|---|---|---|
| Изображение | Нажмите Сменить изображение, чтобы выбрать локальный файл, или вставьте URL в поле ввода | Автоматически копируется в директорию данных приложения themes/wallpapers/; светлая и тёмная темы используют одно изображение |
| Градиентный фон | Включите переключатель Градиентный фон, выберите количество цветов (один / два / три / четыре) и задайте цвет для каждого слота | При включении изображение ниже временно скрывается; выключите переключатель, чтобы восстановить его |
Поддерживаемые форматы изображений: JPG, PNG, WebP, GIF.
Удалённые обои
- Вставьте URL изображения в поле ввода обоев (например,
https://example.com/wallpaper.jpg). - Предварительно необходимо включить Разрешить удалённые ресурсы в Расширенных настройках.
- Домен удалённого изображения должен быть в списке разрешённых.
Включение удалённых изображений отправляет запросы на внешние серверы для их загрузки. По соображениям конфиденциальности эта опция по умолчанию отключена. Включайте только те домены, которым доверяете.
Размытие матового стекла
| Параметр | Диапазон | По умолчанию | Описание |
|---|---|---|---|
| Размытие матового стекла | 0–30 пкс | 6 | Гауссово размытие, применяемое за обоями. Более высокие значения сильнее размывают обои и делают текст интерфейса чётче |
Наложение фона (тонирующий слой поверх обоев)
Наложение затемняет или тонирует обои для улучшения читаемости. Начиная с версии 0.1.11, цвет наложения управляется палитрой цветов и включает автоматическое переключение яркости.
| Параметр | Диапазон | По умолчанию | Описание |
|---|---|---|---|
| Интенсивность наложения | 0–100 % | 70 | Общая непрозрачность. 0 = обои полностью видны, 100 = полностью перекрыты |
| Цвет наложения | Палитра цветов | Нейтральный серый | Выберите цвет в формате hex; немедленно отображается в предварительном просмотре |
| Автоматическая яркость | Переключатель | Включено | При включении яркость наложения следует режиму темы (белый в светлой, чёрный в тёмной); при выключении применяется яркость из палитры |
| Градиент наложения | Необязательный переключатель + 1–4 слота цветов | Выключено | При включении линейный градиент заменяет сплошное наложение; ползунок интенсивности по-прежнему управляет общей непрозрачностью |
Если вы впервые перетаскиваете цвет наложения при нулевой интенсивности, система автоматически повышает интенсивность до 50 %, чтобы вы сразу могли увидеть эффект.
Рекомендуемые конфигурации наложения:
| Тип обоев | Размытие матового стекла | Интенсивность наложения |
|---|---|---|
| Пейзажная фотография | 6–12 | 60–75 |
| Градиент / сплошной цвет | 0–4 | 50–65 |
| Сложный узор | 10–20 | 70–85 |
| Тёмное изображение | 4–8 | 55–70 |
Тонирование фона элементов
Полупрозрачные панели — элементы боковой панели, карточки, метки и переключатель вкладок — по умолчанию следуют теме (тёплый кремовый в светлой теме, тёплый угольный в тёмной). Включение Тонирования фона элементов позволяет единообразно переопределить их пользовательским цветом:
| Параметр | По умолчанию | Описание |
|---|---|---|
| Тонирование фона элементов (переключатель) | Выключено | При выключении используется цвет по умолчанию темы; при включении вступает в силу цвет ниже |
| Цвет тонирования | Палитра цветов | Влияет на все полупрозрачные поверхности, включая панель навигации / карточки / метки / вкладки / контекстные меню |
| Градиент элементов | Необязательный | Взаимоисключает сплошной цвет; при включении градиент из 1–4 цветов заменяет сплошной, каждый слой сохраняет собственную непрозрачность |
Элементы, которые должны оставаться непрозрачными — поля ввода и диалоговые окна — не затрагиваются.
Цвет пузырей сообщений
Пузыри сообщений (пользователя и ассистента) по умолчанию разделяют цвет и непрозрачность фона элементов. Начиная с версии 0.1.11, добавлена новая запись независимого управления:
| Параметр | По умолчанию | Описание |
|---|---|---|
| Независимое управление (главный переключатель) | Выключено | При выключении пузыри следуют фону элементов; отдельные параметры ниже появляются только при включении |
| Пузырь пользователя | Под-переключатель + палитра цветов | Независимая настройка цвета / градиента пузыря сообщения пользователя |
| Пузырь ассистента | Под-переключатель + палитра цветов | Независимая настройка цвета / градиента пузыря сообщения ассистента |
| Непрозрачность пузырей | 0–100 % (по умолчанию 35) | Вступает в силу только при включённом главном переключателе; меньшие значения делают пузыри более прозрачными и обои чётче |
Пузыри с каждой стороны могут независимо выбирать «сплошной цвет» или «градиент» — и они также взаимоисключающие (при включении градиента он переопределяет сплошной цвет для этой стороны).
Хотите, чтобы все полупрозрачные панели имели единый оттенок? Просто включите Тонирование фона элементов, и пузыри автоматически последуют за ним. Включайте Независимое управление только тогда, когда хотите задать пузырям и карточкам разные цвета.
Другие расширенные параметры
| Параметр | Диапазон | По умолчанию | Назначение |
|---|---|---|---|
| Непрозрачность элементов | 0–100 % | 0 | Экспериментальный: делает все полупрозрачные элементы UI более непрозрачными (используйте, когда обои слишком отвлекают) |
| Прозрачность обоев | 0–100 % | 100 | Коэффициент интенсивности тонирования поверхностей: 0 = полностью прозрачные поверхности (обои максимально видны), 100 = стандартное тонирование |
| Отключить обои в компактных окнах | Переключатель | Выключено | При включении автоматически отключает обои в небольших окнах, таких как Mini/Selection |
Удаление обоев
Нажмите кнопку Очистить (значок корзины) над полем ввода обоев, чтобы удалить текущее изображение. Градиентный фон управляется отдельно переключателем Включить градиент.
Внутренние правила прозрачности обоев
После установки обоев интерфейс автоматически включает набор правил прозрачности:
- Основной контейнер: эффект матового стекла с непрозрачностью 35%
- Кнопки и карточки: полупрозрачный эффект с непрозрачностью 15–20%
- Поля ввода: остаются непрозрачными для обеспечения читаемости
- Всплывающие окна и диалоги: остаются непрозрачными и не зависят от обоев
- Выпадающие / контекстные меню: матовое стекло высокой читаемости с непрозрачностью 85%
Эти значения обрабатываются автоматически и не требуют ручной настройки; описанные выше параметры «Тонирование фона элементов» и «Пузыри сообщений» накладывают выбранный оттенок поверх, сохраняя при этом прозрачность каждого уровня.
Пользовательский CSS
Для опытных пользователей Elftia предоставляет полноценный редактор CSS, позволяющий внедрять пользовательские стили для глубокой кастомизации внешнего вида интерфейса.
Использование редактора CSS
- Найдите раздел Пользовательский CSS в Настройках внешнего вида.
- Нажмите, чтобы развернуть редактор — вы увидите редактор CSS-кода с подсветкой синтаксиса.
- Напишите свой CSS-код.
- Код применяется к интерфейсу в реальном времени, поэтому эффект виден сразу.
Пример: настройка пузырей сообщений
{/* Change the background color of user message bubbles */}
.chat-bubble[data-role="user"] {
background-color: hsl(var(--primary) / 0.15);
border-radius: 16px;
}
{/* Change the font size of AI replies */}
.chat-bubble[data-role="assistant"] {
font-size: 15px;
line-height: 1.7;
}
Пример: настройка ширины боковой панели
{/* Adjust the sidebar width */}
.session-panel {
width: 280px;
}
Доступные CSS-переменные
В пользовательском CSS можно использовать тематические переменные Elftia:
| Переменная | Назначение |
|---|---|
--background | Цвет фона страницы |
--foreground | Основной цвет текста |
--surface-0 | Базовый цвет поверхности |
--surface-1 | Цвет поверхности первого уровня (карточки, контейнеры) |
--surface-2 | Цвет поверхности второго уровня (поля ввода, вторичные контейнеры) |
--surface-3 | Цвет поверхности третьего уровня (всплывающие окна) |
--primary | Акцентный цвет темы |
--border | Цвет границ |
--muted-foreground | Вторичный цвет текста |
--destructive | Цвет для ошибок / опасных действий |
--success | Цвет для состояний успеха |
Кнопки действий
Над редактором CSS доступны следующие действия:
| Кнопка | Функция |
|---|---|
| Копировать | Скопировать текущий CSS в буфер обмена |
| Вставить | Вставить CSS из буфера обмена |
| Отменить | Вернуться к последнему сохранённому состоянию |
| Очистить | Удалить весь пользовательский CSS |
| Вставить шаблон совместимости | Вставить шаблон с часто используемыми CSS-селекторами совместимости |
Пользовательский CSS очень мощный инструмент, однако неправильные стили могут привести к проблемам с компоновкой интерфейса. При возникновении проблем просто очистите содержимое редактора CSS, чтобы восстановить стили по умолчанию.
Файлы конфигурации тем
Вы можете объединить все настройки внешнего вида в файл конфигурации темы для экспорта и совместного использования.
Экспорт темы
- На странице настроек внешнего вида найдите раздел Конфигурация темы.
- Нажмите кнопку Экспорт.
- Выберите место сохранения; конфигурация сохраняется в формате JSON.
Экспортированный файл содержит: режим темы, акцентный цвет, настройки шрифтов, параметры обоев (без файла изображения) и пользовательский CSS.
Импорт темы
- Нажмите кнопку Импорт.
- Выберите файл темы в формате JSON.
- Просмотрите эффект импорта и примените после подтверждения.
Вы можете делиться созданными файлами конфигурации тем с сообществом, а также использовать темы, которыми делятся другие, чтобы быстро украсить свой Elftia.
Внешний вид редактора кода
Встроенный редактор кода Elftia (CodeMirror) имеет собственные настройки внешнего вида:
| Настройка | Описание |
|---|---|
| Тема редактора | Выбор цветовой схемы редактора кода |
| Перенос строк | Автоматически ли переносить длинные строки кода |
| Номера строк | Отображать ли номера строк |
| Миникарта | Отображать ли миникарту справа |
| Размер шрифта | Размер шрифта для редактора кода |
Эти настройки находятся в разделе Редактор кода на странице внешнего вида.
Если при настройке внешнего вида возникают проблемы с отображением, попробуйте очистить пользовательский CSS или импортировать заведомо рабочую конфигурацию темы. Дополнительную помощь см. в разделе Частые вопросы.