My hacks to atom material theme

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

// Imports
@import "octicon-mixins";

// Vars from theme:
// https://github.com/silvestreh/atom-material-ui/blob/master/styles/ui-variables.less
@text-color-ignored: fade(@text-color, 50%);
@text-color-added: lighten(@text-color-success, 10%);
@text-color-renamed: lighten(@text-color-info, 10%);
@text-color-modified: lighten(@text-color-warning, 10%);
@text-color-removed: @text-color-error;

// Custom vars
@bkgd: #263238;
@tree-text-color: #516e7a;
@selected-color: #80cbc4;
@faint-color: lighten(@bkgd, 2%);

// Make the bkgd a little darker
atom-text-editor {
  background-color: darken(@bkgd, 1%);
  -webkit-font-smoothing: antialiased;
}

// Make gutter darker too
atom-text-editor::shadow .gutter {
  background-color: darken(@bkgd, 0.7%);
}

// Make the selected row milder
atom-text-editor::shadow .line.cursor-line {
  background: mix(@selected-color, @bkgd, 1%);
}

// Fix the selection, making it light instead of dark
atom-text-editor::shadow {
  @selection-bkgd: mix(@selected-color, @bkgd, 5%);
  .selection .region {
    background: @selection-bkgd;
    &:after {
      border-color: @selection-bkgd;
    }
  }
}

// Line number tweaks
atom-text-editor::shadow .line-number {

  // Make the line number highlight light instead of dark
  &.cursor-line {
    background: mix(@selected-color, @bkgd, 15%);
    color: @selected-color;
  }

  // Make git colors match
  &.git-line-added { border-left-color: @text-color-added !important; }
  &.git-line-modified { border-left-color: @text-color-modified !important; }
  &.git-line-renamed { border-left-color: @text-color-renamed !important; }
  &.git-line-removed { border-left-color: @text-color-removed !important; }

}

// Shared tree styles for file and directory
li.directory.entry.list-nested-item,
li.file.entry.list-item {

  // Animation
  transition: color 100ms;
  &:before { transition: background 600ms; }

  // Common selected state
  &.selected:before {
    border-left: 3px solid @selected-color;
    background: mix(@selected-color, @bkgd, 10%) !important;
    transition: background 200ms;
  }
}

// Tree folders
li.directory.entry.list-nested-item {
  .list-item {
    color: @tree-text-color;
  }

  // Highlight when open
  &.expanded {
    color: mix(@selected-color, @tree-text-color);
  }

  // Hover
  &:hover > .list-item {
    color: @selected-color !important;
  }

  // Change the git status to dots
  &.status-modified > .list-item,
  &.status-added > .list-item {
    color: @tree-text-color;
    transition: color 100ms;
    &:after {
      .icon(10px);
      margin-left: 5px;
    }
  }
  &.status-modified > .list-item:after {
    color: @text-color-modified;
    content: '\f052';
  }
  &.status-added > .list-item:after {
    color: @text-color-added;
    content: '\f05d';
  }
}

// Tree files
li.file.entry.list-item {
  color: @tree-text-color;

  // Hover
  &:hover {
    color: @selected-color !important;
  }

  // Change the git status to slight coloration
  &.status-added {
    color: mix(@text-color-added, @tree-text-color);
  }
  &.status-modified {
    color: mix(@text-color-modified, @tree-text-color);
  }


  // Selected styles
  &.selected {
    color: @selected-color;
    &.status-added {
      color: mix(@text-color-added, @selected-color);
    }
    &.status-modified {
      color: mix(@text-color-modified, @selected-color);
    }
  }
}

// Overriding some annoying importants that were showing a gross brown color
// on some modified items
.focusable-panel:focus .selected[class*="status-"] {
  &,
  > span,
  &.list-item.entry > span:before,
  > .header.list-item > span.icon,
  &.directory > .header.list-item:before {
    color: @selected-color !important;
  }
}

// Indent guide customization
// https://atom.io/packages/indent-guide-improved
.indent-guide-improved {
  // background-color: @faint-color;
  &.indent-guide-stack {
    background-color: @faint-color;
    &.indent-guide-active {
      background-color: lighten(@faint-color, 5%);
    }
  }
}