Пользовательский CSS
С помощью пользовательского CSS можно менять внешний вид приложения без изменения исходного кода, чтобы интерфейс больше соответствовал вашим предпочтениям — например, сменить шрифт, изменить основной цвет темы, настроить фон пузырей сообщений и т. д.
Где это настраивается
После того как 【Настройки】→【Внешний вид】, внизу страницы найдите «Пользовательский CSS» в поле кода, просто впишите стили — они сразу вступят в силу. Если оставить пустым, никакие пользовательские стили не будут загружены.
Написанный вами CSS будет без изменений внедрён в <head> в, соответствуя одному <style id="user-defined-custom-css"> элементу. Поскольку он не относится к внутренним слоям стилей приложения (cascade layer), при одинаковой специфичности селекторов ваши стили имеют более высокий приоритет, чем встроенные стили приложения, поэтому большинству обычных объявлений не нужно !important для того, чтобы переопределение сработало.
Пример, который можно использовать
Ниже используется только реально существующие в текущей версии приложения переменные и селекторы:
О переменных темы
В приложении для описания цветов используется набор пользовательских CSS-свойств (переменных). Значения по умолчанию для светлой темы задаются в :root , а переопределяющие значения для тёмной темы — в .dark ; при переключении на тёмную тему корневому элементу добавляется .dark класс. Поэтому, чтобы различать светлую и тёмную темы, пишите их отдельно под :root и .dark селектором, а не используя устаревший theme-mode атрибутный селектор.
К часто используемым публичным переменным относятся:
--background / --foreground
Основной цвет фона / основной цвет переднего плана (текста)
--primary / --primary-foreground
Основной цвет темы / цвет текста на основном цвете
--card / --popover
Цвет фона карточек и всплывающих слоёв
--muted / --muted-foreground
Приглушённый фон / приглушённый цвет текста
--border / --input / --ring
Цвет границ, полей ввода и обводки при фокусе
--sidebar Серия
Цветовая схема, связанная с боковой панелью
--chat-user
Цвет фона пузыря сообщений пользователя
--link
Цвет ссылок
--code-block / --inline-code
Цвет фона блоков кода / встроенного кода
--font-family / --code-font-family
Глобальный шрифт / шрифт кода
--radius
Базовое значение скругления
Полный список переменных и значения по умолчанию см. в исходном коде:
Стили интерфейса и контейнеры:https://github.com/CherryHQ/cherry-studio/tree/main/src/renderer/assets/styles
Дизайн-токены темы (переменные дизайна):https://github.com/CherryHQ/cherry-studio/tree/main/packages/ui/src/styles
Подсказка при вставке старой таблицы стилей
Если вы вставили таблицу стилей, написанную для старой версии и несовместимую с текущим интерфейсом, приложение может автоматически отключить её и показать подсказку в области пользовательского CSS. В этом случае сначала адаптируйте стили под текущие переменные и селекторы, а затем по подсказке удалите маркер в первой строке, чтобы снова включить их.
Похожие материалы
Библиотека тем Cherry Studio: https://github.com/boilcy/cherrycss
Поделиться несколькими темами Cherry Studio в китайском стиле: https://linux.do/t/topic/325119/129
💡 Получить помощь и отправить отзыв
Если в процессе настройки или использования у вас возникнут вопросы, баги или предложения по улучшению функций, пожалуйста, обратитесь к Обратная связь и предложения официальным каналам, указанным в
Последнее обновление
Это было полезно?