Темы

Тема определяет внешний вид приложения. Она задаёт цвета, шрифты, форму элементов управления, восприятие страницы и цвета терминала. Тема представляет собой один небольшой JSON-файл. В комплекте с Collie идут четыре темы. Можно импортировать дополнительные темы из файла, а любую существующую тему можно экспортировать для копирования и редактирования. Тема настраивается для одного устройства, хранится в его браузере и ничего не меняет на bridge.

У каждой темы есть две половины. Светлая половина содержит набор цветов для светлого режима, тёмная половина — для тёмного. Цвет в теме имеет имя, например background или primary, и это имя служит токеном.

Четыре темы

В комплекте с Collie идут четыре темы, и три из них задействуют все разделы файла темы. На каждом скриншоте показан Dashboard: светлый режим слева и тёмный справа.

• —
  Collie — это исходный внешний вид приложения. Он установлен по умолчанию, и при его выборе применение любой другой темы отменяется. В нём не заданы форма, оформление и палитра, поэтому каждое его значение совпадает со значением по умолчанию из своего списка.

  !Тема Collie на Dashboard, светлый и тёмный режимы.

• —
  Nightwatch создана для телефона дежурного в постели. Тёмная половина выполнена в чистом чёрном цвете с единственным тусклым янтарным акцентом, а светлая — в тёплых тонах вечерней бумаги. Оформление угловатое и плоское, с жирными линиями, жирным текстом и тусклой янтарной полосой за заголовком и панелями. Терминал использует янтарную палитру на чистом чёрном фоне.

  !Тема Nightwatch на Dashboard, светлый и тёмный режимы.

• —
  Daylight рассчитана на яркое солнце и слабое зрение. Контраст основного текста составляет 7:1 или выше, границы сделаны более чёткими, заблокированный статус отображается оранжевым, а завершённый — синим, поэтому они различимы без красного и зелёного цветов. В теме используются скруглённые углы, строки в виде приподнятых карточек на странице с градиентом к нижней части (темнее в светлом режиме и светлее в тёмном), а также увеличенные интервалы. Терминал использует яркую высококонтрастную палитру.

  !Тема Daylight на Dashboard, светлый и тёмный режимы.

• —
  Harbour создана для тех, кто проводит всё время в терминале. Холодный сине-серый тон с одним бирюзовым акцентом в стилистике Nord и Solarized, а цвета кода выглядят привычно для редактора. В теме используются мягкие углы, мелкая текстура под страницей и тонкие иконки. Терминал использует палитру на основе Solarized.

  !Тема Harbour на Dashboard, светлый и тёмный режимы.

В таблице перечислены все термины, используемые каждой темой. Первый термин в каждом списке описывает текущий внешний вид: sharp, default, flat, page, rules и caps. Значения терминов поясняются в разделах Форма, Вид и Палитра терминала.

Выберите тему

Выберите тему в Settings → Appearance, и всё приложение сразу изменится.

Карточка Theme идет первой. Нажмите на название, и приложение сразу изменится. Каждое название отображается со скруглением и толщиной своей темы, поэтому форму видно ещё до нажатия. Карточка находится над карточкой Appearance, где задаются параметры System, Light и Dark. Это две разные настройки. Тема определяет цвета, форму и вид, а System, Light или Dark определяет, какую именно половину цветов вы видите.

Тема, задающая гарнитуру, единожды записывает её в карточку Шрифт при выборе этой темы. После этого приоритет переходит к карточке Шрифт: если выбрать там другой шрифт, он сохранится, пока вы снова не выберете тему. Акцидентный шрифт темы в эту карточку не входит: заголовки сохраняют его. Для шрифты отведен отдельный раздел.

Шрифты в этих темах содержат только Latin и Latin Extended-A, поэтому кириллица и CJK в них отображаются системным шрифтом (в теме Collie кириллический шрифт сохраняется).

Импорт темы

Импортируйте файл .json в карточке Theme, посмотрите предпросмотр и нажмите Применить.

1. 01
   В карточке Theme нажмите Импорт и выберите файл .json.
2. 02
   Collie прочитает файл и покажет предпросмотр: название, автора, обе темы в виде палитр, небольшую страницу для каждой половины, форму на образце, цвета терминала и отчет о контрасте.
