Свои темы оформления в Typhon

Все темы живут в разделе Настройки → Оформление. Там же:

• выбор темы — нажмите на карточку. «Системная» переключает встроенные светлую и тёмную вслед за настройками системы;
• импорт — кнопка «Импорт» загружает файл темы с диска (расширение .typhontheme или .json);
• редактор — открывается под выбранной темой: название, значения токенов с палитрой для цветов и поле «Пользовательский CSS» под кнопкой «Дополнительно». Рядом — живое превью;
• экспорт — сохраняет выбранную тему в файл .typhontheme, чтобы перенести её на другой компьютер или отдать кому-то;
• удаление — только для своих тем. Встроенные «Тёмная», «Светлая» и «Высокий контраст» не удаляются и не перезаписываются: если отредактировать встроенную тему, изменения сохранятся как новая тема рядом с ней.

Свои темы хранятся в файле themes.json в папке данных Typhon: %APPDATA%\Typhon\ на Windows и ~/Library/Application Support/Typhon/ на macOS. Править его руками не нужно — для переноса есть импорт и экспорт.

Сохраните текст ниже в файл dusk.typhontheme (подойдёт и расширение .json), затем в лаунчере откройте Настройки → Оформление → Импорт и выберите этот файл. Тема появится в списке с пометкой «своя» — нажмите на неё, чтобы применить.

{
  "version": 1,
  "theme": {
    "id": "dusk",
    "name": "Сумерки",
    "base": "dark",
    "tokens": {
      "--bg": "#0d1117",
      "--bg-sidebar": "#0b0e13",
      "--surface": "#131922",
      "--surface-2": "#18202b",
      "--surface-3": "#202a37",
      "--surface-4": "#293444",
      "--border": "rgba(255, 255, 255, 0.08)",
      "--border-strong": "rgba(255, 255, 255, 0.14)",
      "--hover": "rgba(255, 255, 255, 0.05)",
      "--hover-strong": "rgba(255, 255, 255, 0.08)",
      "--text": "#e8edf3",
      "--text-2": "#a0abb8",
      "--text-3": "#6b7785",
      "--accent": "#2fb3a3",
      "--accent-hover": "#3cc4b3",
      "--accent-subtle": "rgba(47, 179, 163, 0.15)",
      "--accent-text": "#6fd6c8",
      "--accent-ring": "rgba(47, 179, 163, 0.5)",
      "--radius-md": "1rem",
      "--radius-lg": "1.4rem"
    },
    "css": ".sidebar { border-right: 1px solid var(--border); }"
  }
}

Дальше тему удобно доводить прямо в редакторе лаунчера: выберите её, поменяйте значения, посмотрите на превью и нажмите «Сохранить».

Файл темы — JSON с двумя полями верхнего уровня: version (сейчас всегда 1) и theme. Любое лишнее поле — ошибка импорта, поэтому опечатка в имени поля не пройдёт незамеченной.

Весь файл — не больше 256 КиБ. Поля builtIn и updatedAt, которые появляются в экспортированном файле, при импорте допустимы, но лаунчер выставляет их сам.

Повторный импорт. Если своя тема с таким же id уже есть, импорт заменит её — так удобно обновлять тему, которую вы правите во внешнем редакторе. Если id совпадает со встроенной темой (dark, light, contrast), тема сохранится под новым идентификатором вроде dark-2, а встроенная останется как была.

Что делает base. Лаунчер по нему понимает, светлая тема или тёмная, и подбирает под неё оттенки личного акцента. Недостающих цветов base не подставляет: токен, которого нет в теме, берётся из встроенной тёмной палитры. Поэтому светлая тема должна задать все цвета из таблицы, иначе часть интерфейса останется тёмной.

Токен — это CSS-переменная, на которой построен интерфейс. Тема может задать любую их часть, остальные остаются встроенными. Размеры указываются в rem: при размере интерфейса 100% (Настройки → Общие → Размер интерфейса) 1rem равен 11 пикселям, и всё, что задано в rem, масштабируется вместе с этой настройкой.

Цвета

Скругления и отступы

Раскладка

Текст

Шрифт берётся только из установленных в системе: загрузить свой файл шрифта тема не может. Названия шрифтов в --font-sans пишутся без кавычек, через запятую: Segoe UI, sans-serif.

Анимации и тени

--ui-scale в тему не входит: размером интерфейса управляет отдельная настройка, и тема не может её перебить.

Какие значения допустимы

Значение токена — от 1 до 120 символов из этого набора: латинские буквы, цифры, пробел и # . , % ( ) / + * -. Этого хватает на цвета (#1a2b3c, rgb(26 43 60 / 80%), hsl(210 40% 16%), color-mix(in srgb, #fff 8%, transparent)), размеры, calc(...), clamp(...) и ссылки на другие токены через var(--accent).

Нельзя: кавычки, точка с запятой, фигурные скобки, !important, url(, expression( и /*.

Токены покрывают почти всё, но иногда хочется поменять то, что переменной не вынесено. Для этого у темы есть поле css, в редакторе — «Пользовательский CSS» под кнопкой «Дополнительно». Лаунчер добавляет этот CSS на страницу поверх встроенных стилей, пока тема активна.

Ограничения:

• не больше 32 КиБ;
• запрещены @import, url(, expression(, javascript:, behavior:, -moz-binding и </style — тема не может ничего загрузить из сети или с диска, поэтому ни картинок, ни своих шрифтов через CSS тоже не будет. Редактор лаунчера проверяет CSS вместе с комментариями, так что не пишите эти слова и там;
• --ui-scale в CSS запрещён по той же причине, что и в токенах;
• фигурные скобки должны быть парными, вложенность — не глубже четырёх уровней. @media и @keyframes работают.

Специфичность. Стили компонентов лаунчера привязаны к самим компонентам, поэтому правило .sidebar { background: ... } проиграет встроенному, если оно меняет то же свойство. Свойства, которые компонент не задаёт, применяются как есть; чтобы перебить заданное, добавьте !important.

Классы — не договор. Токены из таблиц выше — стабильный интерфейс тем. Имена классов в разметке — внутреннее устройство лаунчера: они могут поменяться в любой версии, и CSS, опирающийся на них, после обновления может перестать работать.

Пример для светлой темы: полоса прокрутки во встроенных стилях рассчитана на тёмный фон и на светлом почти не видна.

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.14);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.24);
  background-clip: padding-box;
}

В JSON-файле CSS записывается одной строкой, переносы — как \n. Удобнее вставить его в поле «Пользовательский CSS» в редакторе и затем экспортировать тему — лаунчер сам запишет его правильно.

В разделе «Оформление» есть ещё «Личный акцент» — цвет, который применяется поверх любой темы и сам подстраивает оттенки под читаемость. Пока он выбран, акцентные токены темы (--accent, --accent-hover, --accent-subtle, --accent-text, --accent-ring) не видны. Чтобы увидеть акцент самой темы, выберите в личном акценте вариант «Цвет темы». Личный акцент — ваша локальная настройка, в экспортированный файл темы он не попадает.

Неудачный CSS может спрятать или перекрыть интерфейс так, что до настроек не добраться. На этот случай есть три способа вернуть оформление по умолчанию:

1. Кнопка «Сбросить оформление» в правом нижнем углу окна. Она видна всегда, пока активна своя тема или тема со своим CSS, и CSS темы её не оформляет.
2. Сочетание Ctrl+Shift+Alt+T в окне лаунчера.
3. Настройки → Оформление → Сброс, если до настроек добраться можно: кнопка «Сбросить» там просит подтверждения.

Кроме того, новая тема первые пять секунд считается пробной. Если за это время лаунчер закрылся или упал, при следующем запуске он вернётся к теме, которая была до неё.

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

Если лаунчер пишет «Не удалось выполнить действие с темой», чаще всего файл не читается как JSON или в нём лишнее поле. Проверьте запятые, кавычки вокруг имён полей и названия полей верхнего уровня.