telegram-crawler/data/web/corefork.telegram.org/themes.html
2024-06-30 11:08:17 +00:00

146 lines
8.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html class="">
<head>
<meta charset="utf-8">
<title>Creating Custom Cloud Themes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="description" content="Official Telegram apps support custom cloud themes as of version 5.11. Everyone is welcome to create and share their themes.…">
<meta property="og:title" content="Creating Custom Cloud Themes">
<meta property="og:image" content="">
<meta property="og:description" content="Official Telegram apps support custom cloud themes as of version 5.11. Everyone is welcome to create and share their themes.…">
<link rel="icon" type="image/svg+xml" href="/img/website_icon.svg?4">
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<link rel="alternate icon" href="/img/favicon.ico" type="image/x-icon" />
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
<link href="/css/telegram.css?239" rel="stylesheet" media="screen">
<style>
</style>
</head>
<body class="preload">
<div class="dev_page_wrap">
<div class="dev_page_head navbar navbar-static-top navbar-tg">
<div class="navbar-inner">
<div class="container clearfix">
<ul class="nav navbar-nav navbar-right hidden-xs"><li class="navbar-twitter"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i><span> Twitter</span></a></li></ul>
<ul class="nav navbar-nav">
<li><a href="//telegram.org/">Home</a></li>
<li class="hidden-xs"><a href="//telegram.org/faq">FAQ</a></li>
<li class="hidden-xs"><a href="//telegram.org/apps">Apps</a></li>
<li class=""><a href="/api">API</a></li>
<li class=""><a href="/mtproto">Protocol</a></li>
<li class=""><a href="/schema">Schema</a></li>
</ul>
</div>
</div>
</div>
<div class="container clearfix">
<div class="dev_page">
<div id="dev_page_content_wrap" class=" ">
<div class="dev_page_bread_crumbs"></div>
<h1 id="dev_page_title">Creating Custom Cloud Themes</h1>
<div id="dev_page_content"><p>Official Telegram apps support <a href="https://telegram.org/blog/scheduled-reminders-themes#custom-cloud-themes">custom cloud themes</a> as of version <strong>5.11</strong>. Everyone is welcome to create and share their themes.</p>
<h3><a class="anchor" name="creating-a-theme" href="#creating-a-theme"><i class="anchor-icon"></i></a>Creating a theme</h3>
<p>You can use the <a href="https://themes.contest.com/"><strong>Online Theme Editor</strong></a> (use a <strong>VPN</strong> if it is blocked in your country) to create new Telegram themes from scratch or edit existing ones. Simply log in with your Telegram account and pick a platform to start <strong>editing</strong> the relevant theme file or <strong>import</strong> an existing theme.</p>
<ul>
<li>Set a <strong>name</strong> for your theme using the <code>name</code> attribute</li>
<li>Set colors for elements using <strong>hex codes</strong> or the <strong>color picker</strong></li>
<li>Press Save and apply theme to <strong>push changes</strong> to all users of your theme</li>
</ul>
<h3><a class="anchor" name="checking-your-theme-in-app" href="#checking-your-theme-in-app"><i class="anchor-icon"></i></a>Checking your theme in-app</h3>
<p>Once you have <strong>saved</strong> a theme for the first time, Telegram will send you a message with its <a href="#publishing-your-theme">sharing link</a>. Open the link in the app to switch to your theme.</p>
<p>You can always switch to your theme in <em>Settings &gt; Chat Settings</em>. On iOS and MacOS native app <em>Settings &gt; Appearance</em>.</p>
<h3><a class="anchor" name="publishing-your-theme" href="#publishing-your-theme"><i class="anchor-icon"></i></a>Publishing your theme</h3>
<p>Each theme has a <code>t.me/addtheme</code> <strong>link</strong> which people can use to switch to your theme. You can choose a beautiful short link (e.g., <a href="https://t.me/addtheme/desert"><a href="https://t.me/addtheme/desert">https://t.me/addtheme/desert</a></a>) by changing the <code>shortname</code> attribute. If you add support for multiple platforms, the same link can be used for setting your theme on <strong>all</strong> of them.</p>
<h3><a class="anchor" name="updating-your-theme" href="#updating-your-theme"><i class="anchor-icon"></i></a>Updating your theme</h3>
<p>Your theme gets <strong>updated automatically</strong> for all its users whenever you save and apply changes.</p>
<h3><a class="anchor" name="including-a-chat-background" href="#including-a-chat-background"><i class="anchor-icon"></i></a>Including a chat background</h3>
<p>Your themes can include a <a href="https://telegram.org/blog/backgrounds-2-0">custom wallpaper</a>. To do this, simply go to <em>Settings &gt; Chat Settings &gt; Chat Background</em>. On iOS and MacOS native app <em>Settings &gt; Appearance &gt; Chat Background</em>.</p>
<p>Open any background and tap the sharing button in the top right corner, then copy its <code>t.me/bg/...</code> link. In the theme file, set this link as the value of the <code>wallpaper</code> attribute.</p>
<p>For Telegram Desktop, if you want to make the background <strong>tiled</strong>, add <code>?mode=tiled</code> at the end of the link. For example:</p>
<pre><code>wallpaper: t.me/bg/-jI7lnO3DFABAAAA1vXcFaZP_Vo?mode=tiled</code></pre>
<h3><a class="anchor" name="creating-themes-in-app" href="#creating-themes-in-app"><i class="anchor-icon"></i></a>Creating themes in-app</h3>
<p>If you prefer a more WYSIWYG approach, try creating themes using the in-app tools for customizing appearance. Telegram for <a href="https://telegra.ph/Create-Theme-Android-FAQ">Android</a> and <a href="https://telegra.ph/Create-Theme-Desktop-FAQ">Telegram Desktop</a> have advanced in-app theme editors. Telegram for iOS and MacOS allow choosing a custom accent color from the color wheel and a background, then saving the result as a custom theme.</p>
<p>Once you have saved a new theme in any of the apps, it also becomes accessible in the <a href="https://themes.contest.com/">online editor</a>.</p>
<p><strong>Read more</strong></p>
<ul>
<li><a href="https://telegra.ph/Create-Theme-Android-FAQ">Android Theme Editor</a></li>
<li><a href="https://telegra.ph/Create-Theme-Desktop-FAQ">Telegram Desktop Theme Editor</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer_wrap">
<div class="footer_columns_wrap footer_desktop">
<div class="footer_column footer_column_telegram">
<h5>Telegram</h5>
<div class="footer_telegram_description"></div>
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
</div>
<div class="footer_column">
<h5><a href="//telegram.org/faq">About</a></h5>
<ul>
<li><a href="//telegram.org/faq">FAQ</a></li>
<li><a href="//telegram.org/privacy">Privacy</a></li>
<li><a href="//telegram.org/press">Press</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps#mobile-apps">Mobile Apps</a></h5>
<ul>
<li><a href="//telegram.org/dl/ios">iPhone/iPad</a></li>
<li><a href="//telegram.org/android">Android</a></li>
<li><a href="//telegram.org/dl/web">Mobile Web</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps#desktop-apps">Desktop Apps</a></h5>
<ul>
<li><a href="//desktop.telegram.org/">PC/Mac/Linux</a></li>
<li><a href="//macos.telegram.org/">macOS</a></li>
<li><a href="//telegram.org/dl/web">Web-browser</a></li>
</ul>
</div>
<div class="footer_column footer_column_platform">
<h5><a href="//core.telegram.org/">Platform</a></h5>
<ul>
<li><a href="//core.telegram.org/api">API</a></li>
<li><a href="//translations.telegram.org/">Translations</a></li>
<li><a href="//instantview.telegram.org/">Instant View</a></li>
</ul>
</div>
</div>
<div class="footer_columns_wrap footer_mobile">
<div class="footer_column">
<h5><a href="//telegram.org/faq">About</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/blog">Blog</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps">Apps</a></h5>
</div>
<div class="footer_column">
<h5><a href="//core.telegram.org/">Platform</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/press">Press</a></h5>
</div>
</div>
</div>
</div>
<script src="/js/main.js?47"></script>
<script>backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>