.attheme editor 2.0 came out!

After a month of development, we released .attheme editor 2.0! Let's see what's new.

Tabs

Now you can upload to the editor as much themes as you want and have access to any of those themes at the same time.

This will simplify your work a lot: instead of open one theme, editing it, saving it, closing it and opening another theme, you can just open all the themes at once, either with the open button on the new tab or by drag-and-drop:

And you won't lose any theme thanks to tabs.

Localizations

We translated our editor in Italian, Russian, Ukrainian, Uzbek and Spanish, thanks to these amazing people! Now, if you have one of the above languages set in your browser, you'll see the editor in your language:

We hope some people will feel more comfortable when they can use the editor in their mother tongue. And if you want to translate the editor in your language, do it in one of these ways:

Send us a pull request on our GitHub repository with your translation;
Contact @snejugal on Telegram, and he'll tell you what you should do.

Improved search

Our search became much better. First of all, search results look nicer, are handier on phones and accessible with keyboard:

Second, it's more sensitive to typos:

Third, unadded variables are explicitly marked so, and they are still shown with their color's preview:

The asterisk is a special keyword, giving you all variables and showing unadded ones first

Fourth, you can search by hex color:

And, unlike the old editor did, the new one does not add the color to your theme until you explicitly save it.

Improved variable editor

Palettes

The old editor had a palette, but it was incredibly awful. In the new editor, palettes became a powerful tool.

First of all, we made several palettes, and not one palette. Right now, we provide the following palettes:

The theme's colors;
The theme's custom palette;
Material Design;
CSS colors;
Apple.

The first palette is auto generated and shows you all the colors in your theme. The Material Design, CSS colors and Apple palettes are static built-in palettes with colors you might start a theme with.

The theme's custom palette is completely up to you! You can add any colors you like and give them names you like.

chat_wallpaper

When just released, the editor couldn't even parse the image from the theme, so it just disappeared when you downloaded it. After some time, the editor began to store the image, but you couldn't edit it. Finally, you can edit chat_wallpaper without any problem:

You can easily change the value from color to image and vice versa just by choosing the right tab in the variable editor.

The editor will generate some colors from the image and will suggest adding them in your custom palette:

Script running

You actually could run scripts in the old editor too, but it was caused that the editor had some global variables and you could change them in the browser's console. You can't easily do this in the new editor, instead we provided an official way to run scripts.

In the script above (here's the full code), we inverted our theme (as you can see in the background). But this is not the only thing you can do with scripts: for example, you can make a dark theme based on a light one (or vice versa) with the script from this post in out channel changing only the lightness of colors. We know you'll find a lot more of good uses of scripts.

Security of running scripts

We don't run scripts natively in the browser — it's no security. Instead, we use an interpreter written in JavaScript — es-interpreter, our fork of JS-Interpreter in which we add new features of EcmaScript 2015. We don't provide Web API for scripts, and it's unlikely that you'll be able to get out of the interpreter's sandbox.

Safety of running scripts

Thanks to the API we provide, it will throw if you're to set an invalid color, say rgba(134.46, NaN, 256, 0.543). This guarantees that you won't be able to break the theme and the editor along. If calculations may result in invalid colors, we provide the Color.normalizeRgbColor and Color.normalizeHslColors methods.

Anything else?

Yes!

We made a whole redesign of the editor (and left only the dark theme).
We now show HSL values on variables:

You can now click the logo on the header to scroll to top and back.
We switched the Download via Telegram and Download an .attheme file buttons. We do think that downloading via Telegram is much more comfortable than downloading a file and uploading to Telegram on your own.

And yeah, all the features from the old editor are available in the new one.

Anything interesting for a developer?

Yes! We've rewritten the editor from scratch and published the source code on GitHub. You can contribute in the editor or even fork it and start developing an editor for some other theme extension (e.g. .tdesktop-theme).

Inside, we use React for DOM rendering, attheme-js for parsing and serializing .attheme files, es-interpreter for running scripts and SCSS for styling.