.attheme editor blog

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:

www.tgoop.com/atthemeeditor/24

1.0K viewsedited  Jul 14, 2018 at 04:02

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:

BY .attheme editor blog