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 scripts 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 script 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 script:
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 script — 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 script)

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 script:

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 script 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!

The editor shows a startup error if you open it right now (unless it's cached on your side). It's our problem and not your browser's, we're already working on fixing it. Just wait for a few minutes!

UPD: The issue is already fixed — try clearing cache for snejugal.ru if it still shows the error.

Since now, we will test our productions builds locally before deploying to the server (unfortunately, some issues don't appear during development).

Here comes a new beta of .attheme editor! Here's what's new:
— We worked hard on code splitting and now the editor loads only what does need to work well on startup. Other feautures, like the interpreter for running scripts and wallpaper's primary colors detector, are loaded when you do need them. This helped reduce the editor's loading time as much as about three times!
— We've added the new four variables from the latest Telegram release;

We've worked hard on UX, here are some improvements:
— Dialogs now open and close smoothly, and it looks much better than before;
— If you click a button that has to upload a theme to a bot, it shows that it is being uploaded, and if something goes wrong, the editor will let you know about it in a friendly way;
— Colors from the wallpaper that you already added in your palette are shown as added;
— While the editor is loading, you'll see spinners on tabs, so the editor won't seem to be frozen;
— and some more.

The next beta comes tomorrow with variables previews, and if everything goes well, it will become the stable version on this Sunday. We can't wait for that 🎉

Hope you'll like the beta! If you find bugs, report them to @snejugal.

And here comes the last beta version of .attheme editor before the stable one! Two changes:

1. We fixed an important bug which led to deletion of a wrong theme in the editor's database. Thanks to @ivanfrei for reporting this bug;
2. As we promised, we ported variables previews from the old editor. We'll be adding more previews with time.

Making previews for the editor takes much time, so if you can help us as a volunteer (you need a vector editor and know how to work with it), contact @snejugal.

If everything goes well, we'll release the first stable version on Sunday!

Hope you like the update! Let us know about bugs by contacting @snejugal.

This day has come — .attheme editor 2.0 has become the stable version.

The new version introduces a few major features. We've reviewed them in this article.

It doesn't mean we stop working on the editor — we don't, and we have ideas of many features which we'll be implementing, first in the dev branches, and then merging it with the stable branch.

If you have your own ideas, fill an issue or even implement it by yourself and pull request it on our GitHub repository.

Thank you for being with us, with a team of two developers and six translators wishing tools, themes, the community and the whole world to be better.

Did you know you can add .attheme editor to your home screen?

You can do you it with Chrome (and I believe some other browsers support it too), which will install a real app which opens the editor. Not only it adds an icon on your home screen, but will suggest opening editor links right in the editor! You won't have to deal with that address bar which overflows editor anymore 😎 (you can also create a shortcut on desktop Chrome — it's in Menu → More tools → Create shortcut)

And yet, you can use .attheme editor even offline. The only thing in our editor that requires internet connection is uploading a theme to a bot, but this is not required. All the other stuff is done completely on your side — the editor just downloads some code when it needs it for things like script running or wallpaper's primary color detection, and this code is cached until it changes.

(Of course, there are much more websites that can be added to your home screen, e.g. Twitter supports it too, and I myself use it as a web app instead of a huge laggy apk.)