atom personal style sheet in ~/.atom/styles.less

styles.less

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * If you are unfamiliar with LESS, you can read more about it here:
 * http://www.lesscss.org
 */

.tree-view {
  font-size: 120%;
}

/* your personal stylesheet */
atom-text-editor {
  /* comments are white on green */
  .syntax--definition.syntax--comment,
  .syntax--comment.syntax--line,
  .syntax--comment.syntax--block {
    background-color: #464;
    color:            #FFF;
    //box-shadow:       0px 0px 5px 2px #575;
  }

  /* also provide a bit more padding, and coolio border-radius */
  /* screws up caret location, disabling ...
  .syntax--comment.syntax--line,
  .syntax--comment.syntax--block {
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-radius: 0.25em;
  }
  */

  /* double visual width of indentation */
  .leading-whitespace, .trailing-whitespace {
    /* letter-spacing: 0.5em; */
  }

  /* make names of defined functions and classes bigger */
  .syntax--meta.syntax--function .syntax--entity.syntax--name.syntax--function,
  .syntax--meta.syntax--class    .syntax--entity.syntax--name.syntax--type.syntax--class {
    font-size: 100%;
    // offset-x | offset-y | blur-radius | color
    // text-shadow: 0px 0px 3px red;
    box-shadow: 0px 0px 3px 3px #AA7;
    border-radius: 0.25em;
    padding-left: 0.25em;
    padding-right: 0.25em;
    background-color: #500;
  }

  /* keywords */
  .syntax--keyword.syntax--operator,
  .syntax--constant.syntax--language,
  .syntax--storage,
  .syntax--keyword.syntax--control {
    // text-decoration: underline;
    font-size: 80%;
    font-style: italic;
    // font-family: Helvetica;
    // box-shadow: 0px 0px 5px 3px #575;
    border-radius: 0.25em;
    background-color: #009;
  }

  .syntax--storage.syntax--type.syntax--function.syntax--arrow {
    text-decoration: none;
    font-size: 100%;
  }
}

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

Effects from personal style sheet:

• comments are white on green
• double indentation - for JS this means seeing 4 space indent when it's actually 2
• functions and classes are a bit bigger and have a "halo" around them
• js keywords are a bit smaller and italic

example:

👍 for double visual width for indentations

🙌 Double indentation 👏

You sir are a life saver, seriously