Как сделать тему для телеграмм для андроид

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

Содержание:

В одном из последних обновлений мессенджера, появилось несколько интересных нововведений касаемых оформления Telegram. Изменить или создать тему самому, все это теперь под силу любому пользователю приложения.

↑ Как изменить тему

Для этого заходим в настройки программы и выбираем раздел «тема».

Выбор будет не велик, в стандартном варианте будет представлено три варианта оформления: «по умолчанию», «blue», «dark».

Но не стоит отчаиваться цветовую гамму можно изменить самостоятельно, создав собственное решение.

↑ Как создать тему на мобильном устройстве

В разделе «тема» выбираем создать новую, и придумываем ей имя.

Далее кликнув по трем точкам рядом с названием оформления, выбираете «изменить».

Откроется цветовая палитра, перемещая ползунок, настраиваем подходящуюю схему для фона чата, заголовка, текста, и прочих вспомогательных элементов управления Телеграмм.

Для подтверждения нажимаем «сохранить».

↑ Как поменять тему на компьютере.

В десктоп версии приложения Telegram также присутствуют стандартные темы. Заходим в «settings».

Пролистываем ниже до графы «Chat background» и выбирем пункт «Choose from gallery»

Здесь можно выбрать один из предустановленных вариантов оформления.

Если вы не нашли подходящюю «внешность» для Телеграмм, можно воспользоваться официальным каналом с темами. Пройдя по ссылке и присоединившись к каналу Desktop themes, выбираем понравившееся оформление, и нажимаем значок скачать.

Далее кликнув еще раз по значку «загрузить» откроется его превью.

Подтверждаем установку, нажав «apply this theme».

↑ Фоновая схема своими руками

Для более продвинутых пользователей есть возможность создавать «внешность» для Telegram самостоятельно. Сперва необходимо создать файл color.tdesktop-theme

1. Скачать стандартный исходный код цветовой схемы для Telegram
2. Открыть его в любом текстовом редакторе
3. Поменять элементы цветовых кодов
4. Сохранить файл в виде color.tdesktop-theme.
5. Далее выбираем файл, который будет являться фоновым рисунком и называем его background..jpg (.png) или tiled.jpg (.png) В первом случае изображение будет растянуто на весь фон, во втором будет эффект «плитки».

Архивируем готовые файлы (color.tdesktop-theme, background.jpg) в zip – архив и меняем его расширение на .tdesktop-theme.

Для того чтобы открыть готовый файл, заходим в настройки и ищем пункт «Choose from file».

Источник

Как создать собственную тему оформления Telegram и поделиться ею с другими

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

Как создать тему оформления Telegram

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

Как поделиться своей темой оформления

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

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

Источник

TELEGRAM BLOG

Как создать и поменять тему в Telegram

С недавнего времени появилась возможность создавать и менять внешний вид в мессенджере Telegram. Теперь каждый пользователь сам может подобрать себе тему по своему вкусу. В статье приведен пример как это можно сделать в Telegram Desktop и в приложении на смартфоне.

Как изменить тему на ПК:

• Для начала заходим в Настройки своего мессенджера (через верхний левый угол). Если ваш мессенджер до сих пор не русифицирован, то после обновления приложения до последней версии русский язык можно выбрать там же через Настройки

• Здесь можно выбрать из галереи уже имеющуюся из стандартных тем, а так же выбрать файл ранее загруженной темы на свой ПК из открытых источников или отредактировать имеющуюся ранее загруженную тему.

• В нашем случае мы выбираем из предустановленных вариантов тем в Галереи.

• Если вам не понравилась ни одна из представленных стандартных тем, то вы можете воспользоваться каналами с большим выбором тем @TheThemes, @TheAndroidThemes, @Desktop_Themes. Для этого набираем в поиск название канала, при желании присоединяемся к нему или сразу скачиваем понравившуюся тему оформления, нажав на стрелочку как показано на скриншоте ниже.

• Далее кликнув еще раз по значку «загрузить» откроется его превью.

• За 10 секунд нам нужно решить применить данную тему оформления, либо вернуться к предыдущей.

Как изменить тему на смартфоне:

• Заходим в Настройки приложения через верхний левый угол экрана

• Выбираем раздел Тема

• По умолчанию выбор будет маленький, в стандартном варианте представлено всего три варианта оформления: «по умолчанию», «blue», «dark».

• Если ни одна из представленных тем вам не понравилась, не стоит расстраиваться, можно создать тему с любой цветовой гаммой.

Как создать тему оформления в мобильном приложении:

• Не выходя из раздела Тема выбираем пункт Создать новую тему и придумываем ей название

• Затем кликая по трем точкам напротив темы оформления, выбираем пункт Изменить.

• Перед нами открывается цветовая палитра, используя перемещение ползунка, настраиваем желаемый цвет для фона чата, заголовка, текста, и прочих вспомогательных элементов управления приложения Telegram. Для подтверждения каждого действия не забываем нажимать на кнопку Сохранить.

Как сделать фоновую схему для Telegram самому:

Источник

Как создать собственную тему оформления для Telegram на Android

21 февраля в версии мессенджера Telegram для Android появилась поддержка тем оформления. Они оказались настолько популярны, что мессенджер выделил для них специальный канал. Устанавливать темы можно в настройках приложения и помощью канала AndroidThemes. Кроме того, каждый пользователь может настроить внешний вид приложения под себя в зависимости от своих предпочтений.

Как создать свою тему оформления Telegram для Android:

1. Запустите Telegram и зайдите в настройки приложения. Выберите раздел «Theme».
2. Здесь представлены три темы: дефолтная, синяя и тёмная. Если они вас не устраивают и вы хотите создать собственную тему оформления, нажмите «Create New Theme».

3. Задайте ей любое название, например, «Моя тема». Нажмите «ОК». Она появится в списке доступных тем. Нажмите на значок палитры.

4. Вы увидите список различных элементов мессенджера, для каждого из которых можно выбрать новый цвет. Нажмите на любой элемент — откроется палитра с выбором цвета. Выберите любой цвет — изменения будут демонстрироваться вам в режиме реального времени. Нажатие на кнопку «Save» сохранит цвет для выбранного элемента.

5. Проделайте предыдущее действие действие для всех элементов или тех, чей цвет вы хотите изменить (фон приложения, фон чатов, текст чатов, текст контактов, заголовки и т.д.)

Все изменения темы сохраняются в приложении. В любой момент вы можете изменить свою тему оформления. Для этого нужно зайти в настройки, нажать на вертикальное многоточие у названия темы, выбрать опцию «Edit», отредактировать тот цвет элементов интерфейса, что вас не устраивает, и сохранить тему. Если тема получилась настолько удачной, что понравилась вам , вы можете поделиться ею с друзьями, выбрав опцию Share.

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

В настоящее время изменения темы оформления поддерживает только версия Telegram для персональных компьютеров и приложение мессенджера для Android. В скором времени поддержка тем появится в приложении на iOS. Вероятно, в нём тоже можно будет устанавливать собственные темы, а это значит, что данная инструкция скоро пригодится пользователям iPhone и iPad.

Источник

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

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

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

За почти год в Телеграме появилось много каналов и групп с темами, например, @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. Теперь представим его в двоичной системе:

0x — обозначение шестадцатиричной системы счисления

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник