With noscripts, you can also easily make themes of different color in a second!

For example, let's change colors of Colorful Mountain, a really beautiful theme by @helbjer. Now it's blue and pink, let's make it brown and green. To do this, we'll have to shift color's hue.

Remember how we did it last time? We queried all the theme's variables with activeTheme.getVariables() and then iterated over allVariablesList, where we queried the color, converted it to HSL using Color.rgbToHsl and changed lightness, then we saved the variable.

We'll do almost the same thing, but instead of changing lightness, we'll shift hue by some value. This value depends on which colors you'd like to get.

const SHIFT = 90;

const variables = activeTheme.getVariables();

for (const variable of allVariablesList) {
const color = Color.rgbToHsl(
variables.indexOf(variable) !== -1
? activeTheme.getVariable(variable)
: allVariablesDefaultValues[variable],
);

color.hue += SHIFT;

activeTheme.setVariable(
variable,
Color.hslToRgb(
Color.normalizeHslColor(color),
),
);
}

You only have to change the SHIFT constant declared at the top of the noscript. You may try experimenting with its value, or you may also choose the shift on your own — open any variable's editor and change the “Hue” field value until you get the color you like. Then just substract the value you got from the original value. Don't worry if you get a negative value — the noscript handles them!

See that we use Color.hslToRgb(Color.normalizeHslColor(color)) instead of simply Color.hslToRgb(color) — Color.hslToRgb is strict on the passed value. It won't allow values such as 370° on hue and will throw. We may get values out of range [0, 360) on hue. Color.normalizeHslColor will fix 370° to 10° (and it handles negative values too — it tries to fix the color as much as possible). Indeed, hue is a circle, and if you rotate circle both by 370° and 10°, it is in the same position. (I hope your mind didn't go blow on this brief maths 😄)

Here's an example of before and after running the noscript:

Sadly, the wallpaper went away, so you should skip chat_wallpaper when iterating over all variables if you have an image. But we think you should change the wallpaper too with shifted color with the same rate — at least, Adobe Photoshop definetely can definetely do that, but many other photo editors should support it too.

Unfortunately, we don't have API for managing the wallpaper yet, but we'll come with it in a couple of weeks and it's going to be really convenient!

Anyway, we're looking forward to creating a special noscript language for themes with a nice syntax and with all those type checkings we have to do manually now. It's going to be fast even on the web, as we're going to write it in Rust and compile it to WebAssembly for the editor. We'll also have a CLI for running noscripts that will let noscripts do even more.

For example, the noscript above would be similar to this in our themes noscript language:

for variable: color in allVariables:
  let finalColor

  if variable in theme:
    finalColor = theme.|variable|
  else:
    finalColor = copy(color)
    |variable| <- finalColor

  finalColor.hue += 90

Stay tuned!

Have you ever wondered what does the button noscriptd ”Download the workspace” do? This button is very useful if you make use of custom palettes! Let's see how.

Let's define a color in the theme's custom palette, one of the ways you can do it is ”Edit the theme's custom palette” at the top → ”Add a new color” (define as much as you want and choose colors you like). If you download your theme using the button in the bottom right corner or ”Download .attheme directly” and open this file in the editor again, you won't see the palette you defined. What a pity!

If you use the ”Download the workplace" button, you'll get an .attheme-editor file. And this is not a theme you can apply in Telegram. The editor saved its internal representation of the theme. If you open the file in the editor, you'll see the palette in its original state. The editor saves everything in this file, including the theme's name and the custom palette. You may rename the file, but the editor will show the name saved in the file contents and not from its name.

This button will become even more useful with updates. We're planning on making linkage of variable, just like .tdesktop-theme does. When downloading an .attheme, all the linkage will have to be resolved and you won't be able to restore it back from .attheme. But with .attheme-editor, you'll always have a version of your theme with all linkage saved.

The editor now has support for wallpapers and strange behavior of variables in previews, so now we can cover more variables! 💪

Thanks to @danicotra for the first preview with chat_wallpaper!

Wow, there are 37 (thirty seven!) new variables in the latest update of Telegram. I haven't checked it out myself yet, but as far as I can see they are the variables for things we couldn't change for a long time. Recently the developer @DrKLO saw my article on bugs and replied that he'd fix them. I'm really happy now; thank you, @DrKLO!

So, we're going to update the editor with new variables as soon as possible, but before this I'll make two update statements for developers who use attheme-js and attheme-default-values. I'll do it here: although it's not the place for them, but the topic is pretty similar (and yeah, the editor uses them too), and the updates are important.

So, let me begin.

Yesterday I found a bug in attheme-js that led to wrong parsing of themes from @themesporterbot. attheme-js assumed that the file ends with \nWPE\n when it has a wallpaper, bu themes generated by the porter bot ended with \nWPE. I've updated the package so it always finds where WPE is.

If you have anything working on attheme-js, please update it, especially if you work with wallpapers. The new version is 1.1.2.

And on attheme-default-values. Recently I updated it to 5.0.0 because it has one breaking change. Using CommonJS, you should require it this way:

const defaultValues = require(`attheme-default-values`).default;

Note that .default at the end — the package has moved to ES Modules, so the way you required it before won't work anymore. If you used ES Modules before, it shouldn't harm you.

Also I follow SemVer starting with 5.0.0. Previously I tried to match Telegram's version, but now I'm going to publish 5.1.0 with those 37 new variables, and new variables will always be published as a patch change.

(Also if you use TypeScript, I provide declarations files since 5.0.0! The package was rewritten in it, and so will other my packages in a while.)

So I published attheme-default-values@5.1.1 with all new variables, the editor's update is coming very soon

I've updated the editor too, so go check out the new variables and the new previews!

It seems like something broke in production and this preview doesn't show well, we'll fix that tomorrow

Update: we've fixed that bug and another one regarding this preview

I've updated .attheme editor with new variables that were added in the latest 4.9.1 update of Telegram. Go update your themes!

Also attheme-default-values is updated, thanks to @twitface.

A brief update for developers of .attheme tools:

First of all, we've written a Rust crate for working with .attheme files. Check it out!

Second, we've rewritten attheme-js from scratch: now it has a better API and provides you with many tools you'll need when working with .attheme. It's been rewritten in TypeScript, and we now provide you typings so you can develop tools in TypeScript easier.

Third, attheme-default-values is deprecated in favor of attheme-js. You can find the default theme under attheme-js/lib/defaultThemes/default.

Telegram v5.0 has come out, and .attheme editor is already up to date with new variables!

But v5.0 not also brought new variables, but also deleted a bunch of old ones regarding colored headers. .attheme editor will show those as Removed since v5.0 so you can upgrade your themes more smoothly.

attheme-js and attheme-rs are also updated to v2.1.4 and v0.2.0 respectively with support of the new variables. Note that attheme-rs is now only compileable with Rust 2018, so be sure to install Rust 1.31 before updating the crate.

We've released a new version of .attheme editor to fix one bug. The bug is that opening themes with @atthemeeditorbot failed with an error. Now it works as good as always 😉

Just a reminder: whenever you face a red dialog saying ”Whops, an error happened”, you should report it to @snejugal or on our GitHub repository. That error always indicates a bug in the editor that must be fixed or properly handled by the editor. With your bug report, the editor will get a little better :)

A brief update: .attheme editor has been updated with new variables for the poll attachment button.

Also I've seen that more people are facing this bug. I swear I'll fix it this weekend 🙏

FInally, .attheme editor is now available in Spanish! Thanks to @DiegoCanevaro for translation 👍