Come creare un tema per Telegram Desktop: guida completa con codice pronto

Anteprima del tema Horror per Telegram Desktop con interfaccia nera, dettagli in rosso sangue, finiture in giallo e sfondo di Michael Myers del film Halloween.

Personalizzare l'interfaccia di Telegram Desktop permette di dare un aspetto unico all'applicazione su Windows, Mac e Linux. Ogni tema si basa su una lista di parametri di colore che definiscono ogni singolo elemento della finestra: dalle bolle dei messaggi ai pulsanti, fino ai dettagli degli allegati.

Abbiamo tre modi principali per creare un tema per Telegram Desktop da zero: l'editor integrato nell'app Telegram, la piattaforma web ufficiale per i designer e la creazione manuale del pacchetto file.


1. Creare e personalizzare il tema direttamente dall'app Telegram Desktop

Il metodo più semplice per personalizzare senza toccare righe di codice è l'editor integrato nell'applicazione Telegram Desktop.

Schermate di Telegram Desktop con passaggi per creare un nuovo tema: menu Impostazioni chat, menu a tre punti in alto e pannello Modifica tavolozza dei colori.

Avvia l'App, vai in Impostazioni, seleziona Impostazioni chat, clicca sui tre pallini ⁝ in alto, poi su Crea nuovo tema.

Si aprirà a destra dello schermo la finestra Modifica tavolozza dei colori. Attraverso questo pannello puoi cercare ciascun parametro usando la barra di ricerca o scorrendo la lista.

A fianco di ogni nome (come windowBg per lo sfondo principale o windowFg per il testo) trovi un riquadro colorato, cliccandoci si apre il selettore colore (color picker) da cui scegliere la sfumatura esatta senza dover digitare i codici HEX.

Per tua comodità ti suggerisco di usare il mio generatore di colori casuali e convertitore HEX in RGBA. Potrai creare in un sol colpo 300 colori in formato HEX, visualizzarli su schermo e copiarne rapidamente il codice con il pulsante "Copy".

Una volta completata la personalizzazione dei blocchi, premi il pulsante Salva tema > scegli un nome > Salva per applicare le modifiche.

Ogni tema ha un link che le persone possono usare per passare al tuo tema.
Segui questo 🔗 link t.me/addtheme per applicare il mio tema al tuo Telegram Desktop.
Wallpaper per lo Sfondo chat: wall.alphacoders.com/big.php?i=839562


2. Creare il tema dall'editor web ufficiale

Interfaccia dell'editor web Telegram Themes con elenco delle variabili di colore per Telegram Desktop e pulsante Import File.

Con la piattaforma Telegram Themes puoi lavorare via browser, sincronizzato con l'account Telegram.

Facendo il login col tuo numero, vedrai l'elenco completo delle variabili di sistema. Nell'editor web hai due opzioni per modificare gli elementi: puoi fare clic sui pallini colorati posizionati a sinistra del codice esadecimale per aprire il color picker, oppure puoi selezionare la riga di codice e incollare direttamente la stringa del colore in formato esadecimale (ad esempio #0A0A0A per il nero scuro).

Non tutti i parametri contengono un codice colore diretto. Nel file di configurazione troverai tre tipi di assegnazione:

Valori esadecimali: usano il formato standard a 6 cifre (es. #FFFFFF) o a 8 cifre per la trasparenza (come #00000080, dove le ultime due regolano l'opacità Alpha).

Ereditarietà dinamica: diverse voci non fissano un colore, ma lo ereditano da un'altra variabile. Se leggi windowFgOver: windowFg, significa che al passaggio del mouse il testo utilizzerà lo stesso valore di windowFg, aggiornandosi in automatico se quest'ultimo viene modificato.

Indicatori file: variabili come mediaviewFileRedCornerFg, YellowCornerFg, GreenCornerFg e BlueCornerFg controllano semplicemente l'angolino colorato sulle anteprime dei file senza miniatura (rispettivamente per .pdf, .zip, .exe e .dmg).


3. Codice completo Tema Telegram Desktop personalizzato (creiamo un pacchetto .tdesktop-theme)

Se vuoi crearti il file sul PC invece di usare direttamente l'editor online, bastano tre passaggi:

1) Copia e salva il codice qui sotto all'interno di un file di testo rinominandolo colors.tdesktop-theme.

2) Comprimilo creando un archivio .zip (se vuoi inserire uno sfondo personalizzato, rinomina l'immagine in background.png o jpg e mettila nello ZIP insieme al file colors.tdesktop-theme).
Nel mio caso ho usato questo wallpaper: wall.alphacoders.com/big.php?i=839562 (Michael Myers Nightmare by gabrielwillames), adattandolo alla risoluzione del mio schermo.

3) Rinomina l'archivio ZIP in tema-horror-telegram.tdesktop-theme.

Questo passaggio è indispensabile perché Telegram legge solo la struttura ZIP interna rinominata con l'estensione proprietaria del programma, ovvero .tdesktop-theme (versione desktop del client per Windows, Linux, Mac OS).

Una volta fatto, puoi importarlo direttamente nell'editor Telegram Themes cliccando su Import File > poi su SAVE AND APPLY THEME per installarlo (riceverai un messaggio automatico sul tuo client con il collegamento diretto per attivarlo) > APRI TEMA > Applica questo tema.

Tema Horror pronto da copiare

Di seguito trovi il codice completo di un tema scuro in stile Horror con sfondo nero profondo per l'interfaccia, testi principali bianchi nelle chat e nei gruppi, dettagli primari e bottoni in rosso sangue, finiture in giallo.
Se non è di tuo gradimento, nessuno ti vieta di modificarlo come meglio credi.

Tema completo
name: Tema Horror shortname: tema_horror_custom // SFONDI GENERALI E FINESTRE windowBg: #000000; windowBgOver: #121212; windowBgRipple: #260000; windowFg: #ffffff; windowFgOver: #ffffff; windowSubTextFg: #a6a6a6; windowSubTextFgOver: #d9d9d9; windowBoldFg: #ffffff; windowBoldFgOver: #ffffff; windowBgActive: #8b0000; windowFgActive: #ffffff; windowActiveTextFg: #ff3333; windowShadowFg: #000000; windowShadowFgFallback: #1a1a1a; shadowFg: #00000080; slideFadeOutBg: #000000; slideFadeOutShadowFg: #000000; imageBg: #000000; imageBgTransparent: #000000; // BARRA DI SCORRIMENTO (LE SCROLLBAR) scrollBarBg: #8b000080; scrollBarBgOver: #ccff00; scrollBg: #00000000; scrollBgOver: #00000040; // BARRA SUPERIORE E MENU titleBg: #0a0a0a; titleBgActive: #0a0a0a; titleButtonBgOver: #1f1f1f; titleButtonFg: #808080; titleButtonFgActive: #ffffff; titleButtonFgOver: #ffffff; titleButtonCloseBgOver: #e81123; titleButtonCloseFgOver: #ffffff; titleFg: #cccccc; titleFgActive: #ffffff; // BOTTONI E ELEMENTI DI CONTROLLO btnColor: #8b0000; btnColorOver: #a10000; btnFg: #ffffff; btnDullBg: #1a1a1a; btnDullBgOver: #262626; btnDullFg: #ff3333; btnDullFgOver: #ff4d4d; // CASELLE DI TESTO E INPUT inputBg: #0d0d0d; inputFd: #000000; inputFg: #ffffff; inputFgUnfocused: #a6a6a6; inputBorderFg: #333333; inputBorderFgActive: #8b0000; // LISTA CHAT E PANNELLO LATERALE dialogsBg: #0a0a0a; dialogsBgOver: #171717; dialogsBgActive: #8b0000; dialogsNameFg: #ffffff; dialogsNameFgActive: #ffffff; dialogsChatIconFg: #ff3333; dialogsChatIconFgActive: #ffffff; dialogsDateFg: #808080; dialogsDateFgActive: #e6e6e6; dialogsTextFg: #a6a6a6; dialogsTextFgService: #ff3333; dialogsTextFgActive: #f2f2f2; dialogsUnreadBg: #8b0000; dialogsUnreadBgMuted: #333333; dialogsUnreadFg: #ffffff; dialogsBadgeBg: #8b0000; dialogsBadgeBgPriority: #ccff00; dialogsBadgeFg: #ffffff; dialogsVerifiedIconBg: #8b0000; dialogsVerifiedIconFg: #ffffff; dialogsSendingIconFg: #ff3333; // AREA CHAT ED ELEMENTI DI MESSAGGIO historyUnreadBarBg: #141414; historyUnreadBarBorder: #8b0000; historyUnreadBarFg: #ff3333; // MESSAGGI RICEVUTI (IN ARRIVO) msgInBg: #121212; msgInBgSelected: #2b0000; msgInFg: #ffffff; msgInFgSelected: #ffffff; msgInDateFg: #808080; msgInDateFgSelected: #cccccc; msgInServiceFg: #ccff00; msgInServiceFgSelected: #ccff00; msgInReplyBarColor: #8b0000; msgInReplyBarSelColor: #ff3333; // MESSAGGI INVIATI msgOutBg: #4a0000; msgOutBgSelected: #660000; msgOutFg: #ffffff; msgOutFgSelected: #ffffff; msgOutDateFg: #ff8080; msgOutDateFgSelected: #ffffff; msgOutServiceFg: #ccff00; msgOutServiceFgSelected: #ccff00; msgOutReplyBarColor: #ff3333; msgOutReplyBarSelColor: #ccff00; // TESTO DEI SERVIZI E NOTIFICHE DI SISTEMA msgServiceBg: #00000080; msgServiceFg: #ccff00; // LINK, SELEZIONE E FINITURE msgInBgActive: #8b0000; msgInFgActive: #ffffff; msgOutBgActive: #a10000; msgOutFgActive: #ffffff; historyTextInSelectBg: #8b000080; historyTextOutSelectBg: #ff000080; mainMenuBg: #0d0d0d; mainMenuCoverBg: #000000; mediaPlayerBg: #0d0d0d; mediaPlayerActiveFg: #ccff00; mediaPlayerInactiveFg: #8b0000;

Ripristina il tema predefinito

Se ci ripensi o vuoi tornare alle origini, ecco come ripristinare il tema predefinito di Telegram Desktop:

1) Vai su Impostazioni > Impostazioni chat.
2) Seleziona uno dei temi predefiniti (Classico, Notte o Scuro) nell'elenco in alto per applicarlo all'istante. Puoi chiudere il popup.

Per altri temi già pronti all'uso, apri il canale Desktop Themes Channel o visita vsthemes.org/en/skins/telegram/.

Potrebbe interessarti anche:
Come creare da zero temi Chrome personalizzati con JSON e Notepad
Bot Telegram: cosa sono, come aggiungerli, come crearne uno e quali sono i migliori
Creare un'estensione per Chrome da zero: bookmarks con PIN
Image Downloader per Google Chrome fai da te

Nessun commento: