Gradient in syntax theme


#1

Is Atom able to display gradient-effects?

I tried this inside the syntax-variables.less file:

@syntax-gutter-background-color: linear-gradient( yellow, blue );

and

@syntax-gutter-background-color: -webkit-linear-gradient( yellow, blue );

even

@syntax-gutter-background-color: .gradient( yellow, blue );

(The last one made the whole theme disappear-> no cursor, everything white, hard to edit)

Can someone help me?

Thanks in andvance

Red


#2

It’s generally better to experiment with things like this in your styles.less file first so you don’t end up breaking your theme completely on a syntax error like in your last example.

To confirm the issue, I tried the following:

.editor .gutter {
  background-color: blue;
}

which worked. But when I changed it to:

.editor .gutter {
  background-color: linear-gradient(yellow, blue);
}

Or the -webkit- prefixed variant, it did not work. So it isn’t a matter of specificity or anything like that.


#3

Yeah, the reason this doesn’t work is because linear-gradient and other gradients are actually background images and not colours. So you’ll have to set the gutter manually instead of just using the variable:

.editor .gutter {
  background: linear-gradient(yellow, blue);
}

You’ll probably want to set a fallback colour for @syntax-gutter-background-color in case any other packages use it.