Ever thought handwriting .tmTheme files sucks? But the other options to
editing color schemes are not programmatical enough? Then this is for you.
CSScheme converts a custom CSS-like syntax into the .tmTheme files we all
love, but it does not end there. CSScheme can also take care of compiling
SCSS code into CSS and then into a color scheme using all features from SASS,
such as variables or conditionals.
Check the example file for what's possible!
Use Package Control to install CSScheme.
Create a new file with the .csscheme or .scsscheme extension, or just select
the corresponding syntax for your file. Building (ctrl+b or
command+b) will convert the file to CSS, if necessary, and then into
a .tmTheme file. Errors during conversion are captured in an output panel.
Things you need to consider when using SCSScheme (or SASScheme):
- Make sure that
sassis available on your PATH or adjust the path to the executable in the settings. - The SASS parser will not accept raw
#RRGGBBAAhashes. You need to enclose them in a string, e.g.'#12345678', or just use thergba()notation. - The SASS parser will also not work with the
-subtract scope seletor operator, so you need to enclose it in a string if you want to use it ('-'). CSScheme will take care of removing the quotes in the resulting color scheme file (an example for this can be found in the example file).
I won't outline conventions or the structure of color schemes in general (for now), but you should probably check out the following Useful resources section though if you have some questions.
CSScheme provides native support for CSS to .tmTheme conversion. Thus, all
languages that compile to CSS will also work in some way. SCSS (and SASS) have a
special treatment in that they are automatically built and SCSScheme even has
its own syntax definition because the one from the SCSS package highlights
unknown propoerties as invalid. Furthermore they provide snippets and
completions. For SASSchemes, you can use the syntax from the SASS Package.
If you want to use something different than SCSS, feel free to file an issue (if there isn't one already). I initially considered supporting LESS too, but they don't really provide much over SCSS and it's quite some work to write the syntax definitions for each of them. The SASS package on Package Control provides decent syntax highlighting that doesn't break with the properties that color schemes use though, so you can at least use that if you prefer.
Symbol List
Just press ctrl+r (command+r).
Snippets
if- only for SCSSchememixin- only for SCSScheme=(short formixin) - only for SCSScheme*(*ruleset)r(general purpose ruleset)
Completions
A few commonly used properties are completed as well as the basic scopes from the Text Mate scope naming conventions when specifying a selector.
Here is a bunch of links that might help you when working on your color scheme.
- TextMate Manual - Scope Selectors
- TextMate Manual - Scope Naming Conventions
- SASS/SCSS
- SASS (color) function reference
- Overview of SASS functions with example colors
- HSL to RGB converter
- Color Scheme Calculator
- Hue scales using HCL
- Multi-hued color scales
- Tool for multi-hued color scales
I prepared an example file that is merely a proof of concept and shows a few of the features that are supported. The colors itself don't make much sense and are not good on the eyes because I picked them pretty much randomly, but it gives some great insight on what is possible.
[Example SCSScheme.scsscheme](./Example SCSScheme.scsscheme)
Please note that all these aim to work directly on .tmTheme files and will not
work together with CSScheme since it does not yet support converting existing
schemes to CSS (and will never convert to SCSS).
- https://github.com/facelessuser/ColorSchemeEditor/ - Cross platform Python application for editing color schemes in a GUI
- https://github.com/nilium/schemer - OS X App, similar to the above
- http://tmtheme-editor.herokuapp.com/ - Webapp, similar to the above but with a bunch of example color schemes to preview/edit and a nice preview
- https://github.com/bobef/ColorSchemeEditor-ST2 - Sublime Text plugin that syncronizes