Mix existing colours in stylesheet


I want my gutter to be unobtrusive, no matter what theme I have active. I would like to mix the background colour with the text colour, using Less’ mix function, e.g. mix(@background, @text, 90%). Is there any way I can reference existing variables?



Do you know of this core package?

Not your application, but the variables you ask can be seen in this example:

// styles.less
@import "syntax-variables";

atom-text-editor {
  /* show invisibles only in selection */
  .invisible-character {
     color: @syntax-background-color; 
  .cursor-line .invisible-character {
     color:  mix(@syntax-text-color, @syntax-background-color, 30%);

More information:


Whoa, that did the job perfectly. Thank you so much!


PS: I didn’t know of that package, thanks for that too.


@vimuel: Thank you for your :+1: feedback.

Another diamond you may want to know about: