A package to display a guide of the colors used by UI and Syntax themes
Firstly, please forgive me if I do anything wrong - this package is full of firsts - I've not written HTML / CSS / Less / Coffee before and, of course, not written a package for Atom before.
Colorguide will display the "final" values of the custom colors and custom color variables used by a theme - UI and Syntax.
Unfortunately, in order to do this, I must add files into the theme and modify one file. This is nesessary in order to obtain the actual values assigned to each variable.
Colorguide comes with configuration files for several of the popular themes:
Colorguide will display the colors values of Atom's required / Official UI and Syntax Variables even if the colorguide configuration files are not added to a theme.
I did not make configuration files for Atom's the out-of-the-box themes because:
This is an example of how to configure the seti-ui theme:
ui-variables.lessper the file
colorguide/examples/seti-ui/styles/add to ui-variables.less.txt
seti-uiis the ui theme
The background color of the four color bars are set by default to:
The first three background colors can be changed individually for each variable. In the
.coffee files, modify a
new cgVarColor() object definition to include additional parameter(s):
new cgVarColor(idx, group, category, name, desc, 'top color', 'mid-top color', 'mid-bottom color')
For example, to change the background color of the top color bar for
text-color-success shown above, modify the line in the file
colorguide/lib/cg-variables-ui-required.coffee like this:
new cgVarColor(0.060, g.GRPur1.key, c.CATur1.key, 'text-color-success', 'General Text Color - Success (Green)', '#000080')
This is not very complex but will take too long to explain. There are template configuration files in the examples folder:
examples/--syntax- for syntax themes
examples/--ui- for ui themes
Basically, copy the folders into the correct folder for the theme (make the
lib folder if needed) and edit them. There are notes in the template files that help understand how to edit them. The important thing to remember is that there must be a 1 to 1 correspondence between the class definitions in the
less file and the matching
Depending on interest, I may add a search function that will help find where a variable is located in the charts.
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.