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.
ctrl-alt-o
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:
colorguide/examples/seti-ui/lib/colorguide
into seti-ui/lib/colorguide
colorguide/examples/seti-ui/styles/colorguide
into seti-ui/styles/colorguide
ui-variables.less
per the file colorguide/examples/seti-ui/styles/add to ui-variables.less.txt
seti-ui
is the ui themeThe 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')
Which produces:
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 themesexamples/--ui
- for ui themesBasically, 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 coffee
file.
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.