@caludio's syntax tweak for JS and CSS

styles.less

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */

 atom-text-editor::shadow {

    .selection .region {
         background-color: rgba(44, 132, 200, .3);
    }

    .gutter {
         background-color: #002B36;
     }

    .cursor-line-no-selection {
//        background-color: rgba(24, 56, 64, 0.41);
    }

    .line-number {
        color: #807B64;
    }

    .line.cursor-line {
//        background-color: rgba(24, 56, 64, 0.41);
        background-color: rgba(44, 132, 200, .2);
    }

    .comment {
        color: #807B64;
        font-style: normal;
    }

    .source.js {
        color: #AB7070;
        .method-call,
        .support.constant,
        .variable.parameter,
        .entity.name {
            color: #6c71c4;
        }

        .variable.language.js {
            color: orange;
        }
        .punctuation.definition.parameters {
            color: #268bd2;
        }

        .keyword,
        .punctuation.definition.arguments,
        .meta.brace.round,
        .meta.brace.curly {
            color: #859900;
        }
    }

    .source.css {

        .punctuation.separator {
            color: #268bd2;
        }

        .pseudo-class.attribute-name {
            color: #859900;
        }
    }
}
/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
.tree-view {
    background-color: #002B36;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow .cursor {
  // border-color: red;
}