3. 03
   Нажмите Применить, чтобы сохранить тему и переключиться на нее, или Отмена, чтобы ничего не сохранять.

предупреждение — это строка отчета о контрасте, например: «dark: status-blocked chip on card measures 3.9. The floor is 4.5». Это означает, что в одном месте тему трудно читать. Кнопка Применить остается активной, так как выбор за вами.

отклонение означает, что файл нарушил правило. Collie перечислит причины, ничего не сохранит и ничего не применит. В списке отображается не более 25 причин, затем одна строка «and N more». Файл отклоняется по любой из следующих причин:

• —
  Файл не является объектом JSON или превышает 64 КиБ.
• —
  В нем не задан ни один цвет.
• —
  В нем есть неизвестный ключ, неподдерживаемая версия Collie, значение, не являющееся цветом, или шрифт, который не поставляется с Collie.
• —
  Слово формы отсутствует в списке или вместо слова указано число.
• —
  В нем есть блок surface, шрифт fonts.display или блок ansi, и указана версия 1.
• —
  В блоке ansi отсутствует ключ, есть цвет с альфа-каналом или не пройден порог в Палитра терминала.
• —
  В нем некорректный id, name или author, либо id принадлежит встроенной теме.
• —
  Это была бы девятая импортированная тема. Collie отклоняет операцию при нажатии Импорт, до выбора файла, и еще раз при Применить.

Collie проверяет еще одну деталь при Применить. Файл, чей id уже есть на устройстве, отклоняется с сообщением «already imported». Сначала удалите старую тему или измените id.

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

На устройстве может храниться до восьми импортированных тем. Удалить работает, только когда включена импортированная тема. Это удаляет данную тему, и приложение возвращается к Collie. Шрифт остается прежним.

Отчет о контрасте

Отчет измеряет цвета темы в обеих половинах, а непройденная строка — это предупреждение, которое можно принять.

Палитра терминала — единственное исключение, так как ее пороги отклоняют файл. В таблице перечислены минимальные значения для остальных частей. Минимальное значение — это коэффициент контрастности, поэтому чем выше число, тем легче читать.

• —
  Текст деструктивного действия привязывается к значению, вычисленному Collie, если вы сохраняете его цвета. Собственный светло-красный цвет Collie на странице даёт значение 4.38. Тема, сохраняющая оба цвета пары, привязывается к этому значению и никогда не опускается ниже 3. Тема, меняющая любой из цветов, привязывается к 4.5.
• —
  Градиент или зернистость измеряются на дальнем конце. Отчёт измеряет текст страницы, плашки, текст destructive, текст status-blocked и снова rule на нижней границе градиента или на цвете линии зернистости, с теми же нижними порогами.
• —
  Полоса тоже измеряется. Под chrome: band значения foreground, muted-foreground и status-blocked измеряются на secondary, цвете полосы, на уровне 4.5.

Экспорт темы и обмен ею

Выберите тему, затем нажмите Экспорт. Collie сохранит <id>.collie-theme.json. Браузер, не умеющий сохранять файлы, отображает текст на панели с кнопкой копирования. Чтобы создать собственную тему на основе стандартной:

1. 01
   Экспортируйте Nightwatch, Daylight, Harbour или Collie.
2. 02
   Измените id и name. Идентификатор стандартной темы будет отклонён.
3. 03
   Отредактируйте цвета и текст, затем удалите любые токены, которые вы не хотите менять.
4. 04
   Отправьте файл на телефон, затем импортируйте его.

При экспорте записывается минимальная версия, вмещающая содержимое темы.

Написание темы

Файл содержит только эти ключи и никакие другие. Неизвестный ключ в любом месте отклоняется с указанием его имени. Это полный файл версии 2: Daylight с сокращённым списком цветов и полной палитрой.

