Hello there! Another beta of .attheme editor is here. Here's what we've done:

— Wallpaper's colors! If you have an image wallpaper in your theme, you'll see its primary colors when you open chat_wallpaper's editing panel. You can add them in your theme's custom palette from the panel — the palette which colors are completely up to you — and then you can set these colors for any variable.
— Now, the editor supports Uzbek in addition to Russian, Italian and Ukrainian. Salom! 👋
— We've added a new built-in palette named Apple. And the Material Design palette now has all shades the guidelines provide.
— We've also fixed some bugs, e.g. if you just add a new variable from search and don't change its color, it would remain having the Unadded badge. Or if you had an image on chat_wallpaper but then decided to change it to black, the variable would just disappear.

Hope you like the new editor we're working on! As always, it's not all and new features are yet to come.

A litte bit on the theme's custom palette — although it already exists, you can't currently manage it completely. This ability is coming in the next beta.

If you want the editor to be in your language, you can always pull request on our GitHub repository or contact @snejugal.

Here's another beta of .attheme editor! Here's what we've done:

— Custom palette edit! Now you can edit your theme's custom palette from both the theme screen and variable edit panel when in palettes. You can add new colors, change and delete existing ones. You can also change the name of the colors.
— We've credited our translators, you can see them on the new workplace screen. Big thanks to them! 👍
— And we also fix some bugs and made some design improvements.

We planned to release the first stable version of the new .attheme editor when we have at least all features of the old editor. Now the only feature to be ported is variables previews, so we started preparing for releasing the first stable version. We'll be improving our UX and making some internal changes. Thus, we ask you to test the beta version for bugs heavily in all possible conditions and report us them, so we can fix them before releasing the stable version. If everything goes the right way, we'll release the stable version at the end of this week.

Hope you enjoy the new version! New features are yet to come, although we're preparing for the stable release 😉

You already know that you can run noscripts in the editor to simplify a lot of work (and if you don't — surpise! It's a really awesome feature). You can, for example, make a dark theme basing on a light one in a second. Let's see how.

First, you might think of a noscript that just inverts all the colors in the theme, like this one:

const variables = activeTheme.getVariables();

for (const variable of variables) {
  const color = activeTheme.getVariable(variable);
  
  color.red = 255 - color.red;
  color.green = 255 - color.green;
  color.blue = 255 - color.blue;
  
  activeTheme.setVariable(variable, color);
}

But there are two downsides of this noscript:
1. The most obvious, it turns colors into negated one, e.g. red to cyan. We would like to expect to change only white to black and vice versa;
2. The least obvious, it won't change unadded variables and the theme will look uglier.
So let's try to fix these issues.

The second one is the easiest to fix, here's what you need to change:

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

(Note: we can't use neither `Object.assign` nor `variables.includes` until the interpreter supports them. You should also copy the color if it's not in the theme just if you'll have to use it once more in the same noscript — do it on your own.)
(Don't forget to remove the `+` and `-` on the line starts — they denote what you should change and they're not a part of the noscript)

But what about the first issue? We need to change the lightness of the color, not inverse its RGB channel. And we need to use HSL! Let's do that. Here's the final noscript:

const variables = activeTheme.getVariables();

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

(Note: activeTheme.setVariable requires an RGB color.)

Now try running the noscript on some of the light themes you'd like to turn to dark (or vice versa)! Here's an example on Green Lightened:

The latest Telegram beta introduced four new variables:
— passport_authorizeText;
— passport_authorizeBackground;
— passport_authorizeBackgroundSelected;
— dialog_liveLocationProgress.

.attheme editor will have them in the next beta. For developers, we've already updated the attheme-default-values npm package (do npm up attheme-default-values)

The only reason we can't deploy a new beta right now is localizations. It's likely that we'll have to do it is in Thursday's early morning (GMT). We worked hard on UX in this beta; stay tuned!