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

Обновлено: 07.07.2024

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

Как поменять фоновое изображение

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

Android

Если открыть любой диалог в Телеграме на Андроид, в качестве фона виден серый цвет с еле заметными силуэтами животных и различных предметов.

Некоторым это не нравится, они хотят установить фото или более приятную картинку, для этого:

iPhone

Здесь все также, как и на Android, так как приложения одинаковые, у них идентичные настройки:

На компьютере

У многих пользователей мессенджер установлен на ПК, соответственно, они интересуются, как поменять фон в телеграмме на компьютере. Инструкция:

Видео

Как поменять цвет в Телеграмм

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

Android

В Андроид-версии настройка происходит следующим образом:

iPhone

Алгоритм действий для изменения темы на айфонах ничем не отличается от Андроид:

На компьютере

Чтобы создать свою тему для Телеграма в десктопной версии мессенджера:

Как вернуться к настройкам по умолчанию

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

В мобильных версиях

Для восстановления первоначальной темы в мобильной версии приложения:

В ПК версии

Чтобы вернуть начальную цветовую схему приложения на компьютере:

В Telegram появилась новая опция, которая позволит устанавливать отдельные цветовые темы для конкретных личных чатов.

Более 2000 рекламных агентств и фрилансеров уже работают с сервисом.
Подключиться можно самому за 1 день.
Зарабатывайте с первого потраченного рубля, без начальных ограничений, без входного барьера.
Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.
У вас остаются прямые доступы в рекламные кабинеты, рай для бухгалтерии по документообороту и оплатам.

Выбранная тема устанавливается сразу для обоих участников чата, она будет отображаться на всех устройствах. Ваш собеседник увидит тему, если у него установлена актуальная версия Telegram.

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

Запись трансляций и видеочатов: можно записать как видео со звуком, так и просто звук. Для видео поддерживается запись в вертикальном и горизонтальном форматах. Готовая запись сохраняется в чате Избранное.

Администраторы могут включить запись в меню настроек трансляции или видеочата (значок ⋮ на Android, ⋯ на iOS). Если чат записывается, это будет отмечено красной точкой рядом с его названием.

Если вам надоел стандартный фон чата в мессенджере Телеграм, то вы можете в любой момент изменить его в настройках. Мы расскажем, как выбрать оформление в приложении на телефоне и с ПК.

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

Войдите в Настройки (иконка с вертикальным троеточием в углу экрана).
Выберите пункт Settings. Далее – кликните на Chat backgrounds (обои для диалога). Из представленных картинок выберите ту, которую хотели бы установить на фон. Вы можете также загрузить собственное изображение.
Нажмите ОК.

Изменение цветовой темы в Телеграм

В мессенджере есть еще более широкие возможности для оформления интерфейса. Например, вы можете изменить цвет.

В параметрах приложения (значок с тремя точками в углу дисплея) выберите Chat backgrounds либо пункт Theme на смартфоне. Переходите в раздел редактирования темы с компьютера (Edit theme) или Create new theme – для смартфона.
В специализированном редакторе вы можете подобрать комфортные вашим глазам оттенки. Есть еще один вариант: скачать готовые темы и обои для Telegram. Найти сторонние сервисы вы сможете с помощью Интернета. Кроме того, в самом мессенджере можно подписаться на каналы, где регулярно публикуют картинки для установки на фон переписки.

Как вернуть стандартное оформление?

Если вы недовольны внесенными изменениями, то можете возвратиться к классической теме.

В разделе настроек выберите пункт Chat Background (с версии на компьютере) или Theme (с мобильного телефона).
Вам понадобится пункт настроек Use default color theme. Кликните ОК – готово!

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

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

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

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

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

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

Нажать туда, где красный кружок

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

Вот сюда

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

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

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

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

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

чооо

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

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

здесь уже всё точно так же, как и раньше

Список тем

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

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

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

Создание тем

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.attheme editor от @snejugal

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вверху осталась кнопка открытия темы с названием открытой темы. Она переоткроет тему.
Ссылка под заголовком 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.

attheme-better-cli

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также: