Mix existing colours in stylesheet


#1

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?


#2

Hello.

Do you know of this core package?
image

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:
https://flight-manual.atom.io/hacking-atom/sections/creating-a-theme/#theme-variables


#3

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


#4

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


#5

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

Another diamond you may want to know about: