How to change colors on text editor?

[fofb]

I am just starting to learn LightTable ......
I am trying to create a color theme for folks who need high contrast with color syntax.
At this time, i am using the-matrix.css theme.

Here is a fragment of user.behaviors file
     ;; The editor tag is applied to all editors
     :editor [:lt.objs.editor/no-wrap
              (:lt.objs.style/set-theme "the-matrix" )]


Here is a line lifted from new-dark-css:

#multi .list.dragging li { background:transparent !important; }


The "#multi" string is displayed as bark blue with background = #000000  (black).
Visually, contrast is poor for dark blue / black pairing

Looks like #multi is an id.  I assume we have to change the id attribute in the-matrix.css theme.
But I am not sure which line is  the id attribute.

There is also a default.css in LightTable/core/css/, and new-dark.css.file in folder LightTable/core/css/skins .

I did not see any doc with discussion on how to create new themes, which would help immensely.
A guide on editor display attribute names and corresponding description would help a lot for new users also.
 

Thanks.

[Anton Dyudin]

The line you are looking for is cm-builtin, whose #30a could be something lighter:

For any kind of css editing, I highly recommend the Pallete plugin, which is responsible for the little circles you see above; my first thought was to go through codemirror's modes/css.js to figure out where ids were handled (<[237 9].[238 29]> apparently), but when I opened the matrix css, which class was colouring things dark blue was immediately apparent ^-^

P.S. Official documentation for what the codemirror classes mean would be lovely. I haven't found anything more authoritative than http://yannick-lohse.fr/2013/08/19/code-mirror-2-classes.html, and I fear I largely disregarded that when writing my own highlighting mode, in favor of visual distinctness under the default theme.

[Anton Dyudin]

P.P.S. another invaluable tool, whose utility I doubt I need to reiterate on this mailing list, is Adding a Connection to the Light Table UI when editing theme files. Then, ⌘⏎ can be used to immediately apply the current line of css(to e.g. the code you wish to color in an hsplit). Of course in this case, the effect was visible on the first two lines of the very file being edited.

[fofb]

Anton:

How do you go about adding plugin?

Thanks.

[Anton Dyudin]

In the command menu, Plugins: Show plugin manager, and type the name into the search bar(tbh this should really also be a live filter list, but instead you need to type the whole word and press Enter). Then mouse over the relevant row and click "install". I forget if a restart is necessary P: