Initial styles for CodeMirror in the Chrome DevTools

codemirror.less

#-webkit-web-inspector .CodeMirror {
  background-color: @background !important;
  color: @foreground !important;

  .CodeMirror-selected { background-color: @selection !important; }
  
  .CodeMirror-gutters {
    background-color: @current-line !important;
    border-right: 1px solid @foreground !important;
  }
  
  .CodeMirror-linenumber {
    color: @foreground !important;
  }
  
  .CodeMirror-cursor {
    border-left: 1px solid @foreground !important;
  }
  
  // HTML:
  &.cm-s-web-inspector-html {
    pre { color: @html-text-node !important; }
    .cm-comment { color: @html-comment !important; }
    .cm-number,
    .cm-attribute { color: @html-attribute-name !important; }
    .cm-string { color: @html-attribute-value !important; }
    .cm-variable-2,
    .cm-tag { color: @html-tag !important; }
    .cm-variable-3,
    .cm-error { color: @error !important; }
    .cm-link { color: @html-link !important; }
  }
  
  // CSS:
  &.cm-s-web-inspector-css {
    .cm-comment { color: @javascript-comment !important; }
    .cm-qualifier { color: @css-selector !important; } // selector
    .cm-property { color: @css-property !important; }
    .cm-number { color: @css-number !important; }
    .cm-tag { color: @css-selector !important; }
    .cm-keyword { color: @css-keyword !important; } // "!important"
    .cm-atom,
    .cm-string,
    .cm-string-2 { color: @css-string !important; }
    .cm-meta { color: @css-special-rule !important; } // vendor prefix
    .cm-error { color: @error !important; }
    .cm-builtin,
    .cm-special { color: @css-special-rule !important; }
    .cm-link { color: @css-url !important; }
    .cm-operator { color: !important; } // ":"
  }
  
  // JavaScript:
  &.cm-s-web-inspector-js {
    .cm-comment { color: @javascript-comment !important; }
    .cm-atom { color: @javascript-ident !important; }
    .cm-number { color: @javascript-number !important; }
    .cm-keyword { color: @javascript-keyword !important; }
    .cm-string { color: @javascript-string !important; }
    .cm-property { color: @javascript-property-name !important; }
    .cm-property + .cm-string { color: @javascript-property-value !important; }
    .cm-variable-2 { color: @javascript-property-value !important; }
    .cm-variable-3,
    .cm-def { color: @javascript-string !important; }
    .cm-error { color: @error !important; }
    .cm-builtin,
    .cm-special { color: @javascript-keyword !important; }
    .cm-link { color: @html-link !important; }
  }
}