Annotated LightTable Theme

default.css

/* LightTable themes are just CSS. LightTable, CodeMirror, and plugins apply
classes to tokens within the text. Most of these classes are undocumented. I
had to go fishing with the dev inspector and apply brightly colored rules to
figure it out. Hopefully I can save you the trouble by documenting the default
theme. Please comment if you find any errors or omissions. */

/* These #multi rules apply to tabsets. Active means currently selected and dirty
means that the file has been edited since the last save. */
#multi.theme-default .tabset .list .active { color:var(placeholder-fg); }
#multi.theme-default .tabset.active .list .active { color:var(highlight-fg); }
#multi.theme-default .tabset.active .list .dirty { color:var(accent-foreground); }

/* Default background and color (text) styles; more specific rules below. */
.cm-s-default { background: var(multi); color:var(fg); }

/* LightTable does not unload themes. It does, however, add the current theme's
name as a class of a parent of each tab's content. You need to qualify your
rules with ".cm-s-THEME" to prevent them from applying when your theme is
inactive. */

/* Styles for rainbow delimiters. Nested delimiters get a .cm-bracketN class
where N is the depth of the delimiter nesting. The default theme provides 12
levels but I think you can provide an arbitrary number. Unfortunately, it isn't
currently possible to configure the Rainbow plugin to reset the class depth
after a specific nesting depth has been reached. */
.cm-s-default span.cm-bracket {color: #aaa;}
.cm-s-default span.cm-bracket1 {color: #aaa; }
.cm-s-default span.cm-bracket2 {color: #0f0;}
.cm-s-default span.cm-bracket3 {color: #00ff7f;}
.cm-s-default span.cm-bracket4 {color: #00ffff;}
.cm-s-default span.cm-bracket5 {color: #836FFF;}
.cm-s-default span.cm-bracket6 {color: #FF00FF;}
.cm-s-default span.cm-bracket7 {color: #9B30FF;}
.cm-s-default span.cm-bracket8 {color: #00ff7f;}
.cm-s-default span.cm-bracket9 {color: #00ffff;}
.cm-s-default span.cm-bracket10 {color: #836FFF;}
.cm-s-default span.cm-bracket11 {color: #FF00FF;}
.cm-s-default span.cm-bracket12 {color: #9B30FF;}
.cm-s-default span.cm-bracket0, .cm-s-default span.cm-bracket-mismatched { color:#f88; background:#733; }

/* I have no idea what .cm-symbol is. I haven't been able to find it anywhere.
It doesn't even appear in the CodeMirror source code. */
.cm-s-default span.cm-symbol {color: #ccc;}

/* Applied to variables, obviously. */
.cm-s-default span.cm-variable {color: #ccc;}
/*The second version is applied for variables in an inner scope. */
.cm-s-default span.cm-variable-2 {color: #acf}

/* Applied to strings, obviously. */
.cm-s-default span.cm-string {color: #add}
/* Applied to string-ish tokens like regular expressions. */
.cm-s-default span.cm-string-2 {color: #add;}

/* Applied to numbers, obviously. */
.cm-s-default span.cm-number {color: #ccc;}

/* Applied to definitions and declarations. For example, in the JavaScript code
`var foo`, `foo` will have the .cm-def class applied. */
.cm-s-default span.cm-def {color:#acf;}

/* Applied to some built-in functions (some of clojure.core has this class),
id selectors in CSS, and who knows what else. */
.cm-s-default span.cm-builtin {color: #aec;}

/* Applied to headers in Markdown. */
.cm-s-default span.cm-header {color: #aec;}

/* Applied to CSS properties, JS object properties, and other property-like tokens. */
.cm-s-default span.cm-property {color: #aaa; }

/* Applied to the colon between properties and values and probably (hopefully?)
other tokens. It's not even applied math operators in JavaScript, which are not
classified. */
.cm-s-default span.cm-operator {color: #aaa; }

/* Applied to language reserved tokens like JavaScript's `var`. */
.cm-s-default span.cm-keyword {color: #aec; }

/* Applied to CSS class selectors. */
.cm-s-default span.cm-qualifier {color: #aec; }

/* Applied to HTML attributes. */
.cm-s-default span.cm-attribute {color: #aec; }

/* Applied to metadata like HTML doctype declarations. */
.cm-s-default span.cm-meta {color: #aec; }

/* Applied to JavaScript booleans and null, CSS hex colors, and probably
other random tokens. */
.cm-s-default span.cm-atom { color: #caf; }

/* Applied to HTML tags in both CSS selectors and HTML. */
.cm-s-default span.cm-tag {color: #acf;}

/* Applied to comments, obviously. */
.cm-s-default span.cm-comment { color:#9ac; }

/* This isn't included in the default theme but ".cm-link" is applied to links
in Markdown. */
.cm-s-default span.cm-link {color: #fff;}

/* I have not yet been able to find these in the wild. */
.cm-s-default span.CodeMirror-searching { background: #aaa; color:black; }
.cm-s-default span.CodeMirror-searching-active { background: #afa; color:black; }

/* Applied to selected text. */
.cm-s-default .CodeMirror-selected { background: #555; }
/* Applied to selected text if the tab is currently focused. */
.cm-s-default .CodeMirror-focused .CodeMirror-selected { background: #444; }

/* This should apply to the line where the cursor is but I haven't seen it in
the wild yet. */
.cm-s-default .CodeMirror-activeline { background:#303030; }

/* These classes are applied to matching ({}) and nonmatching (}) delimiters. */
.cm-s-default span.CodeMirror-matchingbracket {box-sizing:border-box; background:transparent; border-bottom:1px solid #3FF; font-weight:normal;}
.cm-s-default span.CodeMirror-nonmatchingbracket {color: #F33; border-bottom:1px solid #F33; background:none;}

/* Applied to all search results. */
.cm-s-default .cm-searching { background:#5f5f5f; border-radius:0px; color:#eee !important; }
/* Applied to the currently selected search result. I don't know why it isn't
prefixed with "cm-". */
.cm-s-default .searching-current { background:#13879C; color:#BFFCFF !important; }

/* Applied to the cursor. */
.CodeMirror div.CodeMirror-cursor { border-left: 1px solid white; }

/* The following comment appears in the default theme. I have no idea what
"bi-direction text" is or how it differs from normal text. */
/* Shown when moving in bi-directional text */

/* This seems to be applied to each tab but it's hidden. Apparently none of my
text is "bi-directional".*/
.CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; }

/* Applied to the cursor when not in insert mode. */
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { width: auto; border: none !important; background: rgba(0, 200, 200, .4); }

/* Applied to editor gutters. */
.CodeMirror-gutters { background: var(multi); border-color:var(dark-highlight-bg); border:none; }

/* This should apply to the line number for the current line but I haven't seen
it in the wild yet because I haven't seen .CodeMirror-activeline. */
.cm-s-default .CodeMirror-activeline .CodeMirror-linenumber { color:var(blinding-fg); }

/* Applied to autocomplete popups. */
.CodeMirror-hints { position: absolute; z-index: 1000000000000000; overflow: hidden; list-style: none;  margin: 0; padding: 2px;  border-radius: 2px; border: 1px solid var(pane-bg);  background: var(pane-bg); font-size: 90%; font-family: inherit;  max-height: 20em; }
.CodeMirror-hints ul { overflow-y:auto; max-height:20em; }
.CodeMirror-hints ul li { margin: 0; padding: 0 4px; border-radius: 2px; max-width: 60em; overflow: hidden; white-space: pre; color: #ccc; cursor: pointer; }
.CodeMirror-hints input { display:none; }
.CodeMirror-hints .selected { background: var(highlight-bg); color: var(highlight-fg); }
.CodeMirror-hints ul::-webkit-scrollbar-thumb { background: var(scrollbar); border-color: var(scrollbar); }

/* You'll notice quite a few rules that are not qualified with ".cm-s-default".
The default LightTable theme loads CSS rules that apply *outside* of the
default theme. I think much of this probably belongs in the skin instead of the
theme or should be namespaced so as not to interfere with other themes. */