.attheme editor blog

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:

www.tgoop.com/atthemeeditor/11

1.8K viewsJun 25, 2018 at 16:56

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);
}

- 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];

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),
  );
}

BY .attheme editor blog