Define syntax-variables.less

[benogle]

See https://github.com/atom/template-syntax/blob/master/stylesheets/syntax-variables.less

[jglovier]

@benogle sorry it turns out I wasn't even watching this repo! :confounded:

So what's the deal with this? What is syntax-variables.less for?

[benogle]

No prob. It's there so packages can use the colors from the syntax theme, like the background, etc.

[jglovier]

Ah - gotcha. I'll add it. Thx.

[jglovier]

@benogle so what's the best way to implement this in my theme - add the rules in somewhere existing, or include it in index.less?

[benogle]

You should create a syntax-variables.less file, add all the variables, then import it in your index and use all the vars in your theme. You can use the one themes as a template: https://github.com/atom/one-dark-syntax/blob/master/styles/syntax-variables.less

[jglovier]

@benogle I'm finally going to address this... 😛 Is this still the correct approach, or has anything changed since you opened this issue?

[benogle]

I think so? I dunno. @simurai?

[simurai]

@jglovier Yes, still correct.

I guess you got lucky because for example the fallback background color is the same as in Fizzy. But some other variables could still be off a bit.

Here a quick guide (ping me if you get stuck):

1. Copy the fallback variables and add them as fizzy/styles/syntax-variables.less.
2. Import the fizzy colors: @import "colors";
3. Replace the values with the variables from colors.less. E.g. @syntax-background-color: @white;
4. Optional: Use the syntax variables throughout the theme. E.g. background-color: @syntax-background-color;. Not strictly needed, but then you don't have to change them in syntax-variables.less and base.less.

[jglovier]

@simurai awesome, thanks!! 🙇