Полный гайд по темам для Телеграма на Андроид

Телеграм на Андроид позволяет создавать и использовать темы оформления. Это — полный гайд по ним: как устанавливать, создавать их, и т. д.

Установка тем

За почти год в Телеграме появилось много каналов и групп с темами, например, @androidthemes, @themesandroid, @androidthemesgroup, @themesrussia. В любом канале или группе вы найдёте много тем для Андроида.

Когда вы нашли какую-нибудь тему для себя, просто нажмите на файл темы (у всех тем для анроида расширение файла — .attheme).

Когда файл скачается, нажмите на него опять.

Когда нажмёте, вы увидите предпросмотр темы — здесь можно увидеть, как будет выглядеть Телеграм, когда вы примените её. Для предпросмотра доступно два экрана — список чатов и экран чата. Свайпом вправо/влево можно посмотреть другой экран.

Если вы хотите оставить тему, нажмите кнопку Apply («Применить»), если нет — нажмите Cancel («Отменить») или системную кнопку «Назад» (не ту, что в предпросмотре чата!)

Когда примените тему, Телеграм сразу же перекрасится в цвета из темы:

Можно применять сколько угодно тем, пока у вас не закончится память.

Я скачал тему с какого-то сайта и она не применяется

Да, если пытаться применить тему не в Телеграме, то будет примерно такое:

Поставить тему можно только внутри Телеграма, а не снаружи. Поэтому нам надо будет поделиться этим файлом в Телеграм:

с самим собой:

И уже здесь можно применить тему, так как она в Телеграме:

Список тем

Все темы, которые вы когда-либо ставили, запоминаются. Список этих тем находится в Settings → Theme (Настройки → Тема).

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

• Кнопка Share («Поделиться») откроет список приложений, куда можно поделиться темой;
• Кнопка Edit («Редактировать») начнёт редактирование темы, подробнее об этом ниже;
• Кнопка Delete («Удалить») уберёт тему из списка.

В случае со стандартными темами Default, Blue и Dark («По умолчанию», «Синяя» и «Тёмная»), в меню будет только кнопка «Поделиться».

Простое нажатие на тему применит её. По долгому нажатию покажется то же самое меню, которое описано выше.

Создание тем

Для создания тем изначально был только один редактор — встроенный. Сейчас уже есть два других, онлайн-редактора и даже два CLI (не поняли — пропускайте), созданных сообществом. Сначала рассмотрим встроенный, потом — основные принципы работы с другими редакторами, а также с текстовым.

Встроенный редактор

Встроенный редактор подойдёт для новичков — изменяя в нём переменную, почти всегда (но не всегда! это уже по части другой статьи) изменяются соответствующие элементы, а список переменных зависит от экрана, на котором вы сейчас находитесь.

Чтобы создать новую тему, в списке тем нажмите на кнопку Create New Theme («Создать новую тему»). Оно предложит назвать эту тему:

Когда введёте название и нажмёте OK, будет создана новая тема, за основу которой будет взята та, которая у вас сейчас применена. Новая тема будет применена сразу же, также на экране появится иконка палитры.

Эту иконку можно свободно передвигать по экрану; если её увести за край экрана, то иконка будет убрана с экрана, как если бы вы сохранили тему (это описано чуть ниже).

Когда нажмёте на иконку палитры, покажется вот такой список:

• Кнопка Close Editor («закрыть редактор») скроет этот список, но оставит иконку палитры на экране;
• Кнопка Save Theme («сохранить тему») закроет этот список и уберёт иконку палитры. Позже иконку можно вернуть, открыв список тем, нажать на три точки напротив нужной темы и нажать «Редактировать».

Такие слова, как windowBackgroundWhite, actionBarDefault и т. д. называются переменными. Цвета, которые им заданы — значения, они показаны слева от переменных.

Когда нажмёте на любую из переменных, откроется такой экран:

Разберём его «по косточкам».

• Первые три текстовых поля — это поля RGB. Первое поле — красный, второе — зелёный, третье — синий. Чем больше значение, тем больше красного/зелёного/синего в итоговом цвете. Значение может быть от 0 до 255. Подробнее о RGB — на Википедии;
• Четвёртое поле — прозрачность. Значение также может быть от 0 до 255, где 255 — непрозрачный, 0 — полностью прозрачный;
• Цветовой круг позволяет задать тон и насыщенность цвета в пространстве HSL;
• Движок яркости (правее цветового круга, но не самый последний) задаёт яркость цвета в пространстве HSL;
• Движок прозрачности (самый правый) задаёт прозрачность цвета;
• Кнопка Cancel («Отменить») отменит изменения переменной и откроет список переменных. Она отменит изменения, даже если вы сохранили значение и сразу же открыли ту же переменную, а потом нажали Cancel;
• Кнопка Default («По умолчанию») сбросит значение переменной до стандартного значения;
• Кнопка Save («Сохранить») применит изменения и откроет список переменных.

Поэкспериментируйте с полями, кругом и движками, и поймёте, что к чему.

Если закрыть редактор и открыть редактор на другом экране, то список переменных будет уже другим:

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

Также редактор не поддерживает поиск по переменным, HEX-цвета и иногда искажает их. Поэтому сообщество создаёт свои редакторы тем без багов встроенного и удобнее.

Сторонние редакторы

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

1. Если темы нет ни в одном чате, то нужно выполнить шаги 2-5, иначе переходите к шагу 6.

2. Зайдите в список тем, найдите нужную тему, нажмите три точки.

3. Нажмите кнопку Share («Поделиться»).

4. Из списка выберите Телеграм.

5. Нажмите на самый верхний чат Saved Messages («Сохранённые сообщения»), подтвердите отправку.

6. Необходимо скачать тему, если она ещё не скачана.

7. После скачивания темы нажмите на три точки в правом верхнем углу «облачка».

8. Нажмите Save to Downloads («Сохранить в загрузки»).

Любознательный читатель мог заметить, что на шаге 4 можно выбрать не Телеграм, а какое-нибудь другое приложение. Главное, чтобы оно позволяло сохранить файл в загрузки или сразу бы сохраняло в память устройства.

Так тема с оригинальным названием будет сохранена в загрузках. В дальнейшем сохранённый файл открывают в любом редакторе.

На данный момент есть два редактора: от @snejugal и от @YouTwitFace. Рассмотрим оба редактора.

.attheme editor от @snejugal

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

Откроем существующую тему. Нажмём на Open an existing file, из открывшегося списка выберем проводник (в разных браузерах может быть по-разному).

И выберем нужную тему:

После этого мы увидим вот такой экран.

Рассмотрим его поближе.

• Самое верхнее поле «Amber Darkened» — название темы, его можно легко редактировать (во встроенном редакторе пришлось бы создавать новую тему);
• Close theme — закроет темы, дав возможность открыть другую;
• Download for further editing — скачивает .attheme-editor файл для дальнейшего редактирования в этом же редакторе, сохраняя название, тему и палитру (мы её рассмотрим далее);
• Compare with another theme — откроет инструмент для сравнения тем с презагруженной темой из этого редактора;
• Поле «Find or add a variable…» — поиск по всем доступным переменным (во встроенном редакторе поиска нет);
• В правом нижнем углу кнопка «Скачать», которая скачивает .attheme темы для открытия в Телеграме, по возможности оптимизируя тему.

Дальше идёт список переменных темы. Полностью он выглядит так:

Видно, что на «карточке» вверху написано имя переменной, внизу — его значение в виде HEX и RGBA. Сама карточка раскрашена в значение переменной. Стоит отметить, что здесь показывается прозрачность, чего нет во встроенном редакторе.

По нажатию на переменную покажется вот такое окно:

Здесь есть две вкладки. На первой можно задать HEX, RGB и HSL цвета, причем они динамически обновляются. На второй показаны все цвета темы с возможностью их быстро применить.

Стоит отметить, что они не будут изменять прозрачность переменной, что удобно, когда у вас есть несколько вариантов одной темы с разным акцентным цветов. По двойному нажатию на цвет из палитры он удалится. Всегда первым цветом в палитре идёт стандартный цвет, его нет только при редактировании chat_wallpaper.

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

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

Несомненным плюсом является возможность предпросмотра элемента, до которого сложно добраться в Телеграме. Однако на данный момент лишь несколько переменных имеют такие превью, что исправится со временем.

Рассмотрим поиск. По нажатию на само поле появится полный список переменных, который можно листать:

При вводе слов редактор будет показывать только те переменные, которые подходят под запрос:

При нажатии на любую переменную начнётся её редактирование. Переменная автоматически добавится в тему, если её нет.

К сожалению, сейчас в этом редакторе одновременно может быть открыта только одна тема; также не может быть изменён фон чата, если он — картинка, но она сохраняется из открытой темы и при скачивании она останется. Из плюсов — редактор поддерживает оффлайн-режим и он полноценно работает на ПК, в дополнение на нём есть Drag'n'drop:

lungers.com/attheme от @youtwitface

Данный редактор, возможно, не такой удобный, как предыдущий, но в нём есть несколько возможностей, которых нет в предыдущем. При его открытии видно всего лишь одну кнопку, которая предложит открыть тему.

После открытия темы будет такой экран:

• Вверху осталась кнопка открытия темы с названием открытой темы. Она переоткроет тему.
• Ссылка под заголовком Edit theme откроет список переменных.
• В поле Variables(s) вводится переменная или список переменных, разделённый запятыми. При вводе показываются переменные, которые, возможно, вы имеете ввиду.
• В поле hex вводится HEX цвета, на который вы хотите поменять значение заданных переменных. При нажатии на поле откроется дополнительная панель с RGB каналами и прозрачностью. На этой панели можно легко сгенерировать HEX, зная RGB и прозрачность. По нажатию на Edit заданные переменные изменятся на заданный цвет.

