for atom theme

style.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
 */


/*
 * Examples
 * (To see them, uncomment and save)
 */


 // Config from one-light -----------------------------------
 @syntax-hue:          230;
 @syntax-saturation:    1%;
 @syntax-brightness:   98%;
 @syntax-bg:     hsl(@syntax-hue, @syntax-saturation, @syntax-brightness);
 // ---------------------------------------------------------

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
  background-color: @syntax-bg;
  font-family: "consolas"; //default: menlo, others: monaco,sourcecodepro, inconsolata
}

atom-text-editor::shadow .gutter {
  background-color: @syntax-bg;
}

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

.indent-guide-improved.indent-guide-stack {
  background-color: @syntax-indent-guide-color;
}

.indent-guide-improved.indent-guide-stack.indent-guide-active {
  background-color: @syntax-indent-guide-color;
}


// syntax-theme: atom-light 

for atom theme.