index.less

// Settings:
@basic: #DCDCDC;                // Базовый цвет
@background: rgb(9, 11, 13);    // Фон
@selection-color: #264F78;      // Цвет выделения текста
@current-line: rgb(15, 15, 14); // Цвет выделения текущей строки (той, на которую указывает курсор)
@current-line-border: #262222;  // Цвет рамки вокруг текущей строки
@string-number: #2B91AF;        // Цвет номеров строк(слева)
@indent-guide: #165060;         // Цвет помошника с отступами(линии, соединяющие начало и конец отступа)
@comment: #57A64A;              // Комметарии
@operators: #F1F2F3;            // Символы операций, аргументы функций, скобки <> в html, имена атрибутов в html, doctype
@tags: #569CD6;                 // Цвет тегов классов и id в pug, html, css, sass
@reg-exp-groups: #D69D85;       // Цвет скобок групп в RegExp
@css-values: #B8D7A3;           /* Цвет значения в CSS, базовые значения в js(цифры),
                                   Свойства у Math+Number, числовые значения в JSON */
@css-property-name: #4EC9B0;    // Цвет имени свойства в CSS, Именя некоторых стандартных  объектов в js
@statements: #569CD6;           /* var, function, селектор тега, return, true, false, if, for, continue,
                                   квантификаторы в RegExp, true/false в JSON */
@strings: #D69D85;              // Цвет строк, // и \* в RegExp
@text: rgb(216, 121, 37);       // Цвет обычного текста в html и pug

atom-text-editor {
  background-color: @background; // Фон
  color: @basic; // Базовый цвет

  .cursor {
    border-color: @basic; // Цвет мерцающего курсора
  }

  .selection .region {
    background-color: @selection-color; //  Цвет выделения курсором участка кода
  }

  .line-number.cursor-line-no-selection {
    background-color: @current-line; // Слева в столбце, где номер строки - подсветка текущей строки
  }

  // Выделение активной строки
  .line.cursor-line {
    box-sizing: border-box;
    background-color: @current-line; // Сам фон
    box-shadow: inset 0 0 0 2px @current-line-border; // Обводка
  }

  .line-number {
    color: @string-number; // Цвет номеров строк (левая часть)
  }

  .indent-guide {
    color: @indent-guide; // Помощь с отступами - цвет (линии уровня)
  }

  .syntax--text {
      color: @text; // Цвет обычного текста в html и pug
  }

  .syntax--keyword.syntax--operator.syntax--js, .syntax--entity.syntax--name.syntax--tag, .syntax--constant.syntax--other, .syntax--source.syntax--php.syntax--embedded.line, .syntax--variable.syntax--parameter, .syntax--meta.syntax--tag, .syntax--declaration.syntax--tag,
  .syntax--definition, .syntax--attribute-name, .syntax--source, .syntax--doctype {
    color: @operators; // Символы операций, аргументы функций, скобки <> в html, имена атрибутов в html
  }

  .syntax--comment {
    color: @comment; // Комментарии
  }

  .syntax--comment.syntax--doctype {
    color: @operators;
  }

  .syntax--support.syntax--other.syntax--variable, .syntax--string.syntax--other.syntax--link, .syntax--entity.syntax--name.syntax--tag, .syntax--entity.syntax--name.syntax--filename.syntax--find-in-files {
    color: @tags; // Цвет тегов в pug, html
  }

  .syntax--string.syntax--regexp, .syntax--meta.syntax--link {
    color: @reg-exp-groups; // Цвет скобок групп в RegExp
  }

  .syntax--constant.syntax--numeric, .syntax--support.syntax--constant, .syntax--punctuation.syntax--section.syntax--embedded, .syntax--keyword.syntax--other.syntax--unit, .syntax--entity.syntax--name.syntax--interface, .syntax--meta.syntax--generic.syntax--type.syntax--specifier > .syntax--entity.syntax--name {
    color: @css-values; // Цвет значения в CSS, базовые значения в js(цифры), Свойства у Math+Number, числовые значения в JSON
  }

  .syntax--entity.syntax--name.syntax--class, .syntax--entity.syntax--name.syntax--type.syntax--class, .syntax--support.syntax--type,  .syntax--support.syntax--class {
    color: @css-property-name; // Цвет имени свойства в CSS, Math+Number+HTMLInputElement+Object в js
  }

  .syntax--string, .syntax--constant.syntax--other.syntax--symbol, .syntax--constant.syntax--character, .syntax--entity.syntax--other.syntax--inherited-class, .syntax--markup.syntax--heading, .syntax--constant.syntax--numeric.line-number.syntax--match.syntax--find-in-files {
    color: @strings; // Цвет строк, // и \* в RegExp
  }

  .syntax--keyword, .syntax--storage,.syntax--entity.syntax--name.syntax--tag.syntax--css, .syntax--constant.syntax--language, .syntax--keyword.syntax--operator,
  .syntax--keyword.syntax--operator.syntax--new {
    color: @statements; // var, function, селектор тега, return, true, false, if, for, new, continue, квантификаторы в RegExp, true/false в JSON
  }

  // Цвет классов и id
  .syntax--class.syntax--css, .syntax--id.syntax--css {
  }
}