theme.less

/* 
========================================== 
Bluemist: A brackets theme v1.2
========================================== 
v1.3:
- active line number put to the left for readability
- centered unfolded gutter-triangle correctly
- cleanup

Unnecessary CSS (we don't need it, it's nice without):
.cm-matchhighlight { -matching live selection- }

Referencefile: 
https://github.com/adobe/brackets/blob/master/src/extensions/default/DarkTheme/main.less

Code-Colors inspired by:
https://github.com/apezel/brackets-easy-dark/blob/master/theme.css
*/

/* 
========================================== 
All the colors here:
========================================== 
*/

@comments:      #f271b1;                //comments                               
@background:    #394551;                //background
@backdark:      #333d48;                //background, a bit darker
@foreground:    #dddddd;                //foreground 
@darker:        #2c363f;                //darker bluemist (e.g. gutter background)
@marker:        #d44a26;                //marked text                           
@border:        #777777;                //subtle grey border (e.g. right border of the gutter)                           
@grey:          #424242;                //grey
@cursor1:       #ffffff;                //cursor1 normal mode
@cursor2:       #ff0404;                //cursor2 overwrite mode
@matching:      #00ff00;                //matching brackets
@nonmatching:   #ff0000;                //nonmatching brackets
@searchall:     #809136;                //search highlight all hits
@searchcurrent: #b5fd07;                //search highlight current hit
@color-1:       #FF3b6b;                //pink                           
@color-2:       #4da4c0;                //blue                           
@color-3:       #fff176;                //yellow                           
@color-4:       #31be6A;                //green                                           
@color-5:       #ba68c9;                //violet                           
@color-6:       #fecF96;                //orange                           
@color-7:       #AEDA7C;                //lightgreen
@color-8:       #fa0000;                //signalred
@color-9:       #0303ff;                //signalblue

/* 
========================================== 
Editor CSS here:
========================================== 
*/

.CodeMirror, .CodeMirror-scroll {                               /*basic editor colors*/                               
    background-color: @background;
    color: @foreground
}

.CodeMirror-gutters,
.CodeMirror-linenumber {                                        /*gutter*/
    background: @darker;                                        /*gutter background*/
    border-right: 1px solid @border;                            /*gutter foreground*/
    color: @foreground                                          /*gutter numbers*/
}

.CodeMirror-selected {                       	                /*selected text*/
    background: @marker;
    opacity: 0.5
}

.CodeMirror-cursor {                                            /*cursor1 normal mode*/
    border-left: 2px solid @cursor1
}

.CodeMirror-overwrite .CodeMirror-cursor {                      /*cursor2 overwrite mode*/
    border-left: 0px;
    border-bottom: 3px solid @cursor2
}

.CodeMirror-activeline .CodeMirror-linenumber {                 /*active line in gutter*/
    background: @foreground;
    color: @background;
    font-weight: 900;
    text-align: left
}

.CodeMirror-activeline-background {                             /*active line in editor*/
    background: darken(@background, 3%);
    border-style: none
}

.CodeMirror-foldgutter-open:after,                              /*unfolded code triangle*/
.CodeMirror-foldgutter-open:after, 
.CodeMirror-foldgutter-open:after 
.CodeMirror-activeline 
.CodeMirror.over-gutter {
    color: @border;
    padding: 2px
}

.CodeMirror-foldgutter-folded:after {                           /*folded code triangle*/
    color: @comments
}

.quick-view-highlight {                                         /*inline popup texthover*/
    background-color: @marker
}

span.CodeMirror-matchingbracket {                               /*matching brackets*/
    color: @background;
    background-color:@matching
}

span.CodeMirror-nonmatchingbracket {                            /*nonmatching brackets*/
    color: @matching;
    background: @nonmatching
}

.CodeMirror-matchingtag {                                       /*html matching tags*/
    background-color: darken(@background, 10%)
}

.CodeMirror-searching {                                         /*search highlicht all hits*/
    background-color: @searchall
}

.CodeMirror-searching.searching-current-match {                 /*search highlight current hit*/
    background-color: @searchcurrent
}

.CodeMirror-foldmarker {                                        /*code-folding collapsed text placeholders*/
    border: 0px;
    color: @background;
    background-color: @foreground
}

.image-view,
.not-editor {                                                   /*image view background*/
    background-color: @background
}

.view-pane .image-view {                                        /*image view foreground*/
    color: @foreground
}

/* 
========================================== 
Code-Colors CSS here:
========================================== 
*/

span.cm-atom {
    color: @foreground;
}

span.cm-string {
    color: @color-7;
}

span.cm-string-2 {
    color: @color-7;
}

span.cm-hr {
    color: @color-3;
}

span.cm-number {
    color: @color-5;
}

span.cm-attribute {
    color: @foreground;
}

span.cm-plus {
    color: @color-2;
}

span.cm-def {
    color: @color-6;
}

span.cm-property {
    color: @color-2;
}

span.cm-operator {
    color: @color-1;
}

span.cm-meta {
    color: @color-2;
}

span.cm-bracket {
    color: @color-2;
}

span.cm-variable {
    color: @color-6;
}

span.cm-variable-2 {
    color: @color-6;
}

span.cm-variable-3 {
    color: @color-6;
}

span.cm-comment {
    color: @comments;
}

span.cm-error {
    color: @color-8;
}

span.cm-minus {
    color: color-9;
}

span.cm-header {
    color: @color-1;
}

span.cm-link {
    color: @color-8;
    text-decoration: none;
}

span.cm-rangeinfo {
    color: @color-9;
}

span.cm-keyword {
    color: @color-1;
    font-weight: 900;
}

span.cm-qualifier {
    color: @color-4;
}

span.cm-builtin {
    color: @color-4;
}

span.cm-tag {
    color: @foreground;
}

span.cm-quote {
    color: @color-1;
}