• Под полем HEX есть кнопка Invert — она инвертирует все цвета темы.
• Кнопка Download скачивает тему.

Надеюсь, автор в скором времени улучшит свой редактор до полноценного. Но пока рассмотрим CLI.

Общая часть по CLI

CLI расшифровывается как Command-line interface — интерфейс командной строки. Если у вас нет компьютера, то использовать CLI будет затруднительно, так что можете пропустить этот раздел.

Рассмотренные здесь CLI написаны на JS и используют Node.js как движок. Если у вас не установлен Node.js и npm, то сделайте это с официального сайта. npm устанавливается вместе с Node.js, если вы этого не отменили при установке.

Тем, кто хочет научится пользоваться CLI, но не умеет работать с командной строкой, стоит погуглить гайды по его использованию.

attheme-cli

Для установки attheme-cli нужно запустить команду npm i -g attheme-cli:

После установки надо в папке с темой запустить команду attheme:

CLI предложить создать новую тему, открыть стандартную или одну из лежащих тем в папке. Стрелками вверх/вниз перемещается список. После выбора темы можно вводить команды.

Список всех команд доступен по команде help.

• Команды valueof и get работают одинаково и выводят значения указанных переменных;

• Команда set задаст указанным переменным указанный цвет и выведет их значения;
• Команда delete удаляет указанные переменные из темы;
• Команда save сохраняет в открытый файл отредактированную тему;
• Команда importwallpaper загружает из указанного файла фон темы, команда exportwallpaper — сохраняет фон в указанный файл;
• Команда exit выходит из CLI.

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

attheme-better-cli

Работа с ним аналогична. Для установки надо запустить следующую команду:

Для запуска надо запустить команду attheme-b:

Доступные команды:

• help — показывает доступные команды;
• colors — выводит все цвета темы в виде HEX. Значения окрашиваются в приблизительный цвет или точный — в зависимости, поддерживает ли система кастомные цвета в консоли;
• save — сохраняет тему;
• open — открывает другую тему;
• show — показывает значение указанной переменной;
• set — задаёт указанной переменной указанное значение.

Текстовый редактор

Любую тему можно отредактировать и через текстовый редактор. Однако можно повредить картинку в теме, да и делать это не очень удобно, но с его помощью можно разобрать, как устроены .attheme темы.

Откроем тему и увидим следующее:

Уже можно сделать вывод о структуре любой темы:

названиеПеременной=значениеПеременной
названиеПеременной=значениеПеременной
…

Но что это за цифры? Давайте разберёмся.

Возьмём любой HEX цвет, например, #1ba1f3. Отбросим #. Также надо восстановить прозрачность перед цветом, которую отбросили, потому что цвет непрозрачный (если цвет прозрачный, то альфу опустить нельзя). Получим ff1ba1f3. Теперь представим его в двоичной системе:

Измерим длину полученной строки:

А теперь рассмотрим это число как 32-битное. Первый бит — 1, значит, число отрицательное, что и видим у большинства значений в теме. От остальной части отнимем 1:

Перевернём все биты:

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

А теперь посмотрим на файл и найдём -14966285:

Если всё проделать обратно, то можно получить HEX на основе signed int. Но в консоли можно делать это проще:

Скорее всего, вам чаще понадобится задавать значения, чем их смотреть через текстовый редактор. К счастью, в .attheme можно задавать HEX: либо #rrggbb, либо #aarrggbb:

В файле можно писать комментарии, но только на новых строках:

Спустимся вниз (почти).

Видим, что здесь начинается бинарный код — это картинка темы. Начало картинки обозначение WPS — Wallpaper start (начало обоев) — на предыдущей строке. Заканчивается картинка словом WPE — Wallpaper end (конец обоев) — на следующей строке.

Теперь вам должно быть понятно устройство тем, и, если захотите, сможете сделать инструменты для тем. Если вы JS-разработчик, то уже есть attheme-js — можно использовать этот модуль и не тратить время на изобретение колеса.

Скорее всего, редактор при сохранении темы не сможет правильно сохранить картинку — именно поэтому темы стоит редактировать в сторонних редакторах, но не в текстовом.

Здесь мы не объясняли значение каждой переменной — для этого есть словарь переменных на английском (более полный) и на русском (менее полный). Обращайтесь к нему, когда вам не понятно, что меняет какая-нибудь переменная, но сперва всегда пытайтесь сами найти изменяемый элемент. Для более удобного доступа есть бот @atthemeglossarybot, но пока что он знает меньше переменных. В любом случае, вам всегда рады помочь в @themesrussia с переменными.