Create Sublime Text or Text Mate color schemes in CSS, SCSS or stylus
- Total 6K
- Win 5K
- OS X 936
- Linux 689
|Mar 25||Mar 24||Mar 23||Mar 22||Mar 21||Mar 20||Mar 19||Mar 18||Mar 17||Mar 16||Mar 15||Mar 14||Mar 13||Mar 12||Mar 11||Mar 10||Mar 9||Mar 8||Mar 7||Mar 6||Mar 5||Mar 4||Mar 3||Mar 2||Mar 1||Feb 28||Feb 27||Feb 26||Feb 25||Feb 24||Feb 23||Feb 22||Feb 21||Feb 20||Feb 19||Feb 18||Feb 17||Feb 16||Feb 15||Feb 14||Feb 13||Feb 12||Feb 11||Feb 10||Feb 9||Feb 8|
CSScheme - Sublime Text Plugin
Ever thought handwriting
.tmTheme files sucks? But the other options for
editing color schemes are not programmatical enough? Then this is for you!
CSScheme is a custom CSS-like syntax that converts into the
.tmTheme files we
all love, but it does not end there. CSScheme (the package) can also take care
of compiling SCSS, SASS or stylus into CSScheme (the syntax) and then into
a color scheme using all features of these pre-compilers, such as variables,
conditionals or functions.
Check the example files for what's possible!
Usage (Please Read!)
You can either create a new file with the CSScheme: Create new *Scheme file
commands, open a file with the
.styluscheme extension or convert an existing
tmTheme file using the
CSScheme: Convert to CSScheme command or build system. Conversion to other
syntaxes is not supported at the moment and likely won't in the future. Please
convert manually and to your own preferences.
Building (ctrl+b or ⌘b) will convert the file to CSScheme,
if necessary, and then into a
.tmTheme file. Errors during conversion are
captured in an output panel. For automation purposes, the command is named
Things you must consider when using CSScheme:
@at-rules will be added as string values to the “outer dictionary”. You may specify a global
@namerule to specify the scheme's name.
@namerules in a ruleset will show as the name for various color scheme editing tools after compilation. Sublime Text itself does not use it.
- In order to create a
.hidden-tmThemefile, you need to specify a global
@hidden true;rule. The converter will consume this rule and change the output file's extension accordingly.
- If you want a property to have no font styles you have to specify
fontStyle: none;. This will be translated to
- The general settings (like main background color) are read from a general-
purpose block with a
*selector. This is required.
- Specifying a uuid (via
@uuid) is optional because Sublime Text ignores it.
Things you must consider additionally when using CSScheme with SCSS or SASS:
- 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 must enclose them in a string, e.g.
'#12345678', or just use the
- The SASS parser will also not work with several scope selector operators (
|). You must escape these with a backslash. The same applies to scope-segments starting with a number.
CSScheme will take care of removing backslashes before emitting the final conversion result. Examples can be found in the example files).
Note: Because the SASS parser does not know about the semantics of these operators, they will generally behave poorly when used in conjunction with scope nesting.
Things you must consider additionally when using CSScheme with stylus:
- Make sure that
stylusis available on your PATH or adjust the path to the executable in the settings.
- At-rules, like the required global
@namemust be encapsulated with
unquote('@name "Example StyluScheme";')
- At-rules in non-global scope do not work! You'd only need these for
@commentanyway, but stylus does some weird stuff that does not translate into sane CSScheme.
CSScheme (the package) provides native support for CSScheme-to-
conversion. Thus, all languages that compile to CSS will also work in one way or
another. SCSS/SASS and stylus are automatically built from within Sublime Text,
and SCSScheme even has its own syntax definition because the one from the SCSS
package highlights unknown properties as invalid. Furthermore they provide
snippets and completions.
- Syntax highlighting for CSScheme and SCSScheme is bundled. Snippets and completions are provided for both.
- For SASScheme syntax highlighting you additionally need the Sass package.
- For StyluScheme syntax highlighting you additionally need the Stylus package.
If you want to use something a different pre-processor, you can do so by converting to CSScheme externally and then do conversion from CSScheme to tmTheme from within Sublime Text. Feel free to file an issue (if there isn't one already) if you'd like built-in support for an additional pre-processor.
Utility for Scheme Creation
(only CSScheme and SCSScheme)
Just press ctrl+r (⌘r).
In StyluScheme this is somewhat supported but since scope names are not regular html tags they don't get recognized (since I didn't bother to write a new syntax definition for stylus as well).
r(general purpose ruleset)
for(from … to),
fort(from … through)
All known 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
I prepared two example files that are merely a proof of concept and show 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.
Other Efforts for Easing Color Scheme Creation
Please note that all these work directly on
- 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