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.)

With scripts, 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 script. 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 script 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 script:

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 script 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 scripts that will let scripts do even more.

For example, the script above would be similar to this in our themes script 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!