{
  "version": 2,
  "id": "my-day",
  "name": "My day",
  "author": "Sam",
  "light": { "background": "oklch(0.985 0 0)", "primary": "oklch(0.18 0 0)" },
  "dark": { "background": "oklch(0.12 0 0)", "status-blocked": "oklch(0.81 0.13 60)" },
  "fonts": { "ui": "geist", "display": "atkinson" },
  "surface": {
    "radius": "round", "shadow": "lifted", "density": "roomy",
    "weight": "default", "border": "default", "ground": "gradient",
    "chrome": "page", "rows": "cards", "icons": "default", "labels": "sentence"
  },
  "ansi": {
    "0": "#3a332c", "1": "#ff5f56", "2": "#5fd068", "3": "#ffd84a",
    "4": "#5aa9ff", "5": "#e07ce8", "6": "#3fd6d0", "7": "#f2efe9",
    "8": "#8a827a", "9": "#ff8a80", "10": "#7ad683", "11": "#ffeb8a",
    "12": "#8cc4ff", "13": "#f0a6f5", "14": "#6ad8d2", "15": "#ffffff",
    "ink": "#f5f0e8", "ground": "#1a1612"
  }
}

• —
  version принимает значение 1 или 2. См. Версии. Любое другое число отклоняется.
• —
  id содержит от 1 до 32 символов: строчные буквы, цифры и дефисы, начинаясь с буквы или цифры.
• —
  name содержит от 1 до 40 символов, а author содержит до 60. Ни одно из полей не может содержать управляющие символы.
• —
  light и dark представляют собой объекты токенов. Укажите одну половину или обе. Пропущенная половина и любой пропущенный токен принимают значение темы Collie. Если токен задан только в одной половине, другая половина получает для него значение из темы Collie.
• —
  Поле fonts.ui необязательно: system, grotesk, aldrich, plex, geist или atkinson.
• —
  fonts.display необязателен и принимает те же шесть имён. См. Вид.
• —
  surface необязателен. Каждый ключ в нём также необязателен, и пропущенный ключ принимает значение по умолчанию из своего списка. См. Форма и Вид.
• —
  ansi необязателен и содержит либо все 18 ключей, либо ни одного. См. Палитра терминала.
• —
  $schema разрешён и игнорируется. Размер файла не превышает 64 КиБ.

Значение задаётся как #rrggbb, #rrggbbaa или oklch(L C H) и oklch(L C H / A) простыми числами. L — от 0 до 1, C — от 0 до 0.5, H — от 0 до 360, а A — от 0 до 1 или процент. Ничто другое не поддерживается: ни именованные цвета, ни rgb(), ни var(), ни url(). Цвет в ansi не содержит альфа-канала.

Версии

Файл указывает свою версию, и Collie записывает минимальную версию, вмещающую содержимое файла.

• —
  Файл с блоком surface, начертанием fonts.display или блоком ansi должен указывать версию 2. Файл с версией 1, содержащий что-либо из этого, отклоняется.
• —
  Файл без этих блоков может указывать любую из версий. Collie читает обе версии, а при экспорте темы только с цветами и fonts.ui записывается версия 1.
• —
  Для файла версии 2 требуется Collie 1.22.0 или новее.
• —
  Файл версии 1 подразумевает значение по умолчанию из каждого списка для каждого токена из surface.

43 токена

Каждая половина принимает любые из них, разбитые на четыре группы.

Форма

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

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

• —
  Круги остаются кругами. Фигура, ширина которой равна её высоте (например, точка статуса), не относится к шагам скругления углов, поэтому radius её не меняет.
• —
  Выделенная строка повторяет радиус. При значении sharp выбранная или заблокированная строка получает полосу 2px по левому краю. При soft и round она получает рамку 2px со всех четырёх сторон и мягкую тень, так как полоса слева не сочетается со скруглёнными углами.
• —
  roomy никогда не опускается ниже значения по умолчанию. Области нажатия остаются размером 44px или больше. Иконки и собака в заголовке сохраняют свой размер, поэтому увеличивается только пространство вокруг них.

Вид

Ещё пять ключей блока surface и один ключ шрифта задают внешний вид страницы. Они подчиняются тому же правилу закрытых списков слов.

fonts.display указывает один из шести шрифтов для заголовков страниц и имени в шапке. Тема без этого параметра отображает заголовки обычным шрифтом, как и раньше. Collie загружает акцидентный шрифт только тогда, когда он явно указан в теме.

• —
  Фон не использует графические файлы. Градиент и зернистость формируются из цветов самой темы. Панели приложения непрозрачны, поэтому фон виден только в промежутках между ними.
• —
  Контрастность текста страницы измеряется относительно фона. отчёт о контрастности проверяет дальний конец градиента и цвет линий зернистости, поэтому фон не может скрыть текст.
• —
  При градиенте панели сохраняют сплошной цвет страницы. На планшете шапка и панели могут выглядеть как блок в верхней части страницы, который темнеет книзу. Текстом этого не исправить.
• —
  Строка состояния повторяет цвет плашки. При значении chrome: band строка состояния браузера принимает цвет плашки, а при page — цвет страницы.
• —
  rows применяется ко всем группам списков. Сюда входит и список внутри указателя «Настройки».

Палитра терминала

Блок ansi задаёт терминальному зеркалу собственные 16 цветов, цвет текста и цвет фона.

Блок содержит либо все 18 ключей, либо ни одного: от "0" до "15" для 16 слотов, ink для текста и ground для фона. Неполная палитра привела бы к смешению двух палитр в одной панели. Каждый цвет указывается как #rrggbb или oklch(), без альфа-канала.

Примечание. Задавайте палитру для тёмного режима. Зеркало всегда отрисовывается на тёмном фоне, а в светлом режиме Collie инвертирует всё зеркало целиком вместо повторной раскраски (почему). В светлом режиме отображается зеркальное отражение ваших цветов. Выберите цвет ground, который при инверсии переходит в светлый background вашей темы, и зеркало органично впишется в страницу в обоих режимах.

Цвет, не прошедший проверку, отклоняется с указанием его ключа. Это именно ошибка, а не предупреждение, поскольку терминал вы читаете чаще всего.

Яркий набор фиксирован: зеркало Muse считает эти четыре слота ярким передним планом. Остальные 12 слотов не поднимаются выше этой границы, поэтому список остаётся верным для вашей палитры.

Что тема не может изменить

Тема меняет значение цвета, шрифты, форму элементов управления, ощущение от страницы и палитру терминала. Ничего другого она изменить не может.

• —
  Разметка и размеры областей нажатия. Разметку для телефонов легко сломать. Radius, shadow, density, weight и border — это закрытые наборы значений, а не произвольные величины, и roomy никогда не опускается ниже значения по умолчанию.
• —
  Размеры шрифта и анимация. Тема задаёт гарнитуру и насыщенность, но не размер шрифта, и она не может менять параметры анимации.
• —
  Собака Collie. Шапка, иконка для домашнего экрана и заставка выглядят одинаково во всех темах.
• —
  Значение статуса. Иконка и текст остаются неизменными, поэтому выбранный вами красный или оранжевый цвет никогда не сделает статус «заблокировано» похожим на «готово».
• —
  Произвольное значение, необработанный CSS, сторонние шрифты. Каждый ключ принимает цвет или слово из списка, а шрифты берутся только из списка, который поставляет Collie.

Первая отрисовка и строка состояния

Выбранная тема видна на экране с первого кадра. Небольшой скрипт считывает её до загрузки приложения, поэтому встроенная тема не мигает оформлением по умолчанию при запуске. Импортированная тема работает так же, за одним исключением. Если токен задан только для одной половины, он отобразится цветом по умолчанию на один кадр. При загрузке приложение повторно проверяет тему. Сохранённая тема, не прошедшая проверку, сбрасывается, устройство показывает Collie, а в консоли браузера выводится причина. Строка состояния следует двум цветам страницы темы, или двум цветам полосы, если в теме указано chrome: band.

Устранение неполадок

Это самые частые проблемы, а также их причины и способы решения.

• —
  Тема отображает один токен цветом по умолчанию. В файле пропущен этот токен или соответствующая половина. Недостающие токены берутся из темы Collie. Добавьте токен в нужную половину.
• —
  Гарнитура не изменилась. Тема применяет гарнитуру один раз при выборе. Если после этого вы выбрали другую гарнитуру в Шрифт, приоритет отдаётся этому выбору. Выберите гарнитуру повторно или заново примените тему.
• —
  Слово формы ничего не меняет. Слово может совпадать со значением по умолчанию для этого списка, либо ключ отсутствует. Пропущенный ключ принимает слово по умолчанию. Проверьте написание по таблицам в Форма и Вид.
• —
  Файл отклонён и указывает на ansi. Палитра содержит все 18 ключей в тёмном пространстве, и каждый цвет должен пройти порог проверки. При отказе указываются ключ и измеренное число.
• —
  После очистки данных браузера тема пропадёт. Импортированные темы хранятся только в этом браузере. Импортируйте файл